drag and drop in android tutorial

Drag and Drop is one of the best feature provided by the Android Developer API. It can be used to drag data from a view and drop it in another view. In this Tutorial we are going to see how to implement Drag and Drop feature in a Android Application. In this we are going to count the total number of drops and number of successful drops.

Creating Project

Create a new Android Application project in eclipse with package as com.learn2crack.dragdrop. Create the main layout as activity_main and main Activity as MainActivity.

Creating Layout

Our main layout consists of two child Linear Layouts in a parent Linear Layout. It also has a Button Widget in first Linear Layout which can be dragged. The second Linear Layout is the drop area which consists of TextView to display the count.

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity" >
<LinearLayout
    android:id="@+id/bottomlinear"
    android:layout_width="match_parent"
    android:layout_height="400px"
    android:gravity="center"
    android:background="#00ff00"
    android:orientation="vertical" >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/one"
        android:textSize="30sp"
        android:text="Drag Me" />
</LinearLayout>
<LinearLayout
    android:id="@+id/bottomlinear"
    android:layout_width="match_parent"
    android:layout_height="400px"
    android:gravity="center"
    android:background="#00ffff"
    android:orientation="vertical" >
      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/drop"
        android:textSize="30sp"
        android:text="Drop Here" />
       <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Total"
        android:textSize="20sp" />
        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Sucess"
        android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Creating Activity

In this we are going to make the button draggable. To make the button draggable attach a listener to the Object such as OnTouchListener, OnLongClickListener . When the user drags the data a image is displayed and it is called as Drag Shadow. It is initialized using the constructor View.DragShadowBuilder. The dragging is started using startDrag() method which has four parameters.

To create a Drop view we must attach OnDragListener to the view where the data is to be dropped. Various actions which execute during the process are.

ACTION_DRAG_STARTED – Executed after startDrag() is called.
ACTION_DRAG_ENTERED – Executed after the Drag Shadow enters the drop area.
ACTION_DROP – Executed when user drops the data.
ACTION_DRAG_ENDED – Executed when the Drag event is finished.
ACTION_DRAG_LOCATION
ACTION_DRAG_EXITED

In this example we are displaying total counts when user drops the data. And successful drops are shown which are dropped on the registered Listener.

MainActivity.java

package com.learn2crack.dragdrop;
import android.os.Bundle;
import android.app.Activity;
import android.content.ClipData;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends Activity {
Button drag;
LinearLayout drop;
TextView text,sucess;
int total , failure = 0;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
        drag = (Button)findViewById(R.id.one);
        drop = (LinearLayout)findViewById(R.id.bottomlinear);
        text = (TextView)findViewById(R.id.Total);
        sucess = (TextView)findViewById(R.id.Sucess);
        drop.setOnDragListener(new View.OnDragListener() {
      @Override
      public boolean onDrag(View v, DragEvent event) {
        // TODO Auto-generated method stub
      final int action = event.getAction();
            switch(action) {
            case DragEvent.ACTION_DRAG_STARTED:
      break;
            case DragEvent.ACTION_DRAG_EXITED:
              break;
      case DragEvent.ACTION_DRAG_ENTERED:
        break;
      case DragEvent.ACTION_DROP:{
                failure = failure+1;
        return(true);
      }
      case DragEvent.ACTION_DRAG_ENDED:{
        total = total +1;
        int suc = total - failure;
        sucess.setText("Sucessful Drops :"+suc);
                text.setText("Total Drops: "+total);
        return(true);
      }
      default:
            break;
            }
      return true;
      }});
            drag.setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent arg1) {
        // TODO Auto-generated method stub
        ClipData data = ClipData.newPlainText("", "");
        View.DragShadowBuilder shadow = new View.DragShadowBuilder(drag);
        v.startDrag(data, shadow, null, 0);
        return false;
      }
    });
}
}
Creating Manifest

We do not need any special permissions for our Project.