Swipe to dismiss in Android Kotlin

Introduction

Swipe to dismiss lets users remove items from a list by swiping them away. It makes apps feel natural and easy to use.

When you want users to delete emails by swiping them left or right.

To let users remove tasks from a to-do list quickly.

When you want to clear notifications by swiping them away.

To allow users to dismiss messages in a chat app.

When you want to provide a fast way to remove items from a shopping cart.

Syntax

Android Kotlin

val itemTouchHelper = ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT) {
    override fun onMove(
        recyclerView: RecyclerView,
        viewHolder: RecyclerView.ViewHolder,
        target: RecyclerView.ViewHolder
    ): Boolean {
        return false
    }

    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        // Handle item dismissal here
    }
})

itemTouchHelper.attachToRecyclerView(recyclerView)

Use ItemTouchHelper.SimpleCallback to detect swipe gestures.

Override onSwiped to define what happens when an item is swiped away.

Examples

Remove the swiped item from the list and notify the adapter to update the UI.

Android Kotlin

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
    val position = viewHolder.adapterPosition
    myList.removeAt(position)
    adapter.notifyItemRemoved(position)
}

Allow swipe only to the right side.

Android Kotlin

val itemTouchHelper = ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT) {
    override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder) = false
    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        // Only allow swipe to the right
    }
})

Sample App

This app shows a list of fruits. You can swipe any fruit left or right to remove it from the list. The list updates immediately.

Android Kotlin

class MainActivity : AppCompatActivity() {
    private lateinit var recyclerView: RecyclerView
    private val items = mutableListOf("Apple", "Banana", "Cherry", "Date", "Elderberry")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        recyclerView = RecyclerView(this).apply {
            layoutManager = LinearLayoutManager(this@MainActivity)
            adapter = object : RecyclerView.Adapter<MyViewHolder>() {
                override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
                    val textView = TextView(parent.context).apply {
                        textSize = 20f
                        setPadding(20, 20, 20, 20)
                    }
                    return MyViewHolder(textView)
                }

                override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
                    (holder.itemView as TextView).text = items[position]
                }

                override fun getItemCount() = items.size
            }
        }
        setContentView(recyclerView)

        val itemTouchHelper = ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT) {
            override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder) = false

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                val position = viewHolder.adapterPosition
                items.removeAt(position)
                recyclerView.adapter?.notifyItemRemoved(position)
            }
        })
        itemTouchHelper.attachToRecyclerView(recyclerView)
    }

    class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView)
}

Important Notes

Make sure to update your data source when an item is dismissed to keep UI and data in sync.

You can customize swipe directions by changing the flags in SimpleCallback.

Consider adding an undo option to improve user experience after dismissing.

Summary

Swipe to dismiss lets users remove list items by swiping left or right.

Use ItemTouchHelper.SimpleCallback and override onSwiped to handle the swipe.

Always update your data and notify the adapter to keep UI consistent.

Practice

1.

What is the main purpose of implementing onSwiped in ItemTouchHelper.SimpleCallback when using swipe to dismiss?

easy

A. To change the background color of the list item

B. To add a new item to the list

C. To disable swipe gestures on the list

D. To remove the swiped item from the data and update the UI

Solution

1. Step 1: Understand the role of onSwiped

   This method is called when a user swipes an item. It is used to handle what happens after the swipe gesture.

2. Step 2: Identify the correct action after swipe

   The typical action is to remove the swiped item from the data source and notify the adapter to update the UI.

3. Final Answer:

   To remove the swiped item from the data and update the UI -> Option D

4. Quick Check:

   onSwiped removes item [OK]

Hint: Remember: swipe means remove item and refresh list [OK]

Common Mistakes:

• Trying to add items in onSwiped
• Ignoring data update after swipe
• Using onSwiped to change colors only

2.

Which of the following is the correct way to create a SimpleCallback for swipe to dismiss only (no drag) in Kotlin?

val callback = object : ItemTouchHelper.SimpleCallback(?, ?) {}

easy

A. 0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT

B. ItemTouchHelper.UP or ItemTouchHelper.DOWN, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT

C. ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT, 0

