Android control for simple drag and drop boxes

Question

I want to have 1 line of items at the top of the app, inside each box will have like an icon or a letter. You can arrange them in any order, horizontally. Really easy to swap, not like hold and then move. What kind of control would I use for this?

Answer 1

First of all let me clarify the task a bit. Do you need just a predefined set of items in the horizontal list (option A)?

Or a horizontal list with scrolling (option B):

Let's assume for a moment option A is relevant, so you'll need:

1. horizontal list implementation
2. proper drag and drop handling

Step 1

There are several horizontal list implementations available, but some of them are old and unsupported, so I'd suggest to check Horizontal Variable ListView:

Horizontal ListView for Android. Based on the official ListView google code. It supports almost all the features of the ListView widget. There are minor differences in the attributes supported like "dividerWidth" instead of the default "dividerHeight".

BTW it supports Android 4.2.2, please also see demo example.

Step 2

What you actually need at this point is just to handle drag and drop actions properly.

The simplest solution is to follow standard and well-known example: TouchInterceptor class used in the Music application. It extends ListView so it should not be a problem to use the same approach with Horizontal Variable ListView.

Pay special attention to:

public boolean onInterceptTouchEvent(MotionEvent ev) {

and

public boolean onTouchEvent(MotionEvent ev) {

Step 3: Advanced implementation

Personally I think option A can only be used as a demo, so you have to address scrolling problem as well. Examples above show how to handle scrolling, but it might be a case you need a bit more.

There is another project (discontinued again) which can be used as an advanced example, because it solves several issues, supports animation, etc:

DragSortListView (DSLV) is an extension of the Android ListView that enables drag-and-drop reordering of list items. It is a major overhaul complete rewrite of the TouchInterceptor (TI) meant to give drag-sorting a polished feel. Some key features are:

• Clean drag and drop
• Intuitive and smooth scrolling while dragging.
• Support for heterogeneous item heights.
• Public startDrag() and stopDrag() methods.
• Public interface for customizing the floating View.

DragSortListView is useful for all kinds of prioritized lists: favorites, playlists, checklists, etc.

It seems to be well-documented and easy to understand. Switch from vertical to horizontal mode should not be that hard.

public class DragSortListView extends ListView {


    /**
     * The View that floats above the ListView and represents
     * the dragged item.
     */
    private View mFloatView;

    /**
     * The float View location. First based on touch location
     * and given deltaX and deltaY. Then restricted by callback
     * to FloatViewManager.onDragFloatView(). Finally restricted
     * by bounds of DSLV.
     */
    private Point mFloatLoc = new Point();

    private Point mTouchLoc = new Point();

    /**
     * The middle (in the y-direction) of the floating View.
     */
    private int mFloatViewMid;

    /**
     * Flag to make sure float View isn't measured twice
     */
    private boolean mFloatViewOnMeasured = false;

    /**
     * Watch the Adapter for data changes. Cancel a drag if
     * coincident with a change.
     */ 
    private DataSetObserver mObserver;

    /**
     * Transparency for the floating View (XML attribute).
     */
    private float mFloatAlpha = 1.0f;
    private float mCurrFloatAlpha = 1.0f;

    /**
     * While drag-sorting, the current position of the floating
     * View. If dropped, the dragged item will land in this position.
     */
    private int mFloatPos;