Bottom Sheet in Jetpack Compose

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.

Getting Started

If you created your project with Empty Compose Activity template, you can skip this part but don’t forget to check versions and if necessary, update them. How to create Compose app?

Implementation

First, we set our state variable and coroutine scope.

confirmStateChange is necessary to control the behavior of bottom sheet. If you set confirmStateChange = { false } user will not be able to dismiss bottom sheet by dragging or tapping outside.

skipHalfExpandedWhether the half expanded state, if the sheet is tall enough, should be skipped. If true, the sheet will always expand to the Expanded state and move to the Hidden state when hiding the sheet, either programmatically or by user interaction.

Now we will create our bottom sheet UI,

sheetShape is optional and totally up to you. I like to add it to give more rounded look to the bottom sheet.

sheetContent is where you put your bottom sheet UI. In our example we have Button which dismisses the bottom sheet on click.

As we can see from the example, we use coroutineScope to change bottom sheet state since modalSheetState.hide and modalSheetState.animateTo are suspendedfunctions.

Finally, inside of our Scaffoldwe have Button which expands bottom sheet on click.

Thats it! It’s very easy to create and manage bottom sheet with Jetpack Compose.

Extras

Dismiss On Back

With this simple code, we can close bottom sheet on back button press if visible.

Toggle Between Fullscreen & Expanded

First, we create isSheetFullScreen state variable and set roundedCornerRadius and modifier variables which will change on isSheetFullScreen state change. e.g., if isSheetFullScreen is true corner radius will be 0 else it’ll change to 12.

Finally, we are changing the state on Button click. If you want to present your bottom sheet only full screen, you can delete all states and simply change, Modifier.fillMaxWidth to Modifier.fillMaxSize.

Full Code with Extras

That’s it for this blog, I hope it was useful. 👋👋

You can contact me on,

• LinkedIn
• Github
• Twitter