Member-only story
How To Display Multiple Android Bottom Sheets in Jetpack Compose
Build customizable Android apps
In this article, we’re going to learn how to show multiple bottom sheets based on user interactions. To learn the basics of bottom sheets in compose, I highly recommend you to read the article under the prerequisites section.
Introduction
Jetpack Compose is one of the recent attempts by Google to make it easy for Android developers to build UI.
“Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.” — Android Developers
Jetpack Compose is stable version 1.0 is released recently, which means it’s production-ready. So it would be a great time to learn how to work with the next-generation UI kit for Android development.
You will need to install Android Studio — Arctic Fox (2020.3.1) version to use the Jetpack Compose.
Prerequisites
Before going any further, you must have basic knowledge of how to work with Jetpack Compose. If you’re new to Compose, I highly recommend going through the following articles:
- Jetpack Compose Components (Part 1)
- Explore Android Bottom Sheets in Jetpack Compose
- Build Android Layouts in JetPack Compose
- Android Bottom Navigation Bar With Jetpack Compose
Design multiple interactions
After exploring bottom sheets in compose, which I documented here, I’m super excited to try how to show multiple bottom sheets based on user interactions. In order to do that first, we need to add multiple interactions in the actual layout, which in our case is simply three buttons. Have a look:
