Discovering Material3 for Android — SwipeToDismissBox

This series of articles is designed to help you explore the latest addition to Material 3 for Android. In this series, we will take a closer look at the different components and features of Material 3, and explore how they can be used to create modern and user-friendly Android apps.

Introduction

I’ve recently engaged in an interesting conversation with an iOS engineer about the swipe-to-delete gesture, a simple way in iOS to remove items from a list.

While this gesture might be ‘invisible’ on the screen, it is a well-known pattern among iOS users. Contrarily, in the Android world, this gesture has never been very intuitive.

More than ever, Material3 must offer components that can be used on platforms other than Google. Yes, I am thinking about you Compose Multiplatform and more especially any platform if you are creating a design system.

Please show me the code

At its core, SwipeToDismissBox allows elements within an app to be dismissed with a simple swipe gesture.

It’s a bit more generic than “swipe to dismiss” (yes, not sure about the name here). You can perform two kinds of actions: swipe from start to end and swipe from end to start.

The Google Material team ensures new components are open to customization. The swipe and color management could just as well have been prepared in the component, but Google prefers to give developers more flexibility. Therefore, to offer a component similar to what we find on iOS, I will encapsulate the SwipeToDismissBox in this way :

Finally, we put our SwipeToDismissListItemwithin a LazyList:

Here is some funny data if you want to experiment:

Conclusion

This component, familiar to iOS users, brings a nice hidden feature to your power user in any Android application. By introducing this swipe gesture, into Android apps, we’re not just adding a new feature; we’re building a bridge of familiarity for users traversing between these two platforms. Convergence is already here…