Android GridView reorder elements via Drag and Drop

Question

I have a GridView in an application I am working on. I would like to be able to reorder the items in the GridView via drag-and-drop. I have found lots of help for ListViews but nothing on GridViews. I want to achieve behaviour like in this launcher app http://www.youtube.com/watch?v=u5LISE8BU_E&t=5m30s. Any ideas?

hey did you solved this, I have a similar problem to solve. Can you please share some code snippet? — Chandra Sekhar, Feb 23 '12 at 06:31
Chandra, if it's still needed, please look at my answer below. — Andrei Buneyeu, Jul 09 '13 at 10:49
Can you mark one of them as answer? That will help lot of people who are looking for help to quickly find the answer. — Gopinath, Aug 12 '14 at 12:11

Dmytro Boichenko · Answer 1 · 2013-10-16T11:11:00.190

If you don't resolve this problem I will provide my code. But it works on Android 3.0 and above, because I use android drag-n-drop framework

grid = (GridView) findViewById(R.id.grid);
grid.setAdapter(new DragGridAdapter(items, getActivity()));

....

grid.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                GridView parent = (GridView) v;

                int x = (int) event.getX();
                int y = (int) event.getY();

                int position = parent.pointToPosition(x, y);
                if (position > AdapterView.INVALID_POSITION) {

                    int count = parent.getChildCount();
                    for (int i = 0; i < count; i++) {
                        View curr = parent.getChildAt(i);
                        curr.setOnDragListener(new View.OnDragListener() {

                            @Override
                            public boolean onDrag(View v, DragEvent event) {

                                boolean result = true;
                                int action = event.getAction();
                                switch (action) {
                                case DragEvent.ACTION_DRAG_STARTED:
                                    break;
                                case DragEvent.ACTION_DRAG_LOCATION:
                                    break;
                                case DragEvent.ACTION_DRAG_ENTERED:
                                    v.setBackgroundResource(R.drawable.shape_image_view_small_gallery_selected);
                                    break;
                                case DragEvent.ACTION_DRAG_EXITED:
                                    v.setBackgroundResource(R.drawable.shape_image_view_small_gallery_unselected);
                                    break;
                                case DragEvent.ACTION_DROP:
                                    if (event.getLocalState() == v) {
                                        result = false;
                                    } else {
                                        View droped = (View) event.getLocalState();
                                        GridItem dropItem = ((DragGridItemHolder) droped.getTag()).item;

                                        GridView parent = (GridView) droped.getParent();
                                        DragGridAdapter adapter = (DragGridAdapter) parent.getAdapter();
                                        List<GridItem> items = adapter.getItems();

                                        View target = v;
                                        GridItem targetItem = ((DragGridItemHolder) target.getTag()).item;
                                        int index = items.indexOf(targetItem);
                                        items.remove(dropItem);
                                        items.add(index, dropItem);
                                        adapter.notifyDataSetChanged();
                                    }
                                    break;
                                case DragEvent.ACTION_DRAG_ENDED:
                                    v.setBackgroundResource(R.drawable.shape_image_view_small_gallery_unselected);
                                    break;
                                default:
                                    result = false;
                                    break;
                                }
                                return result;
                            }
                        });
                    }

                    int relativePosition = position - parent.getFirstVisiblePosition();


                    View target = (View) parent.getChildAt(relativePosition);

                    DragGridItemHolder holder = (DragGridItemHolder) target.getTag();
                    GridItem currentItem = holder.item;
                    String text = currentItem.getFile().getAbsolutePath();

                    ClipData data = ClipData.newPlainText("DragData", text);
                    target.startDrag(data, new View.DragShadowBuilder(target), target, 0);
                }
            }
            return false;

and DragGridAdapter

