Thursday, April 8, 2010

Simple Drag n Drop on Android

Till now, there is no Drag and Drop like control on the Android. This feature might come in handy in a few situations to improve the usability of your apps. Here is a simple Drag and Drop app which allows you to drag a button and drop it anywhere on the screen.
Theory: Go for a FrameLayout.
FrameLayout is designed to block out an area on the screen to display a single item. You can add multiple children to a FrameLayout, but all children are pegged to the top left of the screen. Children are drawn in a stack, with the most recently added child on top.
In our main layout, we have a single button. We write a touch listener which will track the touch events and also help us to move the button around the screen. In this example, we will not be moving the button, but it’s image which we set to a ImageView. Also, instead of actually moving the ImageView, we will change the padding of the ImageView as the mouse moves, which will give an impression of the ImageView being moved.
12
The source code for this can be found on this link.
Drag and Drop example

50 comments:

  1. Its look simple thanks

    ReplyDelete
  2. Nice example. Thanks

    ReplyDelete
  3. If your replace button with TextView then the text will get stagnant at one place and over rights. can you please tell me how to do drag n drop with TextView

    ReplyDelete
  4. Great example - works perfect - quick question: how do you do it with multiple images?

    ReplyDelete
  5. I've made a "real" drag and drop sample, which allows dragging of multiple custom views... Read all about it on my blog http://asimmittal.net/blog/?p=240

    ReplyDelete
    Replies
    1. The above you have the link is not enter to the source code

      Delete
  6. This looks pretty cool, anyway you could also add a touch listener to each object added that removes it? I tried this and it just removes the latest imageview after each touch

    ReplyDelete
  7. this looks great, can you modify the code so that only one button is there and the same button is moved from different places to some other place.

    ReplyDelete
  8. Android has comprehensive drag and drop since API Level 1.

    Check how pros do it here: http://developer.android.com/reference/android/view/View.html#dispatchDragEvent(android.view.DragEvent)

    Developers should read more the dev guide.

    ReplyDelete
    Replies
    1. DragEvent is included in API 11. Its not in API 1..

      Delete
  9. Sorry @XOR007, It's since API Level 11.

    ReplyDelete
  10. @XOR007 should read more the dev guide.

    ReplyDelete
  11. where is d code?

    ReplyDelete
  12. @Anonymous: There's a link at the bottom of the post. I think I will bold and highlight all those links from now on. :)

    ReplyDelete
  13. Nice example. Thanks


    Please tell me how to drag and drop one ListView to another ListView ?

    ReplyDelete
  14. Nice example. Thanks

    How to drag and drop from one ListView to another ListView?

    please help me

    ReplyDelete
  15. I replaced Button to Imageview but it didnt work. Please help!

    ReplyDelete
  16. Dear please help me...
    i want to drag and drop an "image" instead of a button which is showing here..
    please help and if please help me with the code.

    ReplyDelete
  17. @Ahmed Khan: Whats the problem you are facing?

    ReplyDelete
  18. Thanks For Help . I want to drag button/textview or any control to inside linear layout/relative layout . Then if i move control in layout , control cannot move outside from layout . It move only inside the layout.
    If I drop control outside layout that , it go back to it original position.

    ReplyDelete
    Replies
    1. This is too much of customization. You can use the newer APIs for this I guess. Else, you can start implementing it and see how far you can go.

      Delete
    2. I wanr to draw multiple circle shape and all circle should be draged and drop on the layout.can you help me regarding this.My id-dhananjay.kumar.cs@gmail.com

      Delete
  19. Hi sir,
    If we have 2 images in a view or layout, can we drag a view or layout so that we can dag 2 images at a time. please help me out

    ReplyDelete
  20. awesome work dude.. thank u so much.. :)

    ReplyDelete
  21. can somebody post the code for dragging the button as a single image?

    ReplyDelete
  22. how to avoid overlapping and how to redrag and redrop
    Thankyou

    ReplyDelete
  23. I want to drag and drop the text drawn on custom view, plz help.
    Its been so many days i am trying this.. plz provide the code.

    ReplyDelete
  24. i want to drag and drop the text drawn on custom view. plz help me, provide some sample code. its been many days i am trying to do this.

    ReplyDelete
  25. I want to use this to drag and drop images of a grid from one cell to another. Can anybody help me the changes I should do in order to make this successful.

    ReplyDelete
  26. nice example for drag and drop

    ReplyDelete
  27. Nice example for drag and drop. It is very useful to my application. thank u

    ReplyDelete
  28. Nice Example but how to use the image instead of button?
    how to drop the button means redrop and reDrag?
    Thank in advance

    ReplyDelete
  29. if are you not interested in dive the reply of any question?
    then why create this type blog?
    ok so please give any sutable answer of question if yuo know!
    else say no that u don`t know about this ok

    thank u

    ReplyDelete
    Replies
    1. This is not a forum. And, morever, I don't sit all day long to reply to comments I get. This blog is an attempt to put forth some samples that would try to solve some problems. This is not a place where you would get fully working code that you would be able to directly copy and paste into your project. You will also have to do your own research. I am generally happy to reply to comments, whenever I get time, and if a question makes sense.

      If you ask questions, which are not very clear, it's neither going to help you or me.

      Also, I tend to ignore comments from "Anonymous" users. Sorry for the inconvenience anyway.

      Delete
  30. someone know why copying the code i get a "method onTouch must override a superclass method" as I said i copied the java code, thanks in advance

    ReplyDelete
    Replies
    1. Depends on your code. Are you extending a class? If so, which one?

      Delete
    2. my class is as follows: public void name extends activity implements OnTouchListener{}

      I've also extended application itself but I don't think that's the problem, thanks

      Delete
  31. hello Kumar Bibek,

    I just have one query, just want to ask if, after onMove method, the Button view still exits or is it just another image created

    ReplyDelete
    Replies
    1. After onMove, the button is removed, and what you see is just an image.

      Delete
  32. Hab das gleiche mal mit ner ImageView und einen ImageButton probiert. Aber es funktioniert nicht. Sieht quasi so aus.
    public class Dragndrop2Activity extends Activity implements OnTouchListener {

    private final static int START_DRAGGING = 0;
    private final static int STOP_DRAGGING = 1;

    private ImageButton ibtn;
    private ImageView iv1;
    private FrameLayout layout;
    private int status;
    private LayoutParams params;

    private ImageView image;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    layout = (FrameLayout) findViewById(R.id.LinearLayout01);
    // layout.setOnTouchListener(this);

    ibtn = (ImageButton) findViewById(R.id.imageButton1);
    ibtn.setDrawingCacheEnabled(true);
    ibtn.setOnTouchListener(this);
    iv1 = (ImageView) findViewById(R.id.imageView1);
    iv1.setDrawingCacheEnabled(true);
    iv1.setOnTouchListener(this);

    params = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.WRAP_CONTENT);

    }


    public boolean onTouch(View view, MotionEvent me) {
    if (me.getAction() == MotionEvent.ACTION_DOWN) {
    status = START_DRAGGING;
    image = new ImageView(this);
    image.setImageBitmap(iv1.getDrawingCache());
    layout.addView(image, params);
    }
    if (me.getAction() == MotionEvent.ACTION_UP) {
    status = STOP_DRAGGING;
    Log.i("Drag", "Stopped Dragging");
    } else if (me.getAction() == MotionEvent.ACTION_MOVE) {
    if (status == START_DRAGGING) {
    System.out.println("Dragging");
    image.setPadding((int) me.getRawX(), (int) me.getRawY(), 0, 0);
    image.invalidate();
    }
    }
    return false;
    }
    }

    Wo ist der Fehler?

    ReplyDelete
  33. Sorry, wrote german. I tried this with a ImageView and Imagebutton. But it doesnt work. Where is my fault?

    ReplyDelete
  34. Nice Example dear.It`s help me lot thank dear.

    ReplyDelete
  35. This is awesome example dear thanks for help me.

    ReplyDelete
  36. Nice..... Thanks.....

    ReplyDelete