Bottom Sheet in Jetpack Compose

As we can see Jetpack Compose grows like crazy. Last week they announced that Jetpack Compose went to Beta! Today we will talk about how to create bottom sheets in Jetpack Compose.

To implement the bottom sheet, we need to use BottomSheetScaffold. It was annotated as an ExperimentalApi, so to use it we need to add @ExperimentalMaterialApi annotation to the method where we will use.

Let’s look at this code block closely.

First, we define bottomSheetScaffoldState which will hold the state of BottomSheetScaffold. In turn it holds drawerState, bottomSheetState, snackbarHostState. In this tutorial, we focus only on bottomSheetState

sheetContent — defines the content of our Bottom Sheet. You put any composable you want.

sheetPeekHeight — sets the peek height of the Bottom Sheet. We will use 0.dp to hide the Bottom Sheet when the app starts.

So to interact with Bottom Sheet, we just must use these methods:

bottomSheetScaffoldState.bottomSheetState.expand() — to expand

bottomSheetScaffoldState.bottomSheetState.collapse() — to collapse

But these methods are suspend functions and that’s why they must be used in CoroutineScope.

For this purpose we can use rememberCoroutineScope to create coroutineScope .

coroutineScope.launch {
    if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
        bottomSheetScaffoldState.bottomSheetState.expand()
    } else {
        bottomSheetScaffoldState.bottomSheetState.collapse()
    }
}

Now run our app and see what happens:

Conclusion

Today we used BottomSheetScaffold to create a Scaffold template with a Bottom Sheet. It allows easily to add a bottom sheet and has collapse/expand and swipe features out of the box.

Feel free to follow me on Twitter, also don’t hesitate to ask questions related to this.

Twitter : https://twitter.com/a_rasul98

Thanks for reading, and see you later!