D. ItemTouchHelper.UP or ItemTouchHelper.DOWN, 0

Solution

1. Step 1: Understand SimpleCallback constructor parameters

   The first parameter is for drag directions, the second for swipe directions.

2. Step 2: Set drag to 0 and swipe to left or right

   For swipe to dismiss only, drag should be 0 and swipe should allow left or right.

3. Final Answer:

   0, ItemTouchHelper.LEFT or ItemTouchHelper.RIGHT -> Option A

4. Quick Check:

   Drag=0, Swipe=LEFT|RIGHT [OK]

Hint: Drag=0 disables drag; swipe=LEFT|RIGHT enables swipe [OK]

Common Mistakes:

• Swapping drag and swipe parameters
• Using drag directions when only swipe needed
• Setting swipe to 0 disables swipe

3.

Given this code snippet inside onSwiped:

val position = viewHolder.adapterPosition
items.removeAt(position)
adapter.notifyItemRemoved(position)

What will happen when the user swipes an item?

medium

A. The item remains but the UI flashes

B. The item is removed from the list and the UI updates to reflect the change

C. The app crashes due to invalid position

D. Nothing happens because notifyItemRemoved is missing

Solution

1. Step 1: Remove item from data list

   The code removes the item at the swiped position from the data list.

2. Step 2: Notify adapter about removal

   Calling notifyItemRemoved updates the UI to remove the item visually.

3. Final Answer:

   The item is removed from the list and the UI updates to reflect the change -> Option B

4. Quick Check:

   Remove item + notify adapter = UI updates [OK]

Hint: Remove data then notify adapter to update UI [OK]

Common Mistakes:

• Not removing item from data list
• Forgetting to notify adapter
• Using wrong adapter position

4.

What is wrong with this onSwiped implementation?

override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
    adapter.notifyItemRemoved(viewHolder.adapterPosition)
    items.removeAt(viewHolder.adapterPosition)
}

medium

A. The adapter position is not valid inside onSwiped

B. The method is missing a call to super.onSwiped

C. Calling notifyItemRemoved before removing item causes UI inconsistency

D. Nothing is wrong; this code works fine

Solution

1. Step 1: Check order of operations

   notifyItemRemoved should be called after removing the item from the data list.

2. Step 2: Understand impact of wrong order

   Calling notifyItemRemoved first causes the adapter to update UI before data changes, leading to inconsistency or crash.

3. Final Answer:

   Calling notifyItemRemoved before removing item causes UI inconsistency -> Option C

4. Quick Check:

   Remove data first, then notify adapter [OK]

Hint: Always update data before notifying adapter [OK]

Common Mistakes:

• Not removing item before notify
• Calling super.onSwiped unnecessarily
• Using wrong adapter position

5.

You want to implement swipe to dismiss in a RecyclerView but only allow swipe to the right. Which code snippet correctly sets up the SimpleCallback and handles the swipe?

val callback = object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT) {
    override fun onMove(...) = false
    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        val pos = viewHolder.adapterPosition
        items.removeAt(pos)
        adapter.notifyItemRemoved(pos)
    }
}
ItemTouchHelper(callback).attachToRecyclerView(recyclerView)

hard

A. This code allows swipe only to the right and removes the item correctly

B. This code allows swipe both left and right

C. This code will crash because onMove is not implemented properly

D. This code does not remove the item from the list

Solution

1. Step 1: Check swipe directions in SimpleCallback

   Swipe is set to ItemTouchHelper.RIGHT only, so only right swipe is allowed.

2. Step 2: Verify onSwiped removes item and notifies adapter

   onSwiped removes the item at adapterPosition and calls notifyItemRemoved correctly.

3. Step 3: Confirm onMove returns false

   Returning false disables drag, which is intended here.

4. Final Answer:

   This code allows swipe only to the right and removes the item correctly -> Option A

5. Quick Check:

   Swipe=RIGHT only + remove item + notify adapter [OK]

Hint: Set swipe directions and remove item in onSwiped [OK]

Common Mistakes:

• Setting swipe to LEFT or both directions
• Not removing item from data list
• Returning true in onMove causing drag