Drag And Drop Content From App To App With Jetpack Compose | Android Tutorial

in this video I will show you how you can share Rich content so like images text or even audio to other apps using drag and drop in the Multi Window mode hi guys my name is an guys I hope you're doing well and I welcome you to a new video as you can see we here already in the multi- Window mode so we have two apps running one is the share app and one is the Receiver app one app shares some content in this case text and the other can receive text when I now long click on this text you can see that it appears here and I can now drag it and drop it to the other app and on drop you can see that the text moves to the other app and displays so let's see how we can enable our apps to share content and also to receive content I'm here in the repository for those two apps we just saw so we have one content receive app and also one content share app the source code of this repository is linked down in the description however let's first dive into the content share app to see what we need to do to enable such content sharing using direct drop here inside the content share app you can see that we have a share content screen and that is where the magic happens because here we have um our layout you may already recognize it from the example I just showed you so we have a simple column that contains a title a divider and also the text we actually want to share but something is missing here and that is how we can enable our text to be shared with other apps that have code implemented to receive Rich content with jetpack comp pulse 1.6.0 it's quite easy to do that we can simply use a modifier and here we can say drag and drop source with this modifier we can say this composable it doesn't need to be a text composable should be draggable and we can do that by saying we want to start sharing when the user long presses our text for that we can say detect gures and here we can um overwrite some stuff but because we want to trigger it on long press we also use the long press here and if the user now long presses the text composable this call back here will trigger and then we can simply say start transfer and as you can see we now need to input a drag and drop transfer data now let's quickly um create a small extension function on string and we say to drag and drop data and now we can um instantiate uh drag drop transfer data and now we need to provide a clip data you might already know it from other parts of Android so when you for example copy text um it also gets saved in the clipboard so let's say clip data clip data um new plain text because we have a plain text we want to share and then we say as label um yeah share text and the text you want to share is in this case this because we are at the extension function on the string and as last part we want to say um for Flags view drag flag Global and by that flag we can enable um dragging our content across Windows boundaries however be aware that if you want to share images for example and need to share a Yuri then you need to use other Flex so if we quickly go into the flex here you can see that we also have um drag flag Global U read for example that will allow other apps to read content from the sharing app so now let's use this extension function and we say to Dragon drop data and for the sharing part that's already it so here in the content receive app we are in the receive content screen and here you can see this UI looks pretty similar to the previous example and that's because it's um almost the same we have a title we have a divider and also a text composable what's different here is that we also have a view model which pass down some text and this text should be set dynamically by the content we receive from other apps so how we do that um once again with a simple modifier and this modifier is this time not called drag and drop sauce but drag and drop Target and as you can see we have two input parameters one is should start drag and drop and the other the target parameter let's implement the first one this function here now determines if we should start the drag and drop process but how should we evaluate that we should always think about what kind of content we want to support in this case we only want to support text content and that's why we will check for the um drag and drop event and we will need to see if there is any kind of text content included if so we want to start the drag and drop process so let's see we have our um start event here and now we can say at the start event MIM types and these M types can be yeah for example text or image video audio such things and as I said we want to check if any of those contents here or M types is equal um to the text mind type if that is the case we want to start the drag and drop process so it's still underlined in red and that is because we are missing the target parameter and for the Target parameter we want to implement a simple interface and that is of the type drag and drop Target so let's say Target equals object drag and drop Target so now it's also on right red because we need to implement the on drop event if we go onto the drag and drop Target we can see that there are also other events but let's go to that in a second first we implement the on uh drop event here this event will be triggered when the user long clicks on our sharing app starts the process and then um release his finger and the content will be shared with o app so in this case we need to think about what we want to do with the Shar content in this case we want to update our text um parameter here so let's pass it up the tree to the view model let's say here um on drag and drop event received and the um parameter here is of course the drag and drop event and now we can say here view model update text by clip data because the event um contains all text in the clip data we earlier saw in the other app and all of you model doesn't need the whole direct and drop event solely the clip data so we can see say here um to Android direct events and then we can access the clip data by the way also other stuff like um X and Y coordinates of the event so where occurred on the screen and also action clip description and so on but in this case we only are interested in the clip data now let's create the member function inside the receive content view model let's put the function down here so we saw that our sharing app shares only one text to our receiving app however maybe other apps share multiple content to our app for that case we want to sum up all the text received from the clip data and then update our received content State here and now we can sum up the text saying um shared text of the type string and in parentheses let's say zero until um clip data and now we can simply say item count so we have the the range here from zero until the item count and that allows us to say map now we have here the index can access the current um clip data item by saying here get item at we pass in the index and then we receive the respective item at the position and of course a text can also be blank but we don't want that and that's why we also introduce a filter here and we say item and as you can see we can already access the text here as a shot sequence and we say um filter is not blank finally we want to sum up the text and that is quite easy by saying here join to string and we also want to um separate each item we received using a separator so let's say um back sln for line break and finally let's once again check if share text is not blank then we want to update our State here so let's say here current copy and the text is of course contained in a variable saying text so we updated with a our share text and by that we receive a clip data object here intergrate over the items sum up the strings by a separator and update our UI State now let's go back to the receive content screen now that we have our function here in place let's also call it here from the on drop and we just need to pass in the event and as a result we always say um return true of course you could also directly implement the logic for denying the content if it's blank for example but for the simple case let's stick to that but there's one small problem how should a user know now that he can drag some content to our app because there's no visible indicator for that if you quickly recall the example I showed you at the beginning of the video we had a small rectangle that displays if the user starts dragging content from the sharing app but before we proceed with the drag and drop in let's correct two minor mistakes I accidentally made so first we want to check here starts with and the mind type for text um is actually with the slash at the end and the second one is in the receive content view model because I missed that I didn't call here the text parameter directly so um now we can um yeah use the text here and check for if it's not blank because previously we would concatenate the um item to string but that's not what we want we want to have the um text content so sorry for that but now we can proceed with the show Dragon drop hint so let's go back to the receive content screen and we were just here with the show drag and drop hint and now if it's true we of course want to show a drag and drop hand and if it's true we of course want to show something to the user so in this case let's simply show a rounded rectangle so we say if show Dron drant is true and we can use a simple um spacer and we say F Max width the height should be for example 2 DP and then we just use a border modifier and we can say here 2dp for the width and then for the color we say material theme of course only if you have it in your project color scheme primary and then for the shape we can simply say round counter shape with um 16 DP and now we can finally try our mentation out so let's start the content receive app as well as the content share app now here in the emulator let's enable The multi- Window mode we say a split screen select our um other app and now I can long click on the text the sharing starts and I drag the content to the other app release and as you can see we we updated our state and the text is showing in the drop VI content down below section and that is how you can easily Implement content sharing using Dr and drop using jetpack compost of course this whole concept only works if many apps Implement such um content receiver so maybe you could think of um where are some use cases in your specific app where you could allow sharing content or also receiving content from other apps as I already mentioned this is not restricted to only text but also to images audio and so on or I think based on a simple example you're also able to implement other cases do you already have some use cases in your mind where you could use such drag and drop sharing in your own app or do you think that's completely um unnecessary let me know in the comments as always I hope you had some takeaways like the video subscribe to my YouTube channel activate the notification Bell and I hope to see you soon

Channel: Yanneck Reiß

Views: 805

Keywords: Android Jetpack Compose, Jetpack Compose Lifecycle, Android App Lifecycle, Handle Lifecycle Events, Lifecycle Runtime Compose, Android Development Lifecycle, Jetpack Compose Tutorial, Android Lifecycle Events, onResume and onPause Android, Tracking App Activity Jetpack Compose

Id: tyTExcgHWSk

Length: 14min 34sec (874 seconds)

Published: Sun Mar 24 2024