Applying bottom padding to navigation bar

Question

I'm using the BottomNavigation from Accompanist and I want to have it drawn behind the navigation bar. I get the navigation bar insets from WindowInsets.navigationBars.getBottom but this value is way too high and creates a large gap (see image). How can I get the correct content padding for the navigation bar?

This is the code

@Composable
fun NavigationBar(
    navController: NavHostController,
    modifier: Modifier = Modifier,
) {
    val density = LocalDensity.current
    val bottomPadding = WindowInsets.navigationBars.getBottom(density).dp
    BottomNavigation(
        modifier = modifier,
        contentPadding = PaddingValues(bottom = bottomPadding),
    ) {
        // content omitted for brevity
    }
}

Answer 1

you can do it like this as the documentation https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).navigationBarsPadding()

class SampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        WindowCompat.setDecorFitsSystemWindows(window, false)
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                Modifier
                    .background(Color.Blue)
                    .statusBarsPadding()) {
                Box(
                    Modifier
                        .background(Color.Green)
                        .navigationBarsPadding()) {
                    // app content
                }
            }
        }
    }
}

Answer 2

There is a dedicated extension function to convert the insets into PaddingValues and this yields the correct result:

val paddingValues = WindowInsets.navigationBars.asPaddingValues()
BottomNavigation(
    modifier = modifier,
    contentPadding = paddingValues,
) {
}

Answer 3

Try to not use the innerPadding in the Scaffold content.