Drag and Drop



  • Drag and drop means picking an item from one place and placing it on another place by dragging. Several listeners and classes are to be used. There is something more important than dragging and dropping in this process and that is creating the shadow of the item at the time of dragging. Follow these steps and you will be able to drag and drop an item with showing the item while dragging it.
  • Note: Too many features that will be used in this application are added in API 11. Therefore keep your Minimum Required SDK to HoneyComb 3.0 at least.
  • Step 1- Create two layouts inside the parent layout. One which the item will be dragged from and the second which the item will be dragged to.

    <LinearLayout

    android:id="@+id/toplinear"

    android:layout_width="fill_parent"

    android:layout_height="100dp"

    android:orientation="vertical"

    >

    </LinearLayout>

    <LinearLayout

    android:id="@+id/bottomlinear"

    android:layout_width="fill_parent"

    android:layout_height="100dp"

    android:orientation="vertical">

    </LinearLayout>


    Step 2- In the first layout, create an ImageView for the image which will be dragged and dropped.

    <ImageView

    android:id="@+id/image"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/ic_launcher" />


    Step 3- In java file; get this ImageView and the two layouts created above in variables. We have a variable 'image1' for the imageview and two variables 'draglayout' and 'droplayout' for the two layouts respectively. We will drag image1 from draglayout and drop it in droplayout. Now use the following onLongClickListener for the imageview.

    image1 = (ImageView)findViewById(R.id.image);

    draglayout=(LinearLayout) findViewById(R.id.toplinear);

    droplayout=(LinearLayout) findViewById(R.id.bottomlinear);

    image1.setOnLongClickListener(new OnLongClickListener() {

    @Override

    public boolean onLongClick(View view) {

    // TODO Auto-generated method stub

    ClipData.Item item = new ClipData.Item((CharSequence)view.getTag());

    String[] mimeTypes = { ClipDescription.MIMETYPE_TEXT_PLAIN };

    ClipData data = new ClipData(String.valueOf(view.getId()), mimeTypes, item);

    DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);

    view.startDrag( data, //data to be dragged

    shadowBuilder, //drag shadow

    view, //local data about the drag and drop operation

    0 //no needed flags

    );

    view.setVisibility(View.INVISIBLE);

    draglayout.setOnDragListener(new DragListener());

    droplayout.setOnDragListener(new DragListener());

    return false;

    }

    });


  • First four statements of the onLongClick() method creates the clipped shadow of the item that will be shown when the item is being dragged. The method startdrag() starts the dragging of the item. The image will be invisible from the top layout as soon its dragging has been started. After the dragging has been started, we have declared onDragListeners for the two layouts. We created a separate class 'DragListener' for this purpose.
  • Step 4- Create a class DragListener-

    class DragListener implements OnDragListener {

    @Override

    public boolean onDrag(View v, DragEvent event) {

    switch (event.getAction()) {

    case DragEvent.ACTION_DRAG_STARTED:

    break;

    case DragEvent.ACTION_DRAG_ENTERED:

    break;

    case DragEvent.ACTION_DRAG_EXITED:

    break;

    case DragEvent.ACTION_DROP:

    // if the view is the droplayout, we accept the drag item

    if(v == droplayout) {

    View view = (View) event.getLocalState();

    ViewGroup viewgroup = (ViewGroup) view.getParent();

    viewgroup.removeView(view);

    droplayout.addView(view);

    view.setVisibility(View.VISIBLE);

    } else {

    View view = (View) event.getLocalState();

    view.setVisibility(View.VISIBLE);

    Context context = getApplicationContext();

    Toast.makeText(context, "Not Allowed here",

    Toast.LENGTH_LONG).show();

    }

    break;

    //the drag and drop operation has concluded. case DragEvent.ACTION_DRAG_ENDED:

    break;

    default:

    break;

    }

    return true;

    }

    }

    }
  • There are several Drag Events defined in android which we have used in switch case statement. When the case of 'ACTION_DROP' is fulfilled i.e. the image is dropped, we check if it was dropped in droplayout or draglayout. If it was dropped in droplayout, we remove the image from its previous layout (draglayout) and add it to droplayout. And if it was dropped in draglayout, it is only made visible again in this layout and a toast is shown.