Swipe to dismiss in Android Kotlin - UI Render Trace

Component - Swipe to dismiss

This UI component allows users to remove items from a list by swiping them left or right. It is commonly used to quickly delete or archive items, like emails or messages, with a simple gesture.

Widget Tree

RecyclerView
└── ItemViewHolder
    └── SwipeDismissBehavior
        └── ItemView

The RecyclerView displays a scrollable list of items. Each item is managed by an ItemViewHolder. SwipeDismissBehavior is attached to each item view to detect swipe gestures. When a swipe is detected, the item view animates out and is removed from the list.

Render Trace - 5 Steps

Step 1: RecyclerView

Step 2: ItemViewHolder

Step 3: SwipeDismissBehavior

Step 4: ItemView

Step 5: RecyclerView Adapter

State Change - Re-render

Trigger:User swipes an item horizontally beyond the dismissal threshold

Before

List shows all items including the swiped one

→

After

Swiped item is removed from the list and no longer visible

Re-renders:RecyclerView updates only the affected item and shifts remaining items

UI Quiz - 3 Questions

What happens when you swipe an item halfway across the screen?

A Nothing happens until you tap the item

B The item immediately disappears without animation

C The item moves with the finger and may be dismissed if swiped far enough

D The entire list scrolls instead of the item moving

Key Insight

Swipe to dismiss improves user experience by letting users quickly remove items with a natural gesture. It requires smooth animations and careful state updates to keep the list consistent and responsive.

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