Android Arsenal: Drag and Drop Feature in Android 3.0

Overview

QuickView (Highlighting Features)

Allow users to move data within your Activity layout using graphical gestures.
Supports operations besides data movement.
Only works within a single application.
Requires API 11.

A drag and drop operation starts when the user makes some gesture that you recognize as a signal to start dragging data. In response, your application tells the system that the drag is starting. The system calls back to your application to get a representation of the data being dragged. As the user's finger moves this representation (a "drag shadow") over the current layout, the system sends drag events to the drag event listener objects and drag event callback methods associated with the

View

objects in the layout. Once the user releases the drag shadow, the system ends the drag operation.

You create a drag event listener object ("listeners") from a class that implements View.OnDragListener. You set the drag event listener object for a View with the View object'ssetOnDragListener()

method. Each View object also has aonDragEvent()

callback method.

When you start a drag, you include both the data you are moving and metadata describing this data as part of the call to the system. During the drag, the system sends drag events to the drag event listeners or callback methods of each View in the layout. The listeners or callback methods can use the metadata to decide if they want to accept the data when it is dropped.

The Drag/Drop process

There are basically four steps or states in the drag and drop process:

Started

In response to the user's gesture to begin a drag, your application calls startDrag() to tell the system to start a drag. The arguments startDrag() provide the data to be dragged, metadata for this data, and a callback for drawing the drag shadow.The system first responds by calling back to your application to get a drag shadow. It then displays the drag shadow on the device.

Next, the system sends a drag event with action type ACTION_DRAG_STARTED to the drag event listeners for all the View objects in the current layout. To continue to receive drag events, including a possible drop event, a drag event listener must return true. This registers the listener with the system. Only registered listeners continue to receive drag events. At this point, listeners can also change the appearance of their View object to show that the listener can accept a drop event.

Continuing

The user continues the drag. As the drag shadow intersects the bounding box of a View object, the system sends one or more drag events to the View object's drag event listener (if it is registered to receive events). The listener may choose to alter its View object's appearance in response to the event. For example, if the event indicates that the drag shadow has entered the bounding box of the View (action type ACTION_DRAG_ENTERED), the listener can react by highlighting its View.

Dropped

The user releases the drag shadow within the bounding box of a View that can accept the data. The system sends the View object's listener a drag event with action type ACTION_DROP. The drag event contains the data that was passed to the system in the call to startDrag() that started the operation. The listener is expected to return boolean true to the system if code for accepting the drop succeeds.

Note: This step only occurs if the user drops the drag shadow within the bounding box of a View whose listener is registered to receive drag events. If the user releases the drag shadow in any other situation, noACTION_DROP drag event is sent.

Ended

After the user releases the drag shadow, and after the system sends out (if necessary) a drag event with action type ACTION_DROP, the system sends out a drag event with action type ACTION_DRAG_ENDEDto indicate that the drag operation is over. This is done regardless of where the user released the drag shadow. The event is sent to every listener that is registered to receive drag events, even if the listener received the ACTION_DROP event.

Technical Points:
While the view is getting dragged on screen, system generates DragEvents which can be intercepted by application by setting View.setOnDragListener().

OnDragListener interface has callback method

public
boolean onDrag(View view, DragEvent dragEvent)

which will get called whenever any view is dragged or dropped.The DragEvent parameter provides getAction() which tells the application which type of action has occurred.

Following types of action can be identified.

DragEvent.ACTION_DRAG_STARTED – Drag event has started.
DragEvent.ACTION_DRAG_ENTERED – Drag has brought the drop shadow in view bounds.
DragEvent.ACTION_DRAG_EXITED – Drag has taken the drop shadow out of view bounds.
DragEvent.ACTION_DRAG_LOCATION – Drag is happening and drop shadow is inside view bounds.
DragEvent.ACTION_DROP – Drop has happened inside view bounds.
DragEvent.ACTION_DRAG_ENDED – Drop has happened outside view bounds.

Create and Design the App

Create a new Android project in Eclipse. Enter the application settings of your choice, being sure to create a blank Activity and layout for it.First of all create a layout file for the activity as below:

activity_drag_drop.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical"  
   android:padding="10dp"  
   android:paddingLeft="50dp"  
   android:paddingRight="50dp" >  
   <TextView  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:gravity="center"  
     android:paddingBottom="10dp"  
     android:text="Place these foods in your order of preference." />  
   <TextView  
     android:id="@+id/option_1"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="5dp"  
     android:background="@drawable/option"  
     android:gravity="center"  
     android:text="Apple"  
     android:textStyle="bold" />  
   <TextView  
     android:id="@+id/option_2"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="5dp"  
     android:background="@drawable/option"  
     android:gravity="center"  
     android:text="Cake"  
     android:textStyle="bold" />  
   <TextView  
     android:id="@+id/option_3"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="5dp"  
     android:background="@drawable/option"  
     android:gravity="center"  
     android:text="Orange"  
     android:textStyle="bold" />  
   <TextView  
     android:id="@+id/choice_1"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="5dp"  
     android:background="@drawable/choice"  
     android:gravity="center"  
     android:text="Most Favourite" />  
   <TextView  
     android:id="@+id/choice_2"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="5dp"  
     android:background="@drawable/choice"  
     android:gravity="center"  
     android:text="---" />  
   <TextView  
     android:id="@+id/choice_3"  
     android:layout_width="fill_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="5dp"  
     android:background="@drawable/choice"  
     android:gravity="center"  
     android:text="Not Favourite" />  
 </LinearLayout>

