How to avoid Modal Bottom Sheet overlap with System Navigation Icons in Android

Question

The Material3 Modal Bottom Sheet is currently overlapping with the system navigation buttons. Is there a way to avoid this overlap with the system navigation buttons.

This is the code that I am using for showing modal bottom sheet

@Composable
fun TestScreen() {
    var sheetOpened by mutableStateOf(false)

    Scaffold() {
       Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
         Button(onClick = { sheetOpened = true }){
              Text("Open Bottom Sheet")  
          }
       }
    }

    if(sheetOpened){
        ModalBottomSheet(onDismissRequest = {sheetOpened = false}){
            Box(Modifier.fillMaxWidth().height(500.dp).background(Color.RED))
        }
    }
}

Tried putting the Modal Bottom Sheet inside the Scaffold, but that does not work either.

Answer 1

My solution is to add a Spacer at the bottom of ModalBottomSheet content.

Spacer(
    Modifier.windowInsetsBottomHeight(
        WindowInsets.navigationBarsIgnoringVisibility
    )
)

For larger items list I suggest to set skipPartiallyExpanded = true to avoid covering last items.

ModalBottomSheet(
    sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
)

Answer 2

To address this issue, inform Jetpack Compose that you'll be handling insets manually. Add the following code to your MainActivity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Manually handle all the insets
        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            ApplicationTheme {
                // Your Composables
            }
        }
    }
}

Next, calculate the BottomPadding of your BottomModalSheet using the following approach:

val bottomPadding = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()

Apply this in your BetterModalBottomSheet composable as shown in the sample code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BetterModalBottomSheet(
    ...
) {
    val bottomPadding = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()

    if (showSheet) {
        ModalBottomSheet(
            ...
        ) {
            Column(modifier = Modifier.padding(bottom = bottomPadding)) {
                // Your content
            }
        }
    }
}

For additional details, refer to this post.