Implement Bottom Sheet in Jetpack Compose
A short guide for developers
Jetpack Compose brings us so many good things. Working on UI is just a pleasure compared to an XML. One of the things it brings us is the out-of-the-box way to implement bottom sheets. No need to include any dependency. Everything is already there.
“Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and simple dialogs, providing additional room for content, iconography, and actions.” According to the official documentation
We are gonna use ModalBottomSheetLayout which has its own state that we need to remember. So let’s get on with it.
First, we are gonna create sheetState:
There are three ModalBottomSheetValues:
HiddenExpandedHalfExpanded
The first two are describing enough. HalfExpanded will only show half of the bottom sheet, and this state is enabled only if the height of the bottom sheet is more than 50% of the screen height.
confirmStateChange is an optional callback invoked to confirm or veto a pending state change. With a value like that, we are blocking HalfExpanded bottom sheet value.
Don’t forget to add @OptIn(ExperimentalMaterialApi::class) as this is all still experimental.
Next, we can now implement ModalBottomSheetLayout and inside its content put the whole screen. Our screen will look like this:
As we can see, we put our screen composables inside the ModalBottomSheetLayout’s content. Also, we pass sheetState as an argument.BackHandler is an effect for handling presses of the system back button. The first argument is when it is enabled, and the second is what it should do when the system back button is pressed.
In this case, we just want to hide the bottom sheet if it is shown and the system back button is pressed.
Button inside the Column is showing and hiding the bottom sheet. sheetState.show() will show the bottom sheet with animation and sheetState.hide() will hide the bottom sheet with animation.
And the last thing that we need to see here is BottomSheet composable:
Which is a really simple column filled with some text. You can put here whatever you want.
If you want to have some buttons that do something, you will just communicate via callbacks with the main composable.
This is pretty simple logic but very useful to know. One note here, the logic for showing and hiding the bottom sheet is put in the UI, but it should be handled by the ViewModel. That is a little bit out of the scope of this article, as I just wanted to show how you can create a bottom sheet.
That would be all for this article. I hope you liked it!
All of the source code you can find in my GitHub repo.
Want to Connect?GitHub
Portfolio website
If you want to learn about requesting permissions in Jetpack Compose, take a look at these articles:
