Bottom Sheet in Jetpack Compose
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 theExpandedstate and move to theHiddenstate 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. 👋👋
