Android Drag and Drop

This Android tutorial is to help you learn about how to use drag and drop feature in an Android application. Drag and drop feature is a way of interacting with UI for long with computers. Now in the Mobile and touch screen revolution, drag and drop is becoming an important UI gesture. Lots of games are using drag and drop as a primary way of playing the game. Angry birds is one such popular game which uses drag and drop as its primary game control.

Just a history snippet about drag and drop. In Windows OS 2.0 version, the drag and drop gesture was first introduced in a shareware program (WinTools) by Jeffrey Greenberg.

Drag and Drop Android API

In this tutorial, we shall learn about the Android APIs behind drag and drop, and how to use it by creating a sample Android application. OnTouchListener and OnDragListener are the key interfaces that needs to be implemented for drag and drop. These are callback interfaces and it has methods such as onLongPress and onTouch which will be triggered by Android when user does a drag and drop. Essentially with a drag and drop, we use it to move an Android View from one UI point to another.

Steps for Drag and Drop Implementation

1. Design Layout: Design and Android layout that contains two or more bounding spaces and the view to be dragged.
2. Create Activity: Create activity which implements required Android listener interfaces.
3. Define Callbacks: Define the drag and drop call back functions onTouch() and onDrag().

Step 1. Design Android Layout

• Need to create two or more bounding spaces.
• Create Android views to be dragged between available bounding spaces.

The bounding space is nothing but any view like Linear layout, Relative layout, listview or like such views, which will contain the view for drag and drop. When the user touches this view, the drag event will be triggered.

Step 2. Create Android Activity

An Android activity class should be created and let it to implement the required drag and drop listener classes. These interfaces contains the drag and drop call back functions that will be called by the runtime when the event occurs.

Step 3. Define Drag and Drop Callbacks

OnTouchListener and OnDragListener are the two interfaces that needs to be implemented for drag and drop callback. These two Android interfaces contain one method each, respectively onTouch and onDrag. We can even use OnLongClickListener, if so then the respective method to be implemented is onLongClick. For onTouch event, MotionEvent object and the View object should be sent as arguments. For onDrag event the DragEvent object and View object should be passed.

onTouch() Drag and Drop Callback

When the user presses the View to be dragged, the methods onTouch() and onLongClick() will be invoked by the Android runtime. We should have our application logic inside the method and that will executed on drag callback.

How do we pass meta data onDrag?

Clip data should be created and it should have data to be dragged and clip description. This clip data can be accessed on leaving the drag control using getClipData(). This clip data is optional. If the use case requires to pass information, then this can be used. If created, the data will be sent via the startDrag() method. On invoking the startDrag(), the application will intimate the system about the start of the drag.

How do we show drag shadow?

Before calling startDrag a shadowBuilder object should be created. Pass the view instance to View.DragShadowBuilder(view) to show drag shadow.

onDrag() Drag and Drop Callback

After the start of the drag is intimated to Android runtime, immediately it will allow the DragEventListener to handle the drag event using the onDrag() method. It holds two arguments as View and DragEvent object. On handling the drag event there are several possible actions. That action is returned by the method getAction(). Those actions have different states and they are listed as follows.

• ACTION_DRAG_STARTED – This action will be returned after the startDrag method is invoked.
• ACTION_DRAG_ENTERED – Whenever the Android View to be dragged enters into a new bounding space, this action will be returned.
• ACTION_DRAG_LOCATION – This will be returned for each touch point during the drag. It holds the x,y coordinates of the drag position.
• ACTION_DRAG_EXITED – Once the dragged view leave some bounding space or layout, then this action will be returned.
• ACTION_DROP – Once the finger release the hold from drag, then this is returned.
• ACTION_DRAG_ENDED – This action is the end of the Android drag and drop cycle.

Android Drag and Drop Example

Download Android Sample Project Code for Drag and Drop

In this example Android application, I will demonstrate the drag and drop gesture by moving a TextView from one LinearLayout to another.

Our Android activity has Two LinearLayout Views which are identified as pinkLayout and yellowLayout. Then a TextView to be created with the pinkLayout.

activity_main.xml

 
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/center"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/pinkLayout"
        android:layout_width="fill_parent"
        android:layout_height="210dp"
        android:background="#FF8989"
        android:orientation="vertical" >
        
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/dragtext" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/yellowLayout"
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        android:layout_marginTop="210dp"
        android:background="#FFCC00"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

This view will be used to set the listeners OnTouchListener and OnDragListener which will be the Android callback handlers for drag and drop. Set those listeners to the view.

protected void onCreate(Bundle savedInstanceState) { 
	super.onCreate(savedInstanceState); 
	setContentView(R.layout.activity_main); 
	findViewById(R.id.textView1).setOnTouchListener(this); 
	findViewById(R.id.pinkLayout).setOnDragListener(this); 
	findViewById(R.id.yellowLayout).setOnDragListener(this); 
} 

