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
}
}
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
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With