Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jetpack compose - Set Inset padding based on Navigation bar direction

For context, I have a UI like this.

.

I am making changes for Edge to Edge UI using WindowsInsets following the Android Developers official videos.
Insets: Compose edition

My use case is I want the content to be visible on the navigation bar when the navigation bar is at the bottom as the navigation bar color is set to transparent as per the official guidelines.

I have set the navigation bar padding for FloatingActionButton separately.

This UI works for me because I have additional padding at the bottom making all the content scrollable within the visible region. (above transparent nav bar)

But, when the screen is in landscape mode (or in other scenarios where navigation bar appears in the sides),

Required content is behind the navbar.

So, how do I apply WindowInset padding for the navigation bar only when the screen is in the sides?

Code for reference, (Only related code is added to keep it simple)

Scaffold(
    modifier = Modifier.fillMaxSize(),
    floatingActionButton = {
        FloatingActionButton(
            modifier = Modifier.windowInsetsPadding(WindowInsets.navigationBars),
        )
    },
) {
    LazyColumn(
        contentPadding = PaddingValues(
            bottom = 80.dp,
        ),
    ) {
        // List UI
    }
}
like image 616
Abhimanyu Avatar asked Sep 15 '25 14:09

Abhimanyu


1 Answers

Realised I can add a simple orientation check and add padding conditionally.
Still looking for a better solution that is supported directly by WindowInsets or any other features.

Also, there may be scenarios where this may not be correct.

val orientation = LocalConfiguration.current.orientation
Scaffold(
    modifier = Modifier.fillMaxSize(),
    floatingActionButton = {
        FloatingActionButton(
            modifier = Modifier.windowInsetsPadding(WindowInsets.navigationBars),
        )
    },
) {
    LazyColumn(
        modifier = Modifier.then(
            if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
                Modifier.windowInsetsPadding(WindowInsets.navigationBars),
            } else {
                Modifier
            }
        ),
        contentPadding = PaddingValues(
            bottom = 80.dp,
        ),
    ) {
        // List UI
    }
}
like image 70
Abhimanyu Avatar answered Sep 18 '25 08:09

Abhimanyu