A modern programming language that makes developers happier.

kotlinlang

image.png

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 :thread:

```@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 -&gt;
                NavigationBarItem(
                    icon = {
                        Icon(
                            if (selectedItem == index) selectedIcons[index] else unselectedIcons[index],
                            contentDescription = item
                        )
                    },
                    label = { Text(item) },
                    selected = selectedItem == index,
                    onClick = { selectedItem = index }
                )
            }
        }
    }
}```

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

So that Column content can scroll behind NavigationBar

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

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

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

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

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

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