public class DragGridAdapter extends BaseAdapter{
private Context context;
private List<GridItem> items;

public DragGridAdapter(List<GridItem> items, Context context){
    this.context = context;
    this.items = items;
}

@Override
public int getCount() {
    return items.size();
}

@Override
public Object getItem(int position) {
    return items.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    DragGridItemHolder holder;
    if (convertView == null) {
        holder = new DragGridItemHolder();

        ImageView img = new ImageView(context);
        holder.image = img;
        convertView = img;
        convertView.setTag(holder);
    } else {
        holder = (DragGridItemHolder) convertView.getTag();
    }
    holder.item = items.get(position);
    holder.image.setImageBitmap(items.get(position).getBitmap());
    return convertView;
}

public List<GridItem> getItems() {
    return items;
}

I hope it helps to you

View.OnDragListener is the part of Android-3.0, Above code is not working — Ashish Dwivedi, May 22 '12 at 10:21
thnx for the example.. I got only got one bug.. The first time i drag a item over other items in the gridview, the imageview sources of the items are lost. When i drop it the sources wil be fixed.. After the first drag and drop of a activity everything works perfectly.. Any idea for the strange behaviour of this? — Luciano, Feb 01 '13 at 09:27
Sorry, but I don't have answer for your question. Maybe it is a bug on your's device — Dmytro Boichenko, Feb 01 '13 at 10:28
@Dmitriy_Boichenko .I like your code but it would be even more better if you give the code for DragGridItemHolder — Abx, Jun 05 '13 at 10:31
@Abhilash Unfortunatelly I don't have this code today. But as I remember it's simple. Please consider standard android's viewholder pattern — Dmytro Boichenko, Jun 06 '13 at 06:43
@Dmitriy_Boichenko ,thanks for this reply to my late comment,I got it now ,it was just a view holder pattern afterall,missed that point entirely . — Abx, Jun 06 '13 at 06:57
but how do you make it draggable only after a long click on the gridview item — user1940676, Jul 27 '14 at 14:09

Alex Askerov · Answer 2 · 2013-09-19T16:02:44.180

7

My version for drag and drop grid view https://github.com/askerov/DynamicGrid.
It's extends original GridView, supports drag and drop to reorder items, auto-scroll if drag out of screen. It's completely functional on 3.0+ api, but supports 2.2 and 2.3 with limitations (no animations).

edited Sep 19 '13 at 16:02

answered Sep 09 '13 at 21:36

Alex Askerov

391
3
5

Thank you for taking the time to edit, but you seem to have missed the point a bit. This is still basically a link-only answer; such answers are discouraged. There are two main reasons for this: it's usually much more helpful to answer users' specific issues directly, and even links to good resources sometimes go bad. Please see [this meta post](http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers) for more detail. – Pops Sep 19 '13 at 01:07
Alex, your grid is not working well for two columns, specially while dragging from bottom to top. Can you please help. – Prateek Jul 15 '14 at 13:25

score 2 · Answer 3 · answered Jul 03 '12 at 07:12

2

Have a look at thquinn's DraggableGridView, This was developed targeting Android 2.2 (API level 8). Hope this helps someone :)

answered Jul 03 '12 at 07:12

vin

337
2
18

This is cool solution. But it don't have any scroll listeners. So if you have a lot of pictures you can take Out Of Memory Error – Dmytro Boichenko Jun 06 '13 at 07:30
It's not an AdapterView, so no view recycling is implemented – Michał Klimczak Sep 16 '13 at 12:31

score 2 · Answer 4 · answered Apr 20 '19 at 07:57

Google recently released a few code labs a few months back. https://codelabs.developers.google.com/codelabs/android-training-adaptive-layouts/index.html?index=..%2F..%2Fandroid-training#0

You can check the solution to it here https://github.com/google-developer-training/android-fundamentals-apps-v2/tree/master/MaterialMe-Resource

They make grid layout with movable cards that can be dragged and dropped anywhere in the layout using the itemTouchHandler.

The more detailed code on how to do the drag and drop is here You need to look into the Task 3: Make your CardView swipeable, movable, and clickable section

score 1 · Answer 5 · edited Sep 14 '12 at 05:57

Using the drag-n-drop framework, instead that cycling the childs and setting the draglistener, I use as a grid item layout container, a DragableLinearLayout that extends the LinearLayout and implements the onDragEvent(DragEvent) method.

So you can fill your grid with the adapter as usual and most of the drag and drop code is on the onDragEvent of DragableLinearLayout

public class DragableLinearLayout extends LinearLayout {