Below are the xml's of choice & options which are used to set in TextView. Put it in “res/drawables” folder

option.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <shape xmlns:android="http://schemas.android.com/apk/res/android"  
   android:dither="true" >  
   <solid android:color="#ff00ccff" />  
   <corners android:radius="2dp" />  
   <stroke  
     android:width="2dp"  
     android:color="#ff0099cc" />  
   <padding  
     android:bottom="5dp"  
     android:left="10dp"  
     android:right="10dp"  
     android:top="5dp" />  
 </shape>

choice.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <shape xmlns:android="http://schemas.android.com/apk/res/android"  
 android:dither="true" >  
    <solid android:color="#ffffff99" />  
    <corners android:radius="2dp" />  
    <stroke  
      android:dashGap="4dp"  
      android:dashWidth="2dp"  
      android:width="2dp"  
      android:color="#ffffff00" />  
   <padding  
     android:bottom="5dp"  
     android:left="5dp"  
     android:right="5dp"  
     android:top="5dp" />  
 </shape>

Here is the activity code DragDropActivity.java

 import android.os.Bundle;  
 import android.app.Activity;  
 import android.content.ClipData;  
 import android.graphics.Typeface;  
 import android.view.DragEvent;  
 import android.view.MotionEvent;  
 import android.view.View;  
 import android.view.View.DragShadowBuilder;  
 import android.view.View.OnDragListener;  
 import android.view.View.OnTouchListener;  
 import android.widget.TextView;  
 public class DragDropActivity extends Activity {  
  //text views being dragged and dropped onto  
  private TextView option1, option2, option3, choice1, choice2, choice3;  
  @Override  
  protected void onCreate(Bundle savedInstanceState) {  
  super.onCreate(savedInstanceState);  
  setContentView(R.layout.activity_drag_drop);  
  //get both sets of text views  
  //views to drag  
  option1 = (TextView)findViewById(R.id.option_1);  
  option2 = (TextView)findViewById(R.id.option_2);  
  option3 = (TextView)findViewById(R.id.option_3);  
  //views to drop onto  
  choice1 = (TextView)findViewById(R.id.choice_1);  
  choice2 = (TextView)findViewById(R.id.choice_2);  
  choice3 = (TextView)findViewById(R.id.choice_3);  
  //set touch listeners  
  option1.setOnTouchListener(new ChoiceTouchListener());  
  option2.setOnTouchListener(new ChoiceTouchListener());  
  option3.setOnTouchListener(new ChoiceTouchListener());  
  //set drag listeners  
  choice1.setOnDragListener(new ChoiceDragListener());  
  choice2.setOnDragListener(new ChoiceDragListener());  
  choice3.setOnDragListener(new ChoiceDragListener());  
  }  
  /**  
  * ChoiceTouchListener will handle touch events on draggable views  
  *  
  */  
  private final class ChoiceTouchListener implements OnTouchListener {  
  public boolean onTouch(View view, MotionEvent motionEvent) {  
   if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {  
   /*  
    * Drag details: we only need default behavior  
    * - clip data could be set to pass data as part of drag  
    * - shadow can be tailored  
    */  
   ClipData data = ClipData.newPlainText("", "");  
   DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);  
   //start dragging the item touched  
   view.startDrag(data, shadowBuilder, view, 0);  
   return true;  
   } else {  
   return false;  
   }  
  }  
  }   
  /**  
  * DragListener will handle dragged views being dropped on the drop area  
  * - only the drop action will have processing added to it as we are not  
  * - amending the default behavior for other parts of the drag process  
  *  
  */  
  private class ChoiceDragListener implements OnDragListener {  
  @Override  
  public boolean onDrag(View v, DragEvent event) {  
   switch (event.getAction()) {  
   case DragEvent.ACTION_DRAG_STARTED:  
   //no action necessary  
   break;  
   case DragEvent.ACTION_DRAG_ENTERED:  
   //no action necessary  
   break;  
   case DragEvent.ACTION_DRAG_EXITED:      
   //no action necessary  
   break;  
   case DragEvent.ACTION_DROP:  
   //handle the dragged view being dropped over a drop view  
   View view = (View) event.getLocalState();  
   //stop displaying the view where it was before it was dragged  
   view.setVisibility(View.INVISIBLE);  
   //view dragged item is being dropped on  
   TextView dropTarget = (TextView) v;  
   //view being dragged and dropped  
   TextView dropped = (TextView) view;  
   //update the text in the target view to reflect the data being dropped  
   dropTarget.setText(dropped.getText());  
   //make it bold to highlight the fact that an item has been dropped  
   dropTarget.setTypeface(Typeface.DEFAULT_BOLD);  
   //if an item has already been dropped here, there will be a tag  
   Object tag = dropTarget.getTag();  
   //if there is already an item here, set it back visible in its original place  
   if(tag!=null)  
   {  
    //the tag is the view id already dropped here  
    int existingID = (Integer)tag;  
    //set the original view visible again  
    findViewById(existingID).setVisibility(View.VISIBLE);  
   }  
   //set the tag in the target view being dropped on - to the ID of the view being dropped  
   dropTarget.setTag(dropped.getId());  
   break;  
   case DragEvent.ACTION_DRAG_ENDED:  
   //no action necessary  
   break;  
   default:  
   break;  
   }  
   return true;  
  }  
  }   
 }

Output: