Android Jetpack Compose - Swipe-to-Dismiss with Material 3

Swipe-to-dismiss functionality is a widely-used interaction pattern that allows users to easily remove items from a list or dismiss cards by swiping them off the screen. In this article, we will explore how to implement swipe-to-dismiss in Jetpack Compose with the new Material 3 components. We will use an email app as an example to demonstrate the usage of swipe-to-dismiss in a real-world scenario.

Overview of Swipe-to-Dismiss

Swipe-to-dismiss is a gesture-based interaction pattern that allows users to remove items from a list or dismiss cards by swiping them horizontally. It provides a convenient way for users to interact with content and manage their data efficiently. Implementing swipe-to-dismiss in Jetpack Compose with Material 3 involves using the SwipeToDismissBox composable along with the new Material 3 components.

Step by Step Implementation

To demonstrate the swipe-to-dismiss functionality, we will create a simple email app using the new Material 3 components. The app will display a list of email messages, and users will be able to swipe left or right to dismiss individual messages. We will use Jetpack Compose LazyColumn to display the list of email items.

Step 1: Create a New Project in Android Studio

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Create a data class for Email Message

This data class represents an email message within the email application. It contains two properties the sender and the receiver similar to email. The EmailMessage data class is used to encapsulate the essential information related to an email message, allowing easy access and manipulation of its sender and message content.

EmailMessage.kt:

Step 3: Create a viewmodel

Create a new Kotlin class with the name EmailViewModel.kt. This class is responsible for managing email messages in the email application. This class acts as the intermediary between the UI components and the data source, handling the state and operations related to email messages. It provides methods for updating and manipulating the list of messages.

EmailViewModel.kt:

Step 4: Create a composable for a Email Message Card

Each email item in the list will be represented by the EmailMessageCard composable. This composable will display the sender's name, message content, and a person icon using the Material 3 components. The EmailMessageCard will be responsible for rendering the visual representation of the email message.

EmailMessageCard.kt:

Step 5: Create a composable for Dismiss Background

To provide visual feedback during the swipe-to-dismiss action, we need to create the DismissBackground composable. This composable will use the Row and Icon composables. The DismissBackground composable will be used as the background for each email item.

Step 6: Create a composable for an Email Item with Swipe-to-Dismiss feature

To enable swipe-to-dismiss functionality, we will use the SwipeToDismissBox composable provided by the Material 3 library. SwipeToDismissBox is a composable that can be dismissed by swiping left or right.

Parameters:

• state - The state of this component.
• backgroundContent - A composable that is stacked behind the content and is exposed when the content is swiped.
• modifier - Optional Modifier for this component.
• enableDismissFromStartToEnd - Whether SwipeToDismissBox can be dismissed from start to end.
• enableDismissFromEndToStart - Whether SwipeToDismissBox can be dismissed from end to start.
• content - The content that can be dismissed

The SwipeToDismissBox composable allows us to wrap the email item and the dismiss actions together.

EmailItem.kt:

Step 7: Working with MainActivity

Once we have implemented the swipe-to-dismiss functionality, it's important to thoroughly check it. We should verify that swiping left or right on an email item correctly triggers the dismiss action and removes the item from the list. The MainActivity is an Android Component Activity a subclass that serves as the entry point for the Swipe to Dismiss feature in the email application. In the onCreate() method, the activity sets its content using the setContent function, which inflates the UI layout and displays the Email App composable. Run the application and check the output.

MainActivity.kt:

Output: