![\"a](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/12\/two-devices.png\")
<\/a><\/p>\nThe Surface Duo drag and drop sample has been updated to use the AndroidX drag and drop package<\/a> to show how to add this feature to your apps. This package provides helper methods to simplify drag and drop implementation.\n<\/p>\n \n The Surface Duo SDK samples GitHub repo<\/a> includes a drag-and-drop demo that works both within the sample app as well as dragging to other apps. Here\u2019s a screenshot of the app spanned across both screens \u2013 the image and text can be dragged and dropped into the container targets.\n<\/p>\n \n \n To use the AndroidX drag and drop helpers, add the following to the module\u2019s build.gradle<\/strong> file dependencies:\n<\/p>\n \n More information on AndroidX drag and drop is in the release notes<\/a> and docs<\/a>. Google also provides detailed guidance for implementing drag and drop<\/a> that explains implementations with built-in Android APIs as well as using the AndroidX helper package.\n<\/p>\n \n The simplest element to drag and drop is plain text. The DragStartHelper<\/a> class is attached to a view, and will detect common drag gestures (eg. long click), which helps track the drag on screen (including the shadow)<\/a>.\n<\/p>\n \n The sample implements \n Text content can be passed directly in the drag message so the clip data object that\u2019s created contains the text and the method to accept the dropped data is relatively simple. To receive dragged text, the sample \n The parameters of \n The method body is executed when the drop is completed, and shows how to extract text and assign it to the target text view (you could also take other steps here if required). \n<\/p>\n \n Supporting text drag and drop requires just a few lines of code and is a great first step towards a better multi-tasking user experience. \n<\/p>\n \n Here\u2019s the sample app side-by-side with our TwoNote sample<\/a>, which demonstrates dragging an image across applications while multi-tasking.\n<\/p>\n \n \n The \n The \n Going beyond simple text to images, formatted text, or other complex data types adds polish to your multi-tasking user experience for apps on dual-screen, foldable, and large screens like tablets or desktops.\n<\/p>\n \n Please share your experiences with creating foldable and large screen user experiences for multi-tasking – reach out via the\u00a0feedback forum<\/a>\u00a0or on Twitter\u00a0@surfaceduodev<\/a>.\u00a0 \n<\/p>\n\n<\/p>\nimplementation 'androidx.draganddrop:draganddrop:1.0.0'<\/pre>\n
Drag and drop text<\/h2>\n
DragStartHelper<\/code> for the text view in DragSourceFragment.onViewCreated<\/code>:\n<\/p>\nDragStartHelper(binding.dragTextView) { sourceView, _ ->\r\n val text = (sourceView as TextView).text\r\n val dragClipData = ClipData.newPlainText(ClipDescription.MIMETYPE_TEXT_PLAIN, text)\r\n val dragShadowBuilder = View.DragShadowBuilder(sourceView)\r\n sourceView.startDragAndDrop(dragClipData, dragShadowBuilder, null, DRAG_FLAG_GLOBAL)\r\n}.attach()<\/pre>\nDropHelper<\/a><\/code> is implemented in DropTargetFragment.onViewCreated<\/code>:\n<\/p>\nDropHelper.configureView(\r\n requireActivity(),\r\n targetText,\r\n arrayOf(\r\n ClipDescription.MIMETYPE_TEXT_PLAIN,\r\n MIME_TYPE_EXTERNAL\r\n ),\r\n DropHelper.Options.Builder()\r\n .setHighlightColor(requireContext().getColor(R.color.gray))\r\n .setHighlightCornerRadiusPx(0)\r\n .build()\r\n) { _, payload ->\r\n val item = payload.clip.getItemAt(0)\r\n val remaining = payload.partition { it == item }.second\r\n if (payload.clip.description.hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {\r\n targetTextView.text = item.text \/\/ could also be a URI, see the full code in the sample\r\n }\r\n remaining\r\n}<\/pre>\nDropHelper.configureView<\/code> perform the following:\n<\/p>\n\n
Drag and drop an image<\/h2>\n
\n<\/p>\nDragStartHelper<\/code> implementation in DragSourceFragment.onViewCreated<\/code> looks similar to the draggable text version above, but unlike text data, binary data like images is not included in the drag and drop message, instead a URI is created which is used by the application where the drop occurs to retrieve the image data. Here\u2019s a summarized version of the code<\/a>:\n<\/p>\n\r\nDragStartHelper(binding.dragImageView) { view, _ ->\r\n \/* code removed from blog for clarity:\r\n * - Ensure file exists provider location\r\n * - Get URI from FileProvider *\/\r\n val dragClipData = ClipData.newUri(requireContext().contentResolver, DRAG_FOLDER_NAME, imageUri)\r\n val dragShadow = View.DragShadowBuilder(view)\r\n view.startDragAndDrop(\r\n dragClipData,\r\n dragShadow,\r\n null,\r\n \/\/ Need to Use the DRAG_FLAG_GLOBAL_URI_READ to allow other apps to read from our\r\n \/\/ content provider. Without it, other apps won't receive the drag events.\r\n DRAG_FLAG_GLOBAL.or(View.DRAG_FLAG_GLOBAL_URI_READ)\r\n )\r\n }.attach()\r\n}<\/pre>\nFileProvider<\/code> has been set up using the <provider><\/code> element in the AndroidManifest.xml<\/strong>, with the file provider path defined in XML matching the path that\u2019s used in the fragment to ensure the image file exists in filesystem. When the image is dropped, a content resolver is used<\/a> to retrieve the image data stream from the URI and process it (save to disk or display on screen).\n<\/p>\nResources and feedback<\/h2>\n