Hello! I am using Compose edge to edge (on fullscr...

# compose

[Dima Avdeev]

Hello! I am using Compose edge to edge (on fullscreen).
How to properly apply WindowInsets.systemBars to material2 TopAppBar ?
I will describe some solutions inside a thread 🧵
Maybe someone can find another solutions?

[Dima Avdeev]

I am asking this because we are designing iOS part of Compose Multiplatform. And we want to provide some samples with convenient usage of Insets.

If you like some solutions, please feel free to add reactions emoji.

[Dima Avdeev]

Solution 1
Using contentPadding

TopAppBar(
  contentPadding = WindowInsets.systemBars
    .only(WindowInsetsSides.Horizontal + <http://WindowInsetsSides.Top|WindowInsetsSides.Top>)
    .asPaddingValues(),
) {
  Text("Title")
}

[Updated info]
In this case we can't use title = { } , navigationIcon = {} and actions = {} arguments. Only single content lambda.

[Stylianos Gakis]

Accompanist has some system UI dependency for material 2 in particular. It gives you a parameter for the insets you pass in.

[Dima Avdeev]

Solution 2
With Modifier.windowInsetsPadding(...)

TopAppBar(
  modifier = Modifier.windowInsetsPadding(WindowInsets.systemBars)
) {
  Text("Title")
}

In this case top background under system bar is not controlled by TopAppBar.

[Updated info]
We can use title = { } , navigationIcon = {} and actions = {}

[Stylianos Gakis]

https://google.github.io/accompanist/insets/#inset-aware-layouts-insets-ui

[Dima Avdeev]

https://google.github.io/accompanist/insets/#inset-aware-layouts-insets-ui

@Stylianos Gakis Thanks for info, but this page is deprecated.

[Stylianos Gakis]

Yes, the insets part is deprecated since there's a replacement in the foundation apis. But the insets-ui part isn't, it's giving a replacement for something that isn't there at least for the material2 library.

With that said, since you're designing your own API, in order for it to be usable it must provide a way to go edge to edge aka behind the system bars. Option #2 is a no go for me.

[Dima Avdeev]

@Konstantin Tskhovrebov @Stylianos Gakis @alex009 @mohamed rejeb I have updated info to solutions. You can change your votes based on this info. Or maybe offer another solution.

[alex009]

i think we should have ability to read insets without touch modifier, so first solution best for me

[mohamed rejeb]

Can't we have title, navigationIcon, actions with solution 1 ? If there's a way to have both options with solution 1 it would be great
Option 1: content
Option 2: navigationIcon, title, actions

[Stylianos Gakis]

Btw using
`WindowInsets.systemBars.only(WindowInsetsSides.Top)`with top bars, would mean that if the phone is in landscape mode, and the phone is using the 3 button navigation system so those buttons are there on the left/right of the phone, then the bar would have the contents hidden behind it.
Make sure to also use WindowInsetsSides.Horizontal too, and make sure that whatever API you make does work with that too 😊

[Dima Avdeev]

@mohamed rejeb
material2 TopAppBar have 2 variants:

fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable (() -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
)

and

fun TopAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

So we can't use contentPadding with title, etc.

[Stylianos Gakis]

can’t use contentPadding with title, etc.

Yeah, and that’s exactly the one missing API from material2 that accompanist insets-ui is providing.
https://github.com/google/accompanist/blob/96f477ccc9f4adb60ebe906ad95dc7cb9a37db7[…]-ui/src/main/java/com/google/accompanist/insets/ui/TopAppBar.kt

[Dima Avdeev]

@Stylianos Gakis Thanks, it is good suggestion. Edited solution 1.

[Alex Vanyo]

https://developer.android.com/jetpack/compose/layouts/insets#material3-components

Material 3 has more support out of the box for this directly as another reference, but for Material 2, accompanist/insets-ui provides some helpers as @Stylianos Gakis mentioned!

[Sam Stone]

See 2 solutions in comments to https://kotlinlang.slack.com/archives/C0346LWVBJ4/p1681099546489419