Issue
I'm trying to use Accompanist's System UI Controller library along with WindowCompat.setDecorFitsSystemWindows(window, false)
to render content behind a device's system UI.
I'd like to also use Jetpack Compose's inset paddings to add some pad the top of its LazyVerticalGrid, however the grid doesn't render behind the system bars if I give it a padding with Modifier.statusBarsPadding()
.
@Composable
fun libraryScreen(navController: NavController) {
Surface(
color = Color.Magenta,
modifier = Modifier.fillMaxWidth()
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = 10.dp
)
) {
LazyVerticalGrid(
columns = GridCells.Fixed(3),
horizontalArrangement = Arrangement.spacedBy(10.dp),
verticalArrangement = Arrangement.spacedBy(10.dp),
modifier = Modifier
.background(color = Color.Black)
// .statusBarsPadding()
) {
items(40) {
albumCard("TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE ", "ARTIST ARTIST ARTIST ARTIST ARTIST ARTIST ARTIST ")
}
}
}
}
}
Comparison GIFs:
The same effect happens if I use a Box or Spacer above the grid.
Solution
Accompanist insets are deprecated use WindowInsets
library.
contentPadding = WindowInsets.systemBars
.only(WindowInsetsSides.Vertical)
// Add if you want to have extra padding with your grid, optional
.add(
WindowInsets(left = 8.dp, right = 8.dp, top = 16.dp, bottom = 16.dp)
)
.asPaddingValues(),
add will add extra padding initial padding and will scroll below status bar and navigation bar when you scroll your grid
Surface(Modifier) {
LazyVerticalGrid(
contentPadding = WindowInsets.systemBars
.only(WindowInsetsSides.Vertical)
.add(
WindowInsets(left = 8.dp, right = 8.dp, top = 16.dp, bottom = 16.dp)
)
.asPaddingValues(),
modifier = Modifier
.fillMaxSize()
.background(backgroundColor),
columns = GridCells.Fixed(3),
content = {
items(snacks) { snack: Snack ->
GridSnackCard(snack = snack)
}
}
)
}
Answered By - Thracian
Answer Checked By - Marilyn (JavaFixing Volunteer)