Is it possible to provide some custom insets for the app? For example, if you have a transparent `N...

# compose

[Peter]

Is it possible to provide some custom insets for the app?

For example, if you have a transparent NavigationBar and you want content to scroll behind it. How can I provide additional padding to each screen, so that content can scroll above navigation bar? (On screenshot, how can I make Text scroll above the NavigationBar )

Example in 🧵

[Peter]

@Composable
@Preview
fun Test() {
    var selectedItem by remember { mutableIntStateOf(0) }
    val items = listOf("Songs", "Artists", "Playlists")
    val selectedIcons = listOf(
        Icons.Filled.Home,
        Icons.Filled.Favorite,
        Icons.Filled.Star
    )
    val unselectedIcons = listOf(
        Icons.Outlined.Home,
        Icons.Outlined.FavoriteBorder,
        Icons.Outlined.StarBorder
    )

    Box {
        Surface {
            Column(modifier = Modifier.fillMaxSize().navigationBarsPadding()) {
                Box(Modifier.weight(1f))
                Text("Some text")
            }
        }

        NavigationBar(
            modifier = Modifier.align(Alignment.BottomCenter),
            containerColor = Color.Gray.copy(alpha = 0.5f)
        ) {
            items.forEachIndexed { index, item ->
                NavigationBarItem(
                    icon = {
                        Icon(
                            if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                            contentDescription = item
                        )
                    },
                    label = { Text(item) },
                    selected = selectedItem == index,
                    onClick = { selectedItem = index }
                )
            }
        }
    }
}

[Stylianos Gakis]

Why is NavigationBar and your screen's content laid out in a box instead of in a Column?

[Peter]

So that Column content can scroll behind NavigationBar

[Stylianos Gakis]

Why is that necessary? Do you have a transparent NavigationBar?

[Peter]

yeah

[Peter]

I want to have that

[Peter]

Any best practices for this? Can I make something similar to Modifier.navigationBarsPadding(), like Modifier.myAppBarPadding()?

[Stylianos Gakis]

Then take the height of your NavigationBar and provide is as some sort of contentPadding input to your screen.
You can get the height using onPlaced on your nav bar for example.
If you absolutely need it to be there on the first frame you might need to make it a custom layout yourself

[Stylianos Gakis]

You can also take a look at how material3.Scaffold does this, because I think they also make this happen, albeit using SubComposeLayout

[Peter]

Ok, will take a look, thanks

[Peter]

Scaffold doesn't have an option for transparent NavigationBar, right?

[Stylianos Gakis]

It does not enforce anything regarding what your navigation slot takes in afaik. But my idea was that you can use it as an inspiration to build something yourself.
I have also seen this https://android-review.googlesource.com/c/platform/frameworks/support/+/2690433 the other day (an experiment to do Scaffold without subcomposition), can also be used as an inspiration to see if you can do something similar