How to create rounded corner BottomDrawer (aka Modal Bottom Sheet) in Jetpack compose

Question

How to create rounded corner BottomDrawer (aka Modal Bottom Sheet) in new android jetpack compose.

e.g. image

Answer 1

You can use the sheetShape parameter in the BottomSheetScaffold or ModalBottomSheetLayout.

Something like:

BottomSheetScaffold(
        sheetShape = RoundedCornerShape(16.dp),
        /* ... */
){}

Answer 2

We can easily create in jetpack compose by using ButtomDrawer and Surface.

@Composable
fun RoundedBottomDrawer(){

    val scope = rememberCoroutineScope()
    val drawerState = rememberBottomDrawerState(initialValue = BottomDrawerValue.Closed)

    BottomDrawer(
        gesturesEnabled = true, // making scrollable to fit screen
        drawerState = drawerState,
        drawerBackgroundColor = Color.Transparent, // transparent background
        drawerContent = {

            Button(onClick = { scope.launch { drawerState.close() } }) {
                    Text("Close")
            }
            
            Spacer(modifier = Modifier.height(16.dp)) // some padding

            BottomDrawerSurface()

        },
        content = {
            // outside content
            Button(onClick = { scope.launch { drawerState.open() } }) {
                    Text("Open BottomDrawer")
            }
        }
    )
}

@Composable
fun BottomDrawerSurface() {
    Surface(
        color = Color.White,
        shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
    ) {
        // your design..
    }
}

Answer 3

In your case you need top start and top end corners rounded for that add this attribute:

sheetShape = RoundedCornerShape(topEnd = 16.dp, topStart = 16.dp)

In your BottomSheetScaffold.