Drag and rearrange items in RecyclerView

Tram Ho

In this article I will introduce you to the drag and drop to swap places for items in recycler view

As illustrated in the animation above, we want to allow users

Rearrange items by dragging on the right side of ViewHolders

Rearrange items by holding down -> dragging ViewHolders

Although they feel very basic actions, it will create user-friendly experiences. In the following short article, I will demonstrate how you can drag and drop to reposition items.

All example code is written in Kotlin.

Step 1: Implement ItemTouchHelper

First, implement the ItemTouchHelper class in your fragment or activity as follows:

Then we need to assign it to a recyclerview

The result will look like this:

You can hit each row and start rearranging!

However, we have been tracking UX issues with this implementation.

It is not intuitive that users may find that they actually have to long press to rearrange items. Many of your users may not even realize that they can rearrange items.

It is hard to know when you can start reordering after long pressing, because you do not receive any feedback when the item is selected.

Step 2: Highlight the row while being selected

We can solve the second problem, it’s hard to know when you can start reordering items, by highlighting a row while the item is being selected. There are many ways to highlight a row, but in this example, we just made it dim.

And the result we get:

It is easier to recognize when you can start moving items after long pressing. Great!

However, we still have the problem that tech-savvy users may have a hard time figuring out how to reorder items. On the other hand, users may feel stressed when you always have to wait a second to start rearranging.

Step 3: Create a guide

To solve the problem, we add an icon to the right of each row and we allow the row to be selected immediately when the user touches the icon. This is quite easy done.

In Activity / Fragment, you prepare a custom method to call ItemTouchHelper.startDrag (…). When you call this method, the status of ViewHolder will be selected to drag.

When you touch the icon, you can start rearranging items immediately.



Share the news now

Source : Viblo