BottomSheet in Jetpack Compose: Implementation & Customization

Bottom Sheet is a widely used UI element in Android apps that appears as a sheet sliding up from the bottom of the screen, partially covering the content below it. It is used to display contextual information or actions that are related to the current screen or task the user is performing.

Bottom sheets can be either Modal or Persistent. Modal Bottom Sheets are used for displaying contextual information or actions that require user attention, while Persistent Bottom Sheets are used to display content that the user may want to access frequently, such as settings or music controls.

In jetpack compose, we are provided with two different Composables which can create a bottom sheet for us depending on your use case.

ModalBottomSheetLayout is a modal window that does not allow you to interact with the rest of the screen. It will collapse if you touch the dimmed part of the screen.

BottomSheetScaffold is a persistent window that does allow you to interact with the rest of the screen. It allows you to keep the bottomSheet on the screen all the time.

Today, we will be Implementing and customizing BottomSheetScaffold, but if you want to implement ModalBottomSheetLayout in your project, then you can check THIS ARTICLE.

Output:

Let’s Go:

BottomSheetScaffold provides the Slot API, it is a container. So, while creating your Home screen use this as a container. It accepts all standard scaffold items as parameter. Additionally, just a sheetContent param compose for bottomSheet.

@Composable
@ExperimentalMaterialApi
fun BottomSheetScaffold(
    sheetContent: @Composable ColumnScope.() -> Unit,
    scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
    topBar: (@Composable () -> Unit)? = null,
    .....
    content: @Composable (PaddingValues) -> Unit
)

It also takes scaffold state as a param. So, we will be also using this.

val scaffoldState = rememberBottomSheetScaffoldState(
    //Initially, we need the sheet to be closed
    bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)
BottomSheetScaffold(
    scaffoldState = scaffoldState
){
  //Main Screen Content here
}

Now, we will customize it a little bit..

BottomSheetScaffold(
    ..
    sheetShape = RoundedCornerShape(20.dp),//Rounded corners
    sheetElevation = 20.dp,//To provide Shadow
    sheetPeekHeight = 200.dp,//Initial height of sheet[Collapsed]{maybe too much 4 u}
    sheetContent = {
        MyBottomSheet()//Create a sheet Composable
    }
)

//Design for sheet
@Composable
fun MyBottomSheet() {
    Column(
        modifier = Modifier
            .fillMaxSize()//Do this to make sheet expandable
            .background(Color.Black.copy(0.2f))
            .padding(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(//Using this to create a kind of Icon that tells the user that the sheet is expandable
            modifier = Modifier
                .height(3.dp)
                .width(70.dp)
                .background(Color.White)
        )
        Spacer(//Another spacer to add a space
            modifier = Modifier
                .height(20.dp)
        )
        Text(text = "Bottom Sheet")
    }
}

Current output:

If you want to limit the max height of the sheet, then use the heightIn() method in Modifier of BottomSheet content.

fun MyBottomSheet() {
    Column(
        modifier = Modifier
            .heightIn(min = 200.dp, max = 300.dp)//This will set the max height
            .fillMaxSize()
            ....
    )
    ....
}

Fixed Height:

That’s it! Now you can add the content of your bottom sheet in a new composable and have some extra features for your screen.

Also, adding the “TopBar”, “FAB”, “Drawer”, and Main screen content will be same as in Scaffold.

Full code here: https://github.com/Sagar0-0/Sunlight/blob/master/app/src/main/java/com/example/sunlight/ui/screens/Home.kt

I hope you found this helpful. If yes, then do FOLLOW ‘Sagar Malhotra’ for more Android-related content.

#androidWithSagar #android #androiddevelopment #development #compose #kotlin