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.
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 = {}
)