I'm trying to make my app completely full screen, navigation bar and status bar are always hidden, but when the ModalBottomSheet is showed the navigation bar reappear, and I can't get rid of it neither set a padding to not have the content (of the ModalBottomSheet) overlaid by the system navigation bar. I'm using enableEdgeToEdge(). I tried to use .navigationBarsPadding() modifier on a column inside the sheet but doesn't work, I tried to simply add a Spacer at the end of the sheet but WindowInsets.navigationBars.getBottom(this).toDp() returns 0.dp

I don't know if is useful but this is my theme.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Test" parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
</resources>

This is my current screen code:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Screen() {

    var showBottomSheet by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            // ...
        },
        bottomBar = {
            BottomAppBar(
                windowInsets = WindowInsets(0, 0, 0, 0)
            ) {
                // ...
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues = paddingValues).fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(16.dp, alignment = Alignment.CenterVertically),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ElevatedButton(onClick = { showBottomSheet = true }) {
                Text(text = "Show Bottom Sheet")
            }
        }
    }

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { showBottomSheet = false },
            modifier = Modifier.navigationBarsPadding(),
            windowInsets = WindowInsets(0, 0, 0, 0)
        ) {
            Text(text = loremIpsumText)

            /*Column(
                modifier = Modifier.navigationBarsPadding(),
            ) {
                Text(text = loremIpsumText)
            }*/

            /*Spacer(
                modifier = Modifier
                    .height(
                        with(LocalDensity.current) {
                            WindowInsets.navigationBars.getBottom(this).toDp()
                        }
                    )
            )*/
        }
    }
}

This is the result of the code above, as you can see the navigation bar overlaps the content of the sheet.

If I remove windowInsets = WindowInsets(0, 0, 0, 0) in the ModalBottomSheet then the sheet go above the nav bar but the bottom app bar is visible, so not good:

My goal is to have one of these: (sheet content above navigation bar or system nav bar removed)

Thanks.

UPDATE

I found a workaround, a simple variable like this to get the height of the navigation bar:

val navigationBarHeight = with(LocalDensity.current) {
    WindowInsets.navigationBars.getBottom(this).toDp()
}

and then a Spacer() at the end of the ModalBottomSheet:

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    windowInsets = WindowInsets(0, 0, 0, 0)
) {
    Text(text = loremIpsumText)
    Spacer(modifier = Modifier.height(navigationBarHeight))
}

It works, but I think navigationBarHeight create overhead during recompositions.

0

There are 0 best solutions below