Define, the onTouch(), onDrag(), drag and drop call back methods.

public boolean onTouch(View view, MotionEvent motionEvent) { 
	if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { 
		DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view); 
		view.startDrag(null, shadowBuilder, view, 0); 
		view.setVisibility(View.INVISIBLE); 
		return true; 
	} else { 
		return false; 
	} 
} 

We can use MotionEvent to handle various actions. When the Android system dispatches the event information to the DragListener, then onDrag() method will be invoked. Since there are so many action among entire drag and drop operation, a switch case is created to cover all possible actions. The current action is got by the dragevent.getAction().

case DragEvent.ACTION_DROP: 
	Log.d(LOGCAT, "Dropped"); 
	View view = (View) dragevent.getLocalState(); 
	ViewGroup owner = (ViewGroup) view.getParent(); 
	owner.removeView(view); 
	LinearLayout container = (LinearLayout) layoutview; 
	container.addView(view); 
	view.setVisibility(View.VISIBLE); 
	break;

On drop, the current view state during the drag is retrieved by the getLocalState() method. The initial view position before drop event, is removed from the parent and positioned into required bounding area which is here the LinearLayout.

The entire onDrag() method can be defined as follows.

    public boolean onDrag(View layoutview, DragEvent dragevent) {
	      int action = dragevent.getAction();
	      switch (action) {
	      case DragEvent.ACTION_DRAG_STARTED:
	          Log.d(LOGCAT, "Drag event started");
	    	break;
	      case DragEvent.ACTION_DRAG_ENTERED:
	    	  Log.d(LOGCAT, "Drag event entered into "+layoutview.toString());
	    	break;
	      case DragEvent.ACTION_DRAG_EXITED:
	    	  Log.d(LOGCAT, "Drag event exited from "+layoutview.toString());
	    	break;
	      case DragEvent.ACTION_DROP:
	    	Log.d(LOGCAT, "Dropped");
	    	View view = (View) dragevent.getLocalState();
	        ViewGroup owner = (ViewGroup) view.getParent();
	        owner.removeView(view);
	        LinearLayout container = (LinearLayout) layoutview;
	        container.addView(view);
	        view.setVisibility(View.VISIBLE);
	        break;
	      case DragEvent.ACTION_DRAG_ENDED:
	    		  Log.d(LOGCAT, "Drag ended");
		      break;
	      default:
	        break;
	      }
	      return true;
    }

To continue with the operation of OnDragEventListener, the onDrag() method should return true after each action. Following is the complete drag and drop Android activity class.

package com.javapapers.android.drag_drop;

import android.os.Bundle;
import android.app.Activity;
import android.view.*;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.view.View.DragShadowBuilder;
import android.widget.LinearLayout;
import android.util.Log;
import com.javapapers.android.drag_drop.R;


public class MainActivity extends Activity implements OnTouchListener,OnDragListener{
	private static final String LOGCAT = null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		findViewById(R.id.textView1).setOnTouchListener(this);
		findViewById(R.id.pinkLayout).setOnDragListener(this);
		findViewById(R.id.yellowLayout).setOnDragListener(this);
	}
	public boolean onTouch(View view, MotionEvent motionEvent) { 
		    if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
		      DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
			  view.startDrag(null, shadowBuilder, view, 0);
			  view.setVisibility(View.INVISIBLE);
			  return true;
		    }
		    else {
		    	return false;
		    }
	}  
    public boolean onDrag(View layoutview, DragEvent dragevent) {
	      int action = dragevent.getAction();
	      switch (action) {
	      case DragEvent.ACTION_DRAG_STARTED:
	          Log.d(LOGCAT, "Drag event started");
	    	break;
	      case DragEvent.ACTION_DRAG_ENTERED:
	    	  Log.d(LOGCAT, "Drag event entered into "+layoutview.toString());
	    	break;
	      case DragEvent.ACTION_DRAG_EXITED:
	    	  Log.d(LOGCAT, "Drag event exited from "+layoutview.toString());
	    	break;
	      case DragEvent.ACTION_DROP:
	    	Log.d(LOGCAT, "Dropped");
	    	View view = (View) dragevent.getLocalState();
	        ViewGroup owner = (ViewGroup) view.getParent();
	        owner.removeView(view);
	        LinearLayout container = (LinearLayout) layoutview;
	        container.addView(view);
	        view.setVisibility(View.VISIBLE);
	        break;
	      case DragEvent.ACTION_DRAG_ENDED:
	    		  Log.d(LOGCAT, "Drag ended");
		      break;
	      default:
	        break;
	      }
	      return true;
    }
}

Android Drag and Drop Example App Output

Download Android Sample Project Code for Drag and Drop