    public DragableLinearLayout(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);

    }

    public DragableLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    public DragableLinearLayout(Context context) {
        super(context);

    }

    @Override
    public boolean onDragEvent(DragEvent event) {
        //in wich grid item am I?
        GridView parent = (GridView) getParent();
        Object item = parent.getAdapter().getItem(
                parent.getPositionForView(this));
            //if you need the database id of your item...
        Cursor cur = (Cursor) item;
        long l_id = cur.getLong(cur.getColumnIndex("youritemid"));

        switch (event.getAction()) {
        case DragEvent.ACTION_DRAG_STARTED:

            return true;
        case DragEvent.ACTION_DRAG_ENTERED:

            setBackgroundColor(Color.GREEN);
            invalidate();
            return true;
        case DragEvent.ACTION_DRAG_EXITED:
            setBackgroundColor(Color.WHITE);
            invalidate();
            return false;
        case DragEvent.ACTION_DROP:
ClipData cd = event.getClipData();
            long l_id_start = Long.valueOf(cd.getItemAt(0).getText()
                    .toString());
            //
            Toast.makeText(getContext(), "DROP FROM " + l_id_start
                    + " TO " + l_id, Toast.LENGTH_LONG);
            //do your stuff  
                    ........
                    //the db requery will be on the onDragEvent.drop of the container
                    //see the listener


            return false;
        case DragEvent.ACTION_DRAG_ENDED:
            setBackgroundColor(Color.WHITE);
            invalidate();
            //
            return false;

        }

        return true;

    }


}



private View.OnDragListener listenerOnDragEvent = new View.OnDragListener() {

    public boolean onDrag(View v, DragEvent event) {
        // Defines a variable to store the action type for the incoming
        // event
        final int action = event.getAction();
        switch (action) {

        case DragEvent.ACTION_DROP:

            // REQUERY
            updateDbView();
            return false;
            // break;

        }
        return true;
    }
};

score 0 · Answer 6 · answered Jul 09 '13 at 10:48

0

Probably PagedDragDropGrid project is what you need: https://github.com/mrKlar/PagedDragDropGrid

It provides custom ViewGroup (similar to GridView) with feature of smooth reordering (exactly like in your video). Probably it'll require a bit of customizations, but it's worth.

Hope it'll help.

answered Jul 09 '13 at 10:48

Andrei Buneyeu

6,662
6
35
38

in the above library, I am not able to scroll in vertical direction when i'm dragging... any other options?? – Milan Delvadia Dec 02 '13 at 07:22
1

Yeah, you should a bit customize it if you want scrolling. Try to implement ScrollView with DragDropGrid (not PagedDragDropGrid) inside, it helped me. Sorry, I have no time right now to find exact solution – Andrei Buneyeu Dec 02 '13 at 08:39

score 0 · Answer 7 · answered May 21 '17 at 00:08

0

Here's a library from h6ah4i that takes advantage of the Recycler Views to offer a drag and drop gridview with reorder capabilities.

answered May 21 '17 at 00:08

Cody Pinto

101
1
6

score 0 · Answer 8 · answered Mar 13 '12 at 15:45

0

I recently found a solution on which its author spent quite some time here http://blahti.wordpress.com/2012/03/03/improved-drag-drop-for-gridview/ There are 4 previous related blog posts explaining what is going on in more detail there.

answered Mar 13 '12 at 15:45

jJ'

3,038
32
25

Android GridView reorder elements via Drag and Drop

8 Answers8

Linked

Related