Drag To Reorder Android RecyclerView Items Using Kotlin

Build beautiful customizable lists in your Android apps

In this article, you will learn how to implement RecyclerView, which offers you the ability to reorder the items. We’re going to do this without using any third-party libraries. We will use RecyclerView default decorators and a couple of interfaces to achieve this. If you’re interested, a GitHub repo link with the implementation is embedded at the bottom.

Without any further delay, let’s get started!

Introduction

One of the best ways to display huge lists in Android is through RecyclerView. If you’ve been an Android developer for a while, you have surely used it. We have many advanced features like view holder patterns, rich animation, DiffUtil.Callback to improve performance, etc. Apps like WhatsApp and Gmail use RecyclerView to show endless conversations.

One feature that many developers feel is challenging to implement is reordering list items. In the past, we had to do everything manually — from detecting a touch to updating the list items. But with improvements in Android development, we’ve got few handy utilities such as ItemTouchHelper that help us implement complex features like reordering in a few steps.

ItemTouchHelper is nothing but a simple class that is extended from RecyclerView.ItemDecoration. This offers multiple callbacks such as onMove, onSwiped, onSelectedChanged, Clearview, and more. With the timely use of all these callbacks, we’re going to implement reordering in RecyclerView.

Implementing ItemTouchHelper

First, we need to create a Kotlin class and extend it with ItemTouchHelper.Callback. Then we override the getMovementFlags, onMove, and onSwiped functions, as shown below:

The onSwipe function is used to detect the RecyclerView item swipe, which is not necessary now.

Now, let’s see the other two functions: getMovementFlags and onMove.

getMovementFlags is a function through which we can register movement flags to RecyclerView items. We can register swipe and drag flags using the makeMovementFlags function. Have a look:

Here, I’ve registered both swipe and drag. If you don’t want to include swipe functionality, then pass 0 as the second parameter. Our goal is to implement a reorder feature on a vertical RecyclerView, so I’ve included UP and DOWN drag flags. Which one is used will change based on the list’s orientation.

Next, the onMove function. It’s executed when ItemTouchHelper wants to move the dragged item from its old position to the new position. It has three parameters:

• @param recyclerView — The RecyclerView to which ItemTouchHelper is attached.
• @param viewHolder — The ViewHolder that is being dragged by the user.
• @param target — The ViewHolder over which the currently active item is being dragged.

Boolean is the return type of the function. If you intend for a reorder to happen, then you need to pass true. We can restrict the reorder to specific positions or view types by passing false if necessary.

We have source and target ViewHolders that need to be updated in the adapter. Now we need a bridge between the adapter and reorder item helper. For this purpose, we have to create an interface and pass it in the constructor of the item helper from the adapter to trigger the reorder updates. Have a look at the interface:

Now we need to take this interface as a parameter in the constructor, as shown below:

class ReorderHelperCallback(val adapter : ItemTouchHelperAdapter) 
    : ItemTouchHelper.Callback() {

We will use this adapter interface inside the onMove function to communicate with the actual recyclerView adapter:

At this point, we’re pretty much done with the core logic. By default, a reorder will trigger on a long press of the RecyclerView item. But what if you wish to offer a reorder button to make it easy for the users? We can do that!

We need to create another interface and name it OnStartDragListener. It has only one function that is executed when a view is requested to start the drag. Have a look:

This interface is used in the ViewHolder to trigger movement, which you’ll see in the next section of this article.

RecyclerView Holder

First, we need to implement a general RecyclerView holder. Here, I will use ViewBinding to reference the views from the layout. If you’re new to this, please read this article before going any further.

Have a look at a simple ViewHolder with ViewBinding and a data class:

This is fine, but if you want to trigger a reorder from a specific view, we need to do it from the ViewHolder. To invoke drag, we’ve created the OnStartDragListener interface. Here, we need to pass the instance of it via a ViewHolder constructor and invoke onStartDrag inside the touch listener of that view:

RecyclerView Adapter

Again, we need to implement a simple RecyclerView adapter with the necessary functionality (e.g. onCreateViewHolder, onBindViewHolder, and more). Have a look:

Now that we’re done with the basic functionality, it’s time to implement the reorder functionality. We have created the ItemTouchHelperAdapter interface to listen when an item has been dragged far enough to trigger a move. This will override the onItemMove function in which we will swap the array item and update the UI using the notifyItemMoved function. Have a look:

Implementing Reorder

Finally, we’re done with ItemTouchHelper, the adapter, ViewHolder, and interfaces. It’s time to assign the adapter to RecyclerView. To create the instance of the reorder adapter, we need the OnStartDragListener instance. We just need to extend the Android component (in this case, it’s activity) with OnStartDragListener and pass the activity context. Have a look:

Next, we need to create a ReorderHelperCallback instance and use it as a callback for ItemTouchHelper, which we will attach to the actual RecyclerView:

That’s all! You’ve successfully implemented RecyclerView to reorder items without any third-party libraries!

Bonus

To learn more about RecyclerView adapters in Android, read the following articles:

• Building a Reactive & Heterogeneous Adapter in Kotlin
• Evolution of Adapters in Android
• How to Merging Adapters Sequentially in Android
• Android RecyclerView With Kotlin Sealed Classes

GitHub Repo

That is all for now. I hope you learned something useful. Thanks for reading!