How to code Drag n Drop 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:

Screenshot_2014-12-18-17-56-47 Screenshot_2014-12-18-17-56-14 Screenshot_2014-12-18-17-55-19 Screenshot_2014-12-18-17-50-05


Tips to Remember always:

  1. 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.
  2. 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.

 

Hope this helpful. Your valuable comments are always welcomed. It will help to improve my post and understanding.

 

Download Source Code from here.

durga chiranjeevi

durga chiranjeevi

I'm currently working as Android developer at Energy Alternatives India. Interested in Application and Game development.
durga chiranjeevi

Leave a Reply

Your email address will not be published. Required fields are marked *