I’m working on an app and got to the point where I wanted to implement a drag and drop ListView that allows re-ordering, adding and deleting of list items using a database. I didn’t think that it would be all that difficult. However, with my limited experience with Android, it turned out to be a bit of a pain to get working. But, now that I have it working I figured I’d post some example code so that others can take advantage of what I learned and hopefully have an easier time getting this implemented.

My initial searches had me stumble upon DragSortListView (DSLV) by Carl A. Bauer. I was excited to find something that looked so polished, and it appeared pretty easy to implement. After digging into the demo code (available from above link) and playing with the demo app (available as app on Google Play), I thought I had a pretty good idea of what I needed to do to get it working. Unfortunately, I just couldn’t get it to work with a database. I could get the items to display correctly and then I could drag them around to re-arrange the order and swipe to delete them, but I couldn’t figure out how to save any of that in the database.

As part of my trials, I posted what I thought was an issue on the DSLV GitHub site. Turns out that it’s not an issue, just a misunderstanding on my part. But, through the discussion of that issue I figured out how to get it to work. YEAH!

The SimpleDragSortCursor adapter class provides most of the muscle to get things up and running. The difficult part was to get it to correctly update the database. Read on to find out how I got it working.

To get started, I based my test app on the CursorDSLV.java class from the DSLV demo. I already had a database class that I was using (DatabaseAdapter.java), so I modified it a little for this test app (it’s available in the demo code you can download on GitHub). Next, I ended up creating my own method to setup the ListView and configure click and long-click actions. Here’s what I put together:

private void displayItemList() {
	// The desired columns to be bound
	String[] columns = new String[] { DatabaseAdapter.ITEM_NAME,
			DatabaseAdapter.ITEM_POSITION };

	// the XML defined views which the data will be bound to
	int[] ids = new int[] { R.id.item_name, R.id.item_position_list };

	// pull all items from database
	Cursor cursor = mDbHelper.getAllItemRecords();

	mMAdapter = new MAdapter(this, R.layout.list_items, null, columns, ids,
			0);

	mDslv = (DragSortListView) findViewById(R.id.item_list);

	// set dslv profile for faster scroll speeds
	mDslv.setDragScrollProfile(ssProfile);

	mDslv.setAdapter(mMAdapter);
	mMAdapter.changeCursor(cursor);

	mDslv.setOnItemClickListener(new OnItemClickListener() {
		@Override
		public void onItemClick(AdapterView<?> listView, View view,
				int position, long id) {
			// Get the cursor, positioned to the corresponding row in the
			// result set
			Cursor cursor = (Cursor) listView.getItemAtPosition(position);

			// Get the item name and details from this row in the database.
			String itemName = cursor.getString(cursor
					.getColumnIndex("item_name"));
			String itemDetails = cursor.getString(cursor
					.getColumnIndex("item_details"));
			Toast.makeText(getApplicationContext(),
					itemName + ": " + itemDetails, Toast.LENGTH_SHORT)
					.show();
		}
	});

	mDslv.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
		@Override
		public boolean onItemLongClick(AdapterView<?> listView, View view,
				int position, long id) {
			// Get the cursor, positioned to the corresponding row in the
			// result set
			Cursor cursor = (Cursor) listView.getItemAtPosition(position);

			// Get the item name and details from this row in the database.
			long rowId = cursor.getLong(cursor.getColumnIndex("_id"));
			launchEditActivity(rowId);
			return true;
		}
	});
}

Replacing the similar lines in the CursorDSLV.java class with this method allowed me to display the list of items from the database and drag them around and click the red X to delete them. However, I wanted to be able to swipe to delete, put the drag handle on the right and get rid of the red X. I ended up doing a straight swap for some of the layout files (in CursorDSLV.java):

  • Used warp_main.xml instead of cursor_main.xml in order to get swipe to remove working:
setContentView(R.layout.warp_main);
  • Changed the layout file for the actual details view from list_item_click_remove.xml to list_item_handle_right.xml in order to move the drag handle to the right of the screen:
adapter = new MAdapter(this,
        R.layout.list_item_handle_right, null, cols, ids, 0);

After those changes, I had the desired look and actions setup. Now all I needed to do was get the changes to actually save in the database. In order to do that I first came up with my own way, but then Carl set me straight and I used the built-in DragSortCursorAdapter methods. I added the following persistChanges method to the MAdapter class in order to create a method that I could use to save the changes (here’s a snippet):

private class MAdapter extends SimpleDragSortListAdapter {
    // ...

    public void persistChanges() {
        Cursor c = getCursor();
        c.moveToPosition(-1);
        while (c.moveToNext()) {
            int listPos = getListPosition(c.getPosition());
            if (listPos == DragSortListAdapter.REMOVED) {
                dbAdapter.deleteItemRecord(c.getInt(c.getColumnIndex("_id")));
            } else if (listPos != c.getPosition()) {
                dbAdapter.updateItemPosition(c.getInt(c.getColumnIndex("_id")), listPos);
            }
        }
    }
}

I thought I was doing really well, but I wasn’t sure where I should call the above method to get it to actually save the data correctly. Carl said that I should call it at the activity level and suggested that I put it in the onPause() method. DUH! Made sense to me. Here’s what Carl suggested:

@Override
protected void onPause() {
    super.onPause();
    adapter.persistChanges();
}

Yeah! Now I had a working example that would successfully save the changes whenever the back button was pressed. Saving the changes in the onPause() method might not be ideal, so feel free to play around with where you call it so it works best for your application.

The above code is just to illustrate the basic steps to wire up DSLV to work with a database. I put together a more comprehensive demo app that implements what’s talked about above using a SQLite database. The app allows you to add/edit/remove/sor items to experiment with DragSortListView. You can download it from GitHub and play around with it. The app uses ActionBarSherlock, so you’ll have to download it as well as the DragSortListView library and make sure your project is configured correctly to use these libraries.

Hopefully this helps make implementing Drag and Sort ListViews easier for you.