Posted on August 6, 2015
Adding Drag and Drop to your Android application with Xamarin
Since touchscreens have conquered our everyday life, drag and drop functionality accompanies us on our way through the digital world. The simplicity of this intuitive design pattern is responsible for its success story. This is why you should enhance you applications by implementing it. And this is easier than you might have thought.
Drag and Drop is part of the Android API since Honeycomb and any
View element can be dragged, dropped or work as a drop zone for others. To do so, no additional UI work is needed, you just attach the right events and fire the right methods in your code and you are done. But let’ start at the beginning.
The UI Layout
For the demo you can see on the right I have just created two buttons that can be dragged and dropped to the gray drop zone at the top of the page. As mentioned above, every
View element can be dragged or work as a drop zone so that the UI plays no special part in it and I won’t go into it. If you need more detailed information about the shown layout, please check the Sample Code.
Two steps in your code bring you closer to the Drag and Drop implementation: Enabling elements to be dragged and dropped and defining drop zones. We will begin with the former.
First you need to choose an event on which the dragging should start. In my demo this is a long click on one of the buttons. Inside this event you can start the dragging procedure by simply calling the
StartDrag() method on your element. It accepts a
ClipData element, a
DragShadowBuilder instance, a local state and a status flag as parameters, so let’s take a short look at them. While we can forget the last two for the moment, the
DragShadowBuilder might be important for us.
ClipData is the only way to provide additional information to the dragged element. When the user drops it later, we can not identify which element got dropped. The only thing we can access is the attached data. So it might be clever to add some kind of identifier here.
DragShadowBuilder is responsible for generating the drag shadow for the current element. By default this is a half translucent copy which should be good enough for most usecases. If you need something else, you can define your own one. You can find further information about that here.
void Button1_LongClick (object sender, View.LongClickEventArgs e)
// Generate clip data package to attach it to the drag
var data = ClipData.NewPlainText("name", "Element 1");
// Start dragging and pass data
((sender) as Button).StartDrag(data, new View.DragShadowBuilder(((sender) as Button)), null, 0);
To define a drop zone, you simply need to listen to the drop zone’s
Drag event by adding an according event handler to it. Here you can differ between the Drag and Drop actions that can occur:
DragAction.Started mark the begin and end of the dragging process and just need to be marked as handled.
DragAction.Exited actions occur whenever a dragged element enters or exits the drop zone. We could do some fancy UI stuff here like showing a drop hint. The one that is clearly most important for us is the
DragAction.Drop action. Here we can decide whether to accept the drop and try to get the attached
ClipData to do some further actions with it.
void Button_Drag (object sender, View.DragEventArgs e)
// React on different dragging events
var evt = e.Event;
e.Handled = true;
// Dragged element enters the drop zone
result.Text = "Drop it like it's hot!";
// Dragged element exits the drop zone
result.Text = "Drop something here!";
// Dragged element has been dropped at the drop zone
// You can check if element may be dropped here
// If not do not set e.Handled to true
e.Handled = true;
// Try to get clip data
var data = e.Event.ClipData;
if (data != null)
result.Text = data.GetItemAt(0).Text + " has been dropped.";
It is really fast and super easy to implement a basic Drag and Drop functionality in your Android application which provides a nice way to enhance your user experience where it makes sense. The latter is very important – not only if you want to add Drag and Drop but whenever you plan to add new UI functionality to you application: Make sure that it makes sense at the place where you want to add it and that it brings a benefit to your users.
If you are sure about this, you can implement it a very clean and simple way without much code overhead. And that is all we wanted, isn’t it?
For a working demo feel free to take a look at our Sample Code.