Drag and Drop Android

With the Android drag/drop framework, you can allow your users to move data from one View to another View in the current layout using a graphical drag and drop gesture. The framework includes a drag event class, drag listeners, and helper methods and classes.

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.

Your application tells the system to start a drag by calling the startDrag(ClipData data, DragShadowBuilder shadowBuilder, Object myLocalState, int flags) method. This tells the system to start sending drag events. The method also sends the data that you are dragging.

Drag events

ACTION_DRAG_STARTED – Received just after the application calls startDrag() and gets a drag shadow.
ACTION_DRAG_ENTERED – Received when the drag shadow has just entered the bounding box of the View
ACTION_DRAG_LOCATION –  Received while the drag shadow is still within the bounding box of the View.
ACTION_DRAG_EXITED – Received after the user has moved the drag shadow outside the bounding box of the View
ACTION_DROP – Received when the user releases the drag shadow over the View object.
ACTION_DRAG_ENDED – Received when the system is ending the drag operation.

Drag Shadow

During a drag and drop operation, the system displays a image that the user drags. The image is called a drag shadow. You create it with methods you declare for a View.DragShadowBuilder object, and then pass it to the system when you start a drag using startDrag().

ClipData

For case of data movement in drag and drop, we use ClipData to represent it. It is passed in startDrag() and contains description about data being dragged.

Sample Drag and Drop Application

 

 

DragAndDrop

 

In our application, we will create four box views and two parent views for drag and drop operations. As soon as any of box views are touched, we will call startDrag() for that view and on getting drop event on any of the left or right parent view, we will detach it from source parent view and add it to target parent view. Lets start creating application step by step.

1. Preparing UI

Create shape drawables which will act as background of our ImageView to give final impersonation to that of above boxes. Create four different colored shapes similar to /res/drawable/box_one.xml as below. Name them as box_one.xml, box_two.xml, box_three.xml and box_four.xml respectively.

In main activity layout, /res/layout/activity_main.xml, define two LinearLayout to act as left and right target view. Initially, in our layout all four ImageView boxes will be present in left view.

2. Implementing Functionality

In your launcher application of activity, implement View.OnTouchListener and View.OnDragListener in-order to respond to touch and drag events.  Set touch listener to all box view and drag listener to left and right target views. We will keep drag and drop operation very simple. As soon as we get MotionEvent.ACTION_DOWN for any box view, we call startDrag() for this box view. ClipData will be null and LocalView will be same as out touched view as we are just dragging an UI component. On receiving DragEvent.ACTION_DROP, we will detach this view from source and add it to target view.

3. Build and Run Application
That’s it, we are finished with sample application If you have followed above steps carefully, you will be able to run it. Try dragging boxes from left view and drop them to right view Or vice-versa.

You may also like...

  • Lamiaa Habib

    how can i make swap from right to left . to make just one box in it .