Skip to main content

How to implement drag and drop functionality in a RecyclerView in Kotlin Android

How to implement drag and drop functionality in a RecyclerView in Kotlin Android.

Here is a step-by-step tutorial on how to implement drag and drop functionality in a RecyclerView in Kotlin Android:

Step 1: Set up the project​

  • Create a new Android project in Kotlin.
  • Add the RecyclerView dependency in your app-level build.gradle file:
implementation 'androidx.recyclerview:recyclerview:1.2.1'

Step 2: Create the layout files​

  • Create a new layout file called item_list.xml for the RecyclerView item layout. This will be the layout for each item in the list.
  • Create a new layout file called activity_main.xml for the main activity layout. This will contain the RecyclerView.

Step 3: Define the RecyclerView item layout​

  • Open the item_list.xml file and add the necessary views and styling for each item in the list. This can be a simple layout with a single TextView, or a more complex layout depending on your requirements.

Step 4: Implement the RecyclerView adapter​

  • Create a new class called ItemAdapter and extend it from RecyclerView.Adapter<ItemAdapter.ViewHolder>.
  • Implement the necessary methods in the adapter:
    • onCreateViewHolder: Inflate the item layout and create a new ViewHolder object.
    • onBindViewHolder: Bind the data to the views in the ViewHolder.
    • getItemCount: Return the number of items in the list.
    • Add a ViewHolder class inside the adapter to hold references to the views in the item layout.

Step 5: Implement the drag and drop functionality​

  • In the ItemAdapter class, add a method called onItemMove to handle the drag and drop functionality:
fun onItemMove(fromPosition: Int, toPosition: Int) {
    // Reorder the items in the list
    Collections.swap(itemList, fromPosition, toPosition)
    // Notify the adapter that the data has changed
    notifyItemMoved(fromPosition, toPosition)
}
  • In the ItemAdapter class, add a method called onItemDismiss to handle the item dismissal when dragged outside the RecyclerView:
fun onItemDismiss(position: Int) {
    // Remove the item from the list
    itemList.removeAt(position)
    // Notify the adapter that the item has been removed
    notifyItemRemoved(position)
}

Step 6: Implement touch listeners in the ViewHolder​

  • In the ViewHolder class, implement the necessary touch listeners to handle the drag and drop functionality:
inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView), 
    ItemTouchHelperViewHolder {

    init {
        // Set the touch listeners on the itemView
        itemView.setOnTouchListener { _, event ->
            if (event.actionMasked == MotionEvent.ACTION_DOWN) {
                // Notify the ItemTouchHelper that this item is being moved
                itemTouchHelper.startDrag(this)
            }
            false
        }
    }

    // Implement the ItemTouchHelperViewHolder interface methods
    override fun onItemSelected() {
        // Apply any visual changes to indicate that the item is being dragged
        itemView.setBackgroundColor(ContextCompat.getColor(itemView.context, R.color.item_selected))
    }

    override fun onItemClear() {
        // Remove any visual changes made during the dragging process
        itemView.setBackgroundColor(ContextCompat.getColor(itemView.context, R.color.item_normal))
    }
}

Step 7: Set up the RecyclerView in the main activity​

  • In the MainActivity class, find the RecyclerView from the layout and set up the necessary components:
val recyclerView: RecyclerView = findViewById(R.id.recyclerView)
val itemAdapter = ItemAdapter(itemList)
val itemTouchHelper = ItemTouchHelper(ItemTouchHelperCallback(itemAdapter))
itemTouchHelper.attachToRecyclerView(recyclerView)
recyclerView.adapter = itemAdapter
recyclerView.layoutManager = LinearLayoutManager(this)

Step 8: Handle the drag and drop events​

  • Create a new class called ItemTouchHelperCallback and extend it from ItemTouchHelper.Callback.
  • Implement the necessary methods in the callback to handle the drag and drop events:
override fun isLongPressDragEnabled(): Boolean {
    return true
}

override fun isItemViewSwipeEnabled(): Boolean {
    return true
}

override fun onMove(
    recyclerView: RecyclerView,
    viewHolder: RecyclerView.ViewHolder,
    target: RecyclerView.ViewHolder
): Boolean {
    // Call the onItemMove method in the adapter to handle the item movement
    itemAdapter.onItemMove(viewHolder.adapterPosition, target.adapterPosition)
    return true
}

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
    // Call the onItemDismiss method in the adapter to handle the item dismissal
    itemAdapter.onItemDismiss(viewHolder.adapterPosition)
}

That's it! You have now implemented drag and drop functionality in a RecyclerView in Kotlin Android. You can customize the behavior and appearance further based on your specific requirements.