Drag-and-Drop Reordering in RecyclerView: Kotlin XML Implementation

Implementing drag-and-drop reordering in a RecyclerView using Kotlin and XML can greatly enhance user experience, allowing users to customize the order of items easily. This functionality is particularly useful in applications like task managers, playlist editors, or any list where order matters. This post will guide you through the steps to add drag-and-drop reordering to your RecyclerView.

What is Drag-and-Drop Reordering in RecyclerView?

Drag-and-drop reordering refers to the ability of a user to press and hold an item in a list (RecyclerView), drag it to a new position, and drop it, thereby reordering the list. This intuitive interaction can significantly improve usability in various apps.

Why Implement Drag-and-Drop?

  • Improved User Experience: Intuitive way for users to customize lists.
  • Increased Engagement: Provides more control to the user, enhancing app satisfaction.
  • Enhanced Functionality: Useful for tasks requiring ordered lists, such as prioritizing tasks or organizing content.

Steps to Implement Drag-and-Drop Reordering in RecyclerView

To implement drag-and-drop reordering, you’ll need to use the ItemTouchHelper class in Android, along with Kotlin and XML for the layout.

Step 1: Add Dependencies

First, make sure your build.gradle file includes the necessary dependencies for RecyclerView and AndroidX support libraries:


dependencies {
    implementation("androidx.recyclerview:recyclerview:1.3.2")
    implementation("androidx.appcompat:appcompat:1.6.1")
    implementation("androidx.core:core-ktx:1.12.0")
    implementation("com.google.android.material:material:1.12.0")
    // Add other dependencies as needed
}

Step 2: Create the RecyclerView Layout

Define the RecyclerView in your XML layout file (e.g., activity_main.xml):


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        tools:listitem="@layout/list_item"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3: Create the RecyclerView Item Layout

Create an XML layout for each item in the RecyclerView (e.g., list_item.xml):


<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="16dp">

        <ImageView
            android:id="@+id/handleImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_drag_handle"
            android:contentDescription="Drag Handle"/>

        <TextView
            android:id="@+id/itemTextView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Item Text"
            android:textSize="18sp"
            android:layout_marginStart="16dp"
            android:layout_gravity="center_vertical"/>

    </LinearLayout>

</androidx.cardview.widget.CardView>

Add the vector asset ic_drag_handle which represents a drag handle icon in the `drawable` directory. It allows the user to understand, which part of the layout is responsible for reordering.


<vector android:height="24dp" android:tint="#707070"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M20,9H4V3H20V9ZM4,11H20V17H4V11ZM2,19H22V21H2V19Z"/>
</vector>

Step 4: Create the RecyclerView Adapter

Create an adapter for your RecyclerView:


import android.annotation.SuppressLint
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.dragreorder.R
import java.util.Collections

class ItemAdapter(private val items: MutableList) :
    RecyclerView.Adapter() {

    class ItemViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.itemTextView)
        val handleImageView: ImageView = itemView.findViewById(R.id.handleImageView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false)
        return ItemViewHolder(view)
    }

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        holder.textView.text = items[position]
    }

    override fun getItemCount(): Int = items.size

    @SuppressLint("NotifyDataSetChanged")
    fun onItemMove(fromPosition: Int, toPosition: Int) {
        if (fromPosition < toPosition) {
            for (i in fromPosition until toPosition) {
                Collections.swap(items, i, i + 1)
            }
        } else {
            for (i in fromPosition downTo toPosition + 1) {
                Collections.swap(items, i, i - 1)
            }
        }
        notifyItemMoved(fromPosition, toPosition)
    }

    @SuppressLint("NotifyDataSetChanged")
    fun removeItem(position: Int) {
        items.removeAt(position)
        notifyItemRemoved(position)
    }

}

Step 5: Implement ItemTouchHelper Callback

Create a class that extends ItemTouchHelper.Callback to handle the drag-and-drop and swipe-to-delete actions:


import androidx.recyclerview.widget.ItemTouchHelper
import androidx.recyclerview.widget.RecyclerView

class ItemTouchHelperCallback(private val adapter: ItemAdapter) : ItemTouchHelper.Callback() {

    override fun isLongPressDragEnabled(): Boolean {
        return false // Enable drag with handle
    }

    override fun isItemViewSwipeEnabled(): Boolean {
        return false // Disable swipe
    }

