Android on Chrome OS — Implementing Drag & Drop

Adding Drag & Drop functionality to your Android app

Although Drag and Drop has been available for Android since Honeycomb 3.0, the growing number of large screen Android devices (tablets, foldables and Chrome OS) makes this feature more useful and important to implement.

This post will show you how to implement drag and drop by creating a drop target that can receive files from the Chrome OS file manager. It also demonstrates setting up a TextView as a draggable item.

The source code for a complete example can be found here.

Please note: All code found here is licensed under the Apache 2.0 license and is not part of any official Google product.

Updated on 21 Oct 2021: removed special Chrome OS MIME type that is no longer needed and converted code snippets to Kotlin.

Notes for Chrome OS, tablets, foldables, and large screens

• You must request permission via requestDragAndDropPermissions to access items dragged in from outside an app
• Your draggable items must have the flag View.DRAG_FLAG_GLOBAL in order to be dragged out to other applications

Setting up the Drop Target

Let’s set up the Drop side of things first. Android uses DragListeners to set up targets to respond to drag events. The listener tells the system what kind of items it can receive, provides visual feedback, and processes successful drops.

onDrag()

First create an empty OnDragListener:

onDrag is called whenever any drag event occurs in Android. For example, if a user starts dragging a file from the file manager, this is where you tell your UI to respond visually and indicate that it can receive the file. onDrag also defines what happens when the item is hovering over the target and when it is actually dropped.

Check out the official docs for a full description of the different Drag Events, the short version is:

• ACTION_DRAG_STARTED is triggered when any item is dragged. Your target should filter for valid items it can receive and provide a visual indication that it is a ready target.
• ACTION_DRAG_ENTERED and ACTION_DRAG_EXITED are triggered when an item is being dragged and enters/exits the target zone. Provide visual feedback to let the user know they are hovering over a drop zone.
• ACTION_DROP is triggered when the item is actually dropped. Process the item here.
• ACTION_DRAG_ENDED is triggered when the drop is either dropped successfully or cancelled. Return the UI to its normal state.

Now let’s flesh out each of the onDrag action cases.

ACTION_DRAG_STARTED

This event is triggered whenever any drag is started. We need to indicate whether we can receive this particular item (return true) or not (return false) and visually let the user know if we can. The drag event will contain a ClipDescription that contains information about the item being dragged.

In ACTION_DRAG_STARTED we examine the MIME type of the item to decide if this target can receive it. In this example, we allow for plain text and PNG images and indicate that the target is a valid one by tinting the background dark green.

Note: in the past, files dragged in from the Chrome OS file manager would have the application/x-arc-uri-list MIME type, this is no longer true. Just use standard MIME types as on other Android devices.

ENTERED, EXITED, and ENDED

This is where the visual/haptic feedback logic goes. In this example, we lighten the green background when the item is hovering over the target zone to indicate the user can successfully drop it. In ENDED, you want to reset the UI to its normal non-drag and drop state.

ACTION_DROP

This is the event that occurs when the item is actually dropped on the target. File items will need to be accessed using ContentResolver.

NB: To receive items from other applications/windows you must request DragAndDropPermissions. This is particularly important for Android large screen phones, tablets, foldables, and Chrome OS devices.

Target Zone

Now that we have a listener, we need to attach it to the view that we want to receive drag events:

Test it out

Now you should have a working Drop Target — test it out before moving onto the Drag Item portion of this post. Drag a text file or PNG file over to your app from the Files manager, you should see the expected visual indications and be able to drop the item onto the target zone.

Setting up a Drag Item

A drag process is usually triggered by a long-press. To indicate an item can be dragged, add an LongClickListener that provides the system with the data to be transferred and indicate what type of data it is. Here is where you also set up the appearance of the item while it is being dragged.

For this example, we have a plain text item that can be dragged out of a TextView. The content is set to be the text content of the TextView and the MIME type is set to ClipDescription.MIMETYPE_TEXT_PLAIN. Note: you can also create a plain text drag item using newPlainText but the way we do it here is more transparent and more easily extensible to other data types.

For the visual aspect of the dragged text, use the built-in DragShadowBuilder for a standard translucent drag look. Check out Starting a Drag in the documentation for a more complex example.

Lastly, when the actual drag is initiated, set the DRAG_FLAG_GLOBAL flag to signify that this item can be dragged into other applications.

Put these together and you have a working Drag and Drop application on Chrome OS!

Grab the complete source for a demo app here on GitHub.

All code found here is licensed under the Apache 2.0 license. Nothing here is part of any official Google product.