How to code Drag n Drop in Android

by durga chiranjeevi 18/12/2014 | 12:29 0 Posted in Android

In this blog post, I would like to show how to code Drag n Drop in Android. 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.

Step 1: 1. Create a new project File -> Android Project. On activity_main.xml copy paste this code:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical"
 android:padding="10dp"
 android:paddingLeft="50dp"
 android:paddingRight="50dp" >

<Button
 android:id="@+id/button1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentBottom="true"
 android:layout_centerHorizontal="true"
 android:layout_marginBottom="65dp"
 android:onClick="reset"
 android:text="Reset" />

<LinearLayout
 android:id="@+id/toplinear"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignLeft="@+id/bottomlinear"
 android:layout_alignParentTop="true"
 android:weightSum="3"
 android:layout_marginTop="103dp" >

<TextView
 android:id="@+id/option_1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:gravity="center"
 android:text="Apple"
 android:layout_weight="1"
 android:textStyle="bold" />

<TextView
 android:id="@+id/option_2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:gravity="center"
 android:text="Ball"
 android:layout_weight="1"
 android:textStyle="bold" />

<TextView
 android:id="@+id/option_3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:gravity="center"
 android:layout_weight="1"
 android:text="Cat"
 android:textStyle="bold" />
 </LinearLayout>

<LinearLayout
 android:id="@+id/bottomlinear"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_centerHorizontal="true"
 android:weightSum="3"
 android:layout_centerVertical="true" >

<TextView
 android:id="@+id/choice_2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:gravity="center"
 android:layout_weight="1"
 android:text="A for" />

<TextView
 android:id="@+id/choice_3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:gravity="center"
 android:layout_weight="1"
 android:text="B for" />

 <TextView
 android:id="@+id/choice_1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="5dp"
 android:gravity="center"
 android:layout_weight="1"
 android:text="C for" />

</LinearLayout>

</RelativeLayout>

Step 2. Now open your MainActivity.java and copy paste this code:


import android.app.Activity;
import android.content.ClipData;
import android.graphics.Typeface;
import android.os.Bundle;
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;
import android.widget.Toast;

public class MainActivity extends Activity {

private TextView option1, option2, option3, choice1, choice2, choice3;
 public CharSequence dragData;

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

// 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 {
 @Override
 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;
 }

}
 }

 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();
 // view dragged item is being dropped on
 TextView dropTarget = (TextView) v;
 // view being dragged and dropped
 TextView dropped = (TextView) view;
 // checking whether first character of dropTarget equals first
 // character of dropped
 if (dropTarget.getText().toString().charAt(0) == dropped
 .getText().toString().charAt(0)) {
 // stop displaying the view where it was before it was
 // dragged
 view.setVisibility(View.INVISIBLE);
 // update the text in the target view to reflect the data
 // being dropped
 dropTarget.setText(dropTarget.getText().toString()
 + dropped.getText().toString());
 // 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());
 // remove setOnDragListener by setting OnDragListener to
 // null, so that no further drag & dropping on this TextView
 // can be done
 dropTarget.setOnDragListener(null);
 } else
 // displays message if first character of dropTarget is not
 // equal to first character of dropped
 Toast.makeText(
 MainActivity.this,
 dropTarget.getText().toString() + " is not "
 + dropped.getText().toString(),
 Toast.LENGTH_LONG).show();
 break;
 case DragEvent.ACTION_DRAG_ENDED:
 // no action necessary
 break;
 default:
 break;
 }
 return true;
 }
 }

public void reset(View view) {
 option1.setVisibility(TextView.VISIBLE);
 option2.setVisibility(TextView.VISIBLE);
 option3.setVisibility(TextView.VISIBLE);

choice1.setText("A for");
 choice2.setText("B for");
 choice3.setText("C for");

choice1.setTag(null);
 choice2.setTag(null);
 choice3.setTag(null);

choice1.setTypeface(Typeface.DEFAULT);
 choice2.setTypeface(Typeface.DEFAULT);
 choice3.setTypeface(Typeface.DEFAULT);

choice1.setOnDragListener(new ChoiceDragListener());
 choice2.setOnDragListener(new ChoiceDragListener());
 choice3.setOnDragListener(new ChoiceDragListener());
 }

}

ScreenShots:

Tips to Remember always:

In this we made the textview draggable. To make the textview 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 usingstartDrag() 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_DRAG_LOCATION – Executed when the drag shadow is still within the View object’s drop area.
- ACTION_DRAG_EXITED – Executed when the user has moved the drag shadow outside the drop area.
- ACTION_DROP – Executed when user drops the data.
- ACTION_DRAG_ENDED – Executed when the Drag event is finished.