kotlinandroid-jetpack-composematerial3modalbottomsheet

Material3 ModalBottomSheet How to set fullscreen background image


I am trying to implement a ModalBottomSheet with Material3. Everything works like expected but I don't get colored the area which google called container. Or more precisely: I would like to have a background image.

I do not care if the ModalBottomSheet has the background image or the element inside.

I tried something like that

        ModalBottomSheet(
            sheetState = sheetState,
            content = {
                Surface(modifier = Modifier.fillMaxSize()) {
                    Image(
                        painter = painterResource(id = R.drawable.app_background),
                        contentDescription = null,
                        modifier = Modifier
                            .fillMaxSize(),
                        contentScale = ContentScale.Crop
                    )
                }
            },
            onDismissRequest = {
                pressedBack.invoke()
            },
            modifier = Modifier
                .fillMaxSize(),
            tonalElevation = 20.dp,
        )
    

Does anybody know how I can manipulate this area? I cannot find anything.

enter image description here


Solution

  • drag handle

    The area is called drag handle.

    You can set that to null, like this:

        ModalBottomSheet(
        sheetState = sheetState,
        content = {
            Surface(modifier = Modifier.fillMaxSize()) {
                Image(
                    painter = painterResource(id = R.drawable.app_background),
                    contentDescription = null,
                    modifier = Modifier
                        .fillMaxSize(),
                    contentScale = ContentScale.Crop
                )
            }
        },
        onDismissRequest = {
            pressedBack.invoke()
        },
        modifier = Modifier
            .fillMaxSize(),
        tonalElevation = 20.dp,
        dragHandle = null,
        //or set that to empty 
        // or any composables you want
        //dragHandle = {}
    )