Summary

This tutorial guides through implementing a drag-and-drop feature to reorder items in a RecyclerView for an Android app using Kotlin.

Abstract

The article provides a comprehensive guide on adding drag-and-drop functionality to a RecyclerView in an Android application developed with Kotlin. It starts by setting up the RecyclerView with the necessary data class, item layout, adapter, and item population. The core of the tutorial focuses on using the ItemTouchHelper.Callback class to enable item reordering within the RecyclerView. The author explains each method override and its purpose, such as enabling long-press drag, handling item movement, and clearing the view after a drag operation. The article also includes an interface, ItemTouchHelperContract, to manage drag-and-drop callbacks within the adapter. Finally, the author demonstrates how to attach the ItemTouchHelper to the RecyclerView and provides a GIF showcasing the feature in action. The full source code is available on GitHub for reference.

Opinions

The author assumes familiarity with RecyclerView setup, indicating that this is an intermediate-level topic.
The use of code snippets and GIFs is appreciated as they provide visual context and aid in understanding the implementation.
The author encourages user interaction by asking for feedback and suggesting that readers share the article if they find it helpful.
There is an emphasis on the simplicity of the process once the ItemTouchHelper.Callback class is understood, suggesting that the complexity is manageable for developers with some Kotlin and Android experience.
The author seems enthusiastic about the feature, highlighting its coolness and the satisfaction of seeing it work in the app.

Drag to Reorder RecyclerView Items with Kotlin | Full Android Guide

Hey there! In this tutorial, we’ll be implementing drag and drop functionality for RecyclerView items in an Android Kotlin app.

Introduction

Picture this: you’re building a to-do list app. Users have their tasks lined up, and they can just tap, hold, and move items around as they please. Sounds cool, right? Let’s see how we can achive this!

Setting up the RecyclerView

I assume this isn’t anything new so I’ll get over it quickly.

Step 1: Define a data class for your item.

Step 2: Create the item layout.

Step 3: Add the RecyclerView element.

Step 4: Create a class for your RecyclerViewAdapter.

Step 5: Add some items to your RecyclerView.

Nice work! Before moving further, run the app and check if the items are being displayed.

Implementing Drag and Drop Reorder with ItemTouchHelper

Here comes the fun part!

To implement drag to reorder functionality in our RecyclerView, we’re going to use the ItemTouchHelper.Callback class, which simplifies the whole process. Here’s how:

Don’t freak out, I’ll explain in detail what happens here:

override fun isLongPressDragEnabled(): Boolean

This function returns a boolean indicating whether long press on an item should initiate dragging. By returning true, you allow users to start dragging an item by pressing and holding on it.

override fun isItemViewSwipeEnabled(): Boolean

This function returns a boolean indicating whether swipe actions are enabled on items (eg. for “swipe to delete” functionality). We don't need that so we return false.

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, i: Int)

This function is called when an item is swiped (again, we don’t need it).

override fun getMovementFlags(...)

This function determines the movement flags for dragging and swiping an item. In this case, ItemTouchHelper.UP or ItemTouchHelper.DOWN specifies that items can be dragged vertically.

override fun onMove(...)

This function is called when an item is being moved (dragged) from its original position to a new position. Here, we call adapter.onRowMoved(...) to inform the adapter about the movement.

override fun clearView(...)

This function is called when the ViewHolder’s animations are completed after an item drag. Here we call adapter.onRowClear(...) so we know when the user has finished dragging.

interface ItemTouchHelperContract

This is an interface nested within the ItemMoveCallback which defines methods that need to be implemented in our RecyclerViewAdapter to handle the drag-and-drop callbacks.

Got it? Alright, we’re almost done!

As I said, we need to implement onRowMoved in the RecyclerViewAdapter to actually reorder the itemList and notify the adapter about it.

We also override onRowClear because this is the right place to update the database once the user has finished reordering the list.

One more thing. Attach the ItemTouchHelper to your RecyclerView like this:

And there you have it! Your RecyclerView’s items can now be effortlessly dragged around. Here’s a sneak peek:

Thank you for reading! If this article was of some help, don’t forget to share it and follow me :)

Here’s the full code on GitHub, I’m sure you were looking for it.

By the way, what would you like to see in the next post? Let me know in the comments!