I have a simple modal bottom sheet using the following code, which presents a modal anchored at the bottom of the screen as one would expect, and it is 480.dp in height.

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

ModalBottomSheet(
    sheetState = sheetState,
    modifier = Modifier.heightIn(min = 480.dp, max = 480.dp),
    contentWindowInsets = { WindowInsets.systemBars }
) {
    // sheet content here
}

This worked fine when my project's compileSDK was 34 and produced something that looked like this (modal bottom sheet represented by blue box):

However, now that I've changed the project compileSDK to 35, I am getting strange behavior where the modal is being positioned at the top of the screen, like this (modal bottom sheet represented by red box):

Clearly this is the result of a change in SDK 35 but I'm not sure exactly what is causing this or how to fix it and get the modal positioned at the bottom of the screen again.

I have a simple modal bottom sheet using the following code, which presents a modal anchored at the bottom of the screen as one would expect, and it is 480.dp in height.

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

ModalBottomSheet(
    sheetState = sheetState,
    modifier = Modifier.heightIn(min = 480.dp, max = 480.dp),
    contentWindowInsets = { WindowInsets.systemBars }
) {
    // sheet content here
}

This worked fine when my project's compileSDK was 34 and produced something that looked like this (modal bottom sheet represented by blue box):

However, now that I've changed the project compileSDK to 35, I am getting strange behavior where the modal is being positioned at the top of the screen, like this (modal bottom sheet represented by red box):

Clearly this is the result of a change in SDK 35 but I'm not sure exactly what is causing this or how to fix it and get the modal positioned at the bottom of the screen again.

• android
• kotlin
• android-jetpack-compose

1 Answer 1

A similar behavior was already reported in Ticket #374247119 on the Google Issue Tracker.

It seems that setting a height on the ModalBottomSheet directly is glitchy in several ways. I found that it works well when you set the desired height on the first child of the ModalBottomSheet like this:

ModalBottomSheet(
    sheetState = sheetState,
    // don't set height using a Modifier directly on ModalBottomSheet   
    // modifier = Modifier.heightIn(min = 480.dp, max = 480.dp),
    onDismissRequest = {
        showBottomSheet = false
    }
) {
    Box(
        modifier = Modifier
            .height(480.dp)  // instead, apply height on first child Composable
            .fillMaxWidth()
    ) {
        // other Composables
    }
}

When you have skipPartiallyExpanded = true, the ModalBottomSheet will take exactly the height of the Box.