Thursday, July 29, 2010

implement drag and drop on android

Nowadays, drag and drop is a frequently seen feature on touch screen devices. Tthis post introduces the basic idea of how to implement drag and drop on android.

On android, touch event is composed of a series events.
First, user puts his finger on an element, and the element receives a ACTION_DOWN event.
Then, while holding finger on screen, user moves his finger to a new location. The element receives a series of ACTION_MOVE events.
Finally, user raises his finger. At this point, the element receives ACTION_UP event.
Consider the figure below, the parent element has a child element inside. User can drag the child element anywhere in parent.

There are two important traits of touch event on android.
First, touch event will be propagated. That is, if a child chooses to ignore the first event (ACTION_DOWN) by returning false in its onTouchEvent handler, the parent's onTouchEvent handler will receive the event. Unless one of the ancestors agrees to handle the event or the root is reached, the event will continually be propagated.
Second, parent can intercept the touch event before its child's onTouchEvent handler is fired. This is achieved by overriding the onInterceptTouchEvent method on parent, and returning true from it. As a consequence, the child's onTouchEvent handler will be bypassed, and the parent's onTouchEvent handler will fire.
The work flow is shown in below diagram:


We need to setup the onTouchEvent handler for both child and parent. In child's handler, we save the child element as the item to be dragged, and return false so that subsequent event will be delivered to parent's handler. In parent's handler, we change the child's margin to match the position of the finger, so the child will follow our finger.

Sample code:
http://code.google.com/p/rxwen-blog-stuff/source/browse/#svn/trunk/android/drag

Reference:
http://developer.android.com/guide/topics/ui/ui-events.html

22 comments:

  1. this is not a good way to implement. I tried and found that child will no longer get further events once return false (and after ACTION_UP). the source code is very easy to understand on this issue. what i have done is to always allow child to handle the drag and zoom. it works very well without parent involved.

    ReplyDelete
  2. Wow!! You two are way to smart. I'm just trying to learn how to drag and drop with my android 2.2 Lg touchscreen phone. And after reading this I'm more lost than ever! Lol. Like I said you two are way to smart on these things to be posting on one page. You both should be teaching this stuff or atleast getting paid big money somewhere.

    ReplyDelete
  3. How about if there are two or more images, how will you implement this? Please help... I'm new to programming and android. Thanks in advance :)

    ReplyDelete
  4. With more images to drag and drop, you need to determine which image the user has selected by getting the coordinates from the ACTION_DOWN event.

    ReplyDelete
  5. Hi im new one for android. im develop now drag and drop its very useful to me,But i need to shift the views like when i touch one view to drag and drop to another view these two views can be exchange the position. if any idea please share with me. one more thing i dont need onTouch listener instead of i need onLongClicklistner.

    Thanks in andvace

    ReplyDelete
  6. I am having problem dragging and dropping images out from one layout to another layout. Anyone can help me?

    ReplyDelete
  7. Nice post, but here is a video that explains the relationship between the dispatchTouchEvent, the onInterceptTouchEvent and the onTouchEvent with the help of a custom layout and a custom View inside that layout
    https://www.youtube.com/watch?v=SYoN-OvdZ3M&index=19&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD

    ReplyDelete
  8. Wonderful Article. its informative and useful for Android Development training.


    Android Training in Bangalore
    Android Training in kalyan Nagar

    ReplyDelete
  9. Thanks for one marvelous posting! I enjoyed reading it; you are a great author. I will make sure to bookmark your blog and may come back someday. I want to encourage that you continue your great posts.
    honor service centres in chennai
    honor service center velachery
    honor service center in vadapalani

    ReplyDelete
  10. Very nice information. Thank you for sharing your knowledge. It is same as the information that i learned from one institute.


    ReplyDelete
  11. Very nice information. Thank you for sharing your knowledge with us. It is same as the information that i learned from one institute.

    Python Training in Kalyan nagar

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. 192.168.1.1 IP Address. To access the admin page type 192.168.1.1 into your web browser's address bar or click on the link below.

    ReplyDelete

  14. 192.168.l.l is an IP address used by many routers and modems as the default gateway. 192.168.1.1 address can be used by the users to gain the router admin access and configure their routers and networks.

    ReplyDelete
  15. Excellent content information. Nice blog content.I also want to share some information about Signova Group

    ReplyDelete