    override fun getMovementFlags(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder): Int {
        val dragFlags = ItemTouchHelper.UP or ItemTouchHelper.DOWN
        val swipeFlags = ItemTouchHelper.START or ItemTouchHelper.END
        return makeMovementFlags(dragFlags, swipeFlags)
    }

    override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder,
                              target: RecyclerView.ViewHolder): Boolean {
        adapter.onItemMove(viewHolder.adapterPosition, target.adapterPosition)
        return true
    }

    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        // implement your swipe logic here
    }

    override fun onSelectedChanged(viewHolder: RecyclerView.ViewHolder?, actionState: Int) {
        super.onSelectedChanged(viewHolder, actionState)
        if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
            viewHolder?.itemView?.alpha = 0.5f
        }
    }

    override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
        super.clearView(recyclerView, viewHolder)
        viewHolder.itemView.alpha = 1.0f
    }
}

Step 6: Implement the Activity

In your main activity, initialize the RecyclerView, adapter, and attach the ItemTouchHelper:


import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.ItemTouchHelper
import com.example.dragreorder.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var recyclerView: RecyclerView
    private lateinit var itemAdapter: ItemAdapter
    private lateinit var itemTouchHelper: ItemTouchHelper


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Sample data
        val items = mutableListOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")

        // RecyclerView setup
        recyclerView = binding.recyclerView
        recyclerView.layoutManager = LinearLayoutManager(this)
        itemAdapter = ItemAdapter(items)
        recyclerView.adapter = itemAdapter

        val callback = ItemTouchHelperCallback(itemAdapter)
        itemTouchHelper = ItemTouchHelper(callback)
        itemTouchHelper.attachToRecyclerView(recyclerView)

    }

}

Be sure you have enabled binding in your build.gradlefile:


android {
    ...
    buildFeatures {
        viewBinding = true
    }
}

and synchronized gradle.

Step 7: Implement Drag Handling in ViewHolder

Implement logic to start dragging the item on touching drag handle image view.


import android.annotation.SuppressLint
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.example.dragreorder.R
import androidx.core.view.MotionEventCompat
import java.util.Collections

class ItemAdapter(private val items: MutableList) :
    RecyclerView.Adapter() {

    class ItemViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textView: TextView = itemView.findViewById(R.id.itemTextView)
        val handleImageView: ImageView = itemView.findViewById(R.id.handleImageView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_item, parent, false)
        return ItemViewHolder(view)
    }

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        holder.textView.text = items[position]
                holder.handleImageView.setOnTouchListener { v, event ->
            if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) {
                itemTouchHelper.startDrag(holder)
            }
            false
        }
    }

    override fun getItemCount(): Int = items.size

    @SuppressLint("NotifyDataSetChanged")
    fun onItemMove(fromPosition: Int, toPosition: Int) {
        if (fromPosition < toPosition) {
            for (i in fromPosition until toPosition) {
                Collections.swap(items, i, i + 1)
            }
        } else {
            for (i in fromPosition downTo toPosition + 1) {
                Collections.swap(items, i, i - 1)
            }
        }
        notifyItemMoved(fromPosition, toPosition)
    }

    @SuppressLint("NotifyDataSetChanged")
    fun removeItem(position: Int) {
        items.removeAt(position)
        notifyItemRemoved(position)
    }

}

After you’ve followed these steps, your RecyclerView will support drag-and-drop reordering. You can expand on this foundation by adding visual cues during dragging or incorporating animations to make the reordering process even smoother.

Conclusion

Implementing drag-and-drop reordering in a RecyclerView enhances the user experience, offering a straightforward way to customize the order of items in a list. By leveraging the ItemTouchHelper and customizing the adapter, you can provide users with an intuitive interface for organizing content, increasing the usability and appeal of your application.

Beyond This Article: Your Next Discovery Awaits

Loading Images from Drawables in Kotlin: An Android ImageView Guide
Adapters in Kotlin: Spinner and ListView Implementation Tutorial
Composable Destinations and Routes: Navigation in Jetpack Compose
Profile GPU Rendering: Optimize Android Apps with Kotlin & XML
Vector Drawables in Android: A Kotlin XML Development Guide
Android Views and Widgets in Kotlin XML Development: A Comprehensive Guide
Tagged with , , , , , , , , ,