Jetpack Compose BottomSheetScaffold: Avoid bottom sheet overlapping top bar

Question

I use BottomSheetScaffold to set up a view with a topBar and some sheetContent.

When the bottom sheet is fully expanded, it overlaps the topBar (a.k.a. action bar or app bar). Is there a way to ensure that it does not overlap?

Answer 1

As stated in this issue report: https://issuetracker.google.com/issues/209825720, you can use the screen height and subtract the offset you need, to obtain the height of the bottomSheet

@Composable
fun BottomSheetTest() {

    val topOffset = 56.dp

    BoxWithConstraints() {
        val sheetHeight = with(LocalDensity.current) { constraints.maxHeight.toDp() - topOffset }

        BottomSheetScaffold(
            sheetPeekHeight = 96.dp,
            topBar = {
                TopAppBar {
                    Text(text = "Wassertemperaturen", fontSize = 20.sp)
                }
            },
            sheetContent = {
                Column(
                    modifier = Modifier
                        .requiredHeight(sheetHeight)
                        .padding(24.dp),
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Text(text = "OST Badewiese", fontSize = 20.sp)
                    Text("Der beliebte Badeplatz direkt hinter der Hochschule")
                }
            }) {
            Box(Modifier.background(Color.LightGray)) {
                Image(
                    modifier = Modifier.fillMaxSize(),
                    painter = painterResource(id = R.drawable.rapperswil),
                    contentScale = ContentScale.FillBounds,
                    contentDescription = null
                )
            }
        }
    }
}

@Preview(name = "BottomSheetTest")
@Composable
fun PreviewBottomSheetTest() {
    BottomSheetTest()
}