\n On dual-screen and foldable devices, one of the advantages of running multiple apps across screens is to share information between apps easily. To achieve this, drag and drop is definitely a feature that developers should think about bringing into their application. \n<\/p>\n
Overview<\/h2>\n
\n The DragAndDrop<\/a> library provides a drag container which represents the draggable area with long press gesture. The drag target wraps the drag data with a shadow during the dragging process. A drop container includes a dropping area to handle the detected drag data. Currently it supports image and text MIME types. \n<\/p>\n Follow these steps to add the drag and drop library to your project:<\/p>\n \nFor more detailed instructions and API reference information, please refer to the DragAndDrop README<\/a>.\n<\/p>\n \n To see some examples of how to use this library, you can check out a few different samples, such as DragAndDrop sample<\/a> in our Compose sample<\/a> repo.\n<\/p>\n \n In the SDK repo, we created a small sample<\/a> to showcase how to build the drag and drop feature using our library in only four steps as outlined above. \n<\/p>\n \n Before building the drag and drop feature, we need to decide where and how big the drag and drop area is. It could be part of your application, or the whole display area of the app. In this sample, we define the whole display area as the draggable area by using \n For the drag part, firstly it is the \n The third step is to create \n Then for the drop part, we will handle the drop event and save the sharing content. The \n We change the background color of the drop box based on the dragging event. The drop box is white by default. Once the dragging event starts, the drop box would change to light purple color to tell the user where to go. When the drag gesture enters the bounds of the drop box, the \u201cboxColor<\/strong>” would change again to dark purple. This lets the user know where they can drop the content to save it. Then the application can handle the content based on the \u201cdragData<\/strong>\u201d, to either update the UI or save the content.\n<\/p>\n \n Our sample works in both the single-screen mode and dual-screen mode inside one application. But you can also build the drag and drop feature across two applications.\n<\/p>\n \n \n \n Check out the Surface Duo Jetpack Compose developer documentation<\/a> and past blog posts<\/a> for links and details on all our samples. You can find our Jetpack Compose samples<\/a> on GitHub.\n<\/p>\n \n If you have any questions, or would like to tell us about your apps, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\nDrag and drop process<\/h3>\n
\n
DragContainer<\/code> to define a draggable area where the drag and drop happens.<\/p>\n@Composable\r\nfun DragContainer(\r\n modifier: Modifier = Modifier,\r\n content: @Composable BoxScope.() -> Unit\r\n)<\/pre>\n<\/li>\n
DragData<\/code> to represent the data to share with the metadata, including MimeType<\/code>.<\/p>\nclass DragData(\r\n val type: MimeType = MimeType.TEXT_PLAIN<\/em>,\r\n val data: Any? = null\r\n)\r\n\r\nenum class MimeType(val value: String) {\r\n IMAGE_JPEG(\"image\/jpeg\"),\r\n TEXT_PLAIN(\"text\/plain\"),\r\n UNKNOWN_TYPE(\"unknown\")\r\n}<\/pre>\n<\/li>\nDragTarget<\/code> with the created DragData<\/code> and the Composable which would respond to the user’s drag gesture by long pressing. A shadow will be created for the target during the dragging process.<\/p>\n@Composable\r\nfun DragTarget(\r\n dragData: DragData,\r\n content: @Composable (() -> Unit)\r\n)<\/pre>\n<\/li>\n
DropContainer<\/code>. The lambda onDrag<\/code> will let you know whether the dragging gesture goes within the dropping area and the gesture finishes.<\/p>\n@Composable\r\nfun DropContainer(\r\n modifier: Modifier,\r\n onDrag: (inBounds: Boolean, isDragging: Boolean) -> Unit,\r\n content: @Composable (BoxScope.(data: DragData?) -> Unit)\r\n)<\/pre>\n<\/li>\n<\/ol>\n
Get started<\/h2>\n
\n
mavenCentral()<\/code> repository in your top level build.gradle<\/strong> file:<\/p>\nallprojects {\r\n repositories {\r\n google()\r\n mavenCentral()\r\n }\r\n}<\/pre>\n<\/li>\nImplementation \"com.microsoft.device.dualscreen:draganddrop:1.0.0-alpha01\"<\/pre>\n<\/li>\n
compileSdkVersion<\/code> and targetSdkVersion<\/code> are set to API 31 or newer in the module-level build.gradle<\/strong> file.<\/p>\nandroid {\r\n defaultConfig {\r\n targetSdkVersion 31\r\n }\r\n...\r\n}<\/pre>\n<\/li>\n<\/ol>\nExample usage<\/h2>\n
DragContainer<\/code> mentioned in the first step of the building process. \n<\/p>\nDragData\n<\/code>, which represents the data the application allows sharing via the drag and drop feature. With our component, currently the app can share both text and image content using MimeType<\/code>. In our sample, we create one text DragData<\/code> and one image DragData<\/code>, which is the second step.\n<\/p>\nDragTarget<\/code>, which is the Composable<\/code> the user can drag and move around by long pressing gesture. It could be any kind of Composable<\/code>, a Box,<\/a> a Column<\/a>, Text<\/a>, or an Image<\/a>. During the drag and drop, the component will create a shadow of the DragTarget<\/code> composable. In our sample, the text box \u201cDrag me\u201d is the DragTarget<\/code>, which is a box with text inside. And the text is the DragData<\/code>. The shadow is for the whole text box, but only the text is the content we are sharing.\n<\/p>\nDropContainer<\/code> provides a lambda onDrag<\/code> to return whether the dragging gesture goes within the dropping area and the dragging gesture finishes. You could update your UI to tell the user where or when to drop the content. In the sample, we define four states and two lambdas to update UI to handle both text and image sharing at the same time. \n<\/p>\nvar dragText by remember { mutableStateOf<String?>(null) }\r\nvar dragImage by remember { mutableStateOf<Painter?>(null) }\r\nval updateDragText: (String?) -> Unit = { newValue -> dragText = newValue }\r\nval updateDragImage: (Painter?) -> Unit = { newValue -> dragImage = newValue }\r\nvar isDroppingItem by remember { mutableStateOf(false) }\r\nvar isItemInBounds by remember { mutableStateOf(false) }<\/pre>\nDropContainer(\r\n modifier = modifier,\r\n onDrag = { inBounds, isDragging ->\r\n isDroppingItem = isDragging\r\n isItemInBounds = inBounds\r\n },\r\n) { dragData ->\r\n val boxColor = if (isDroppingItem && isItemInBounds) Purple200 else if (isDroppingItem) Purple100 else Color.White\r\n...\r\n dragData?.let {\r\n if (!isDroppingItem) {\r\n if (dragData.type == MimeType.TEXT_PLAIN) {\r\n dragText = dragData.data as String\r\n }\r\n if (dragData.type == MimeType.IMAGE_JPEG) {\r\n dragImage = dragData.data as Painter\r\n }\r\n }\r\n }\r\n...\r\n }\r\n}<\/pre>\n![\"Animation](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/07\/word-image-2651-2.gif\")
<\/br>Figure 1. Animation showing drag and drop in single-screen mode<\/em>\n<\/p>\n![\"Animation](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/07\/word-image-2651-3.gif\")
Resources and feedback<\/strong><\/h2>\n