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

 

[su_button url=”https://github.com/androidsrc/DragAndDropSample” target=”blank” style=”stroked” background=”#51d461" color=”#ffffff” size=”6" center=”yes” radius=”0" icon=”icon: arrow-circle-o-down”]Download Full Source Code[/su_b[/su_button]p> 

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.

You may also like...

1 Response

  1. Lamiaa Habib says:

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

Leave a Reply

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