BottomSheet in Jetpack Compose

How to build Bottom Sheet using Jetpack Compose

What is Bottom sheet ?

Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code.

In this tutorial we will learn to create Bottom Sheet one of the most useful component in Material Design. It provides an easy way just like menu for displaying the components and menu option.

It looks more stylish and attractive than Drop Down Menu that is similar in use.

Bottom Sheet

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen just like bottom app bar but it animates from the bottom of the screen and it can hold more components than Bottom App bar. 

Drag handle (optional)- The top 48dp portion of the bottom sheet is interactive when user-initiated resizing is available and the drag handle is present.

Read Also Splash Screen in Jetpack Compose

There are two types of bottom sheets:

1. Standard and

2. Modal

Steps

All tutorials are based on Latest Version of Android Studio (Flamingo)

Create a New Project  select Empty Activity.

MainActivity

package com.example.artofcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.example.artofcompose.ui.theme.ArtOfComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ArtOfComposeTheme {
                StandardBottomSheetScreen()
              //  ModalBottomSheetScreen()

                /*Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }*/
            }
        }
    }
}

Now create a separate  new file for BottomSheet

Bottom Sheet

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalBottomSheetScreen() {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    val coroutineScope = rememberCoroutineScope()
    var isSheetOpen by remember { mutableStateOf(false) }

    Scaffold { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Button(onClick = { isSheetOpen = true }) {
                Text("Open Bottom Sheet")
            }

            if (isSheetOpen) {
                ModalBottomSheet(
                    onDismissRequest = {
                        coroutineScope.launch {
                            sheetState.hide()
                            isSheetOpen = false
                        }
                    },
                    sheetState = sheetState,
                    shape = RoundedCornerShape(20.dp)
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp)
                    ) {
                        Text("Beautiful Bottom Sheet", fontSize = 24.sp)
                        Spacer(Modifier.height(8.dp))
                        Button(onClick = {
                            coroutineScope.launch {
                                sheetState.hide()
                                isSheetOpen = false
                            }
                        }) {
                            Text("Close")
                        }
                    }
                }
            }
        }
    }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun StandardBottomSheetScreen() {
    val sheetState = rememberStandardBottomSheetState(
        initialValue = SheetValue.Hidden, // Start hidden
        skipHiddenState = false
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        sheetContent = {
            Column(
                Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text("This is a Standard Bottom Sheet", fontSize = 24.sp)
                Spacer(Modifier.height(8.dp))
                Button(onClick = {
                    coroutineScope.launch {
                        sheetState.hide()
                    }
                },
                    colors = ButtonDefaults.buttonColors(containerColor = Color(0xFFFF9800))
                ) {
                    Text("Close")
                }
            }
        },
        scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState),
        sheetPeekHeight = 0.dp,
    ) { innerPadding ->
        Box(modifier = Modifier.fillMaxSize().padding(innerPadding),
            contentAlignment = Alignment.Center) {
            Button(onClick = {
                coroutineScope.launch {
                    sheetState.expand()
                }
            },
                colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF6A1B9A))
            ) {
                Text("Open Bottom Sheet")
            }
        }
    }
}

OUTPUT :