A modern programming language that makes developers happier.

kotlinlang

I have an E2E (edge to edge) app already, and I'm adding compose to the project.

According to Chris Banes' accompanist insets lib I added `Modifier.statusBarsPadding()` to my Toolbar that's in a scaffold, but my statusbar is white instead of Purple (my Toolbar is purple). Am I doing something wrong?

what you see is the scaffold background color. if you apply `statusBarPadding` as a Toolbar modifier it acts like a top margin because it doesn't change the inner padding of the toolbar. You should wrap your Toolbar in a Surface applying both the color and the elevation of the toolbar to the surface.

<@UPFEDE8N6> so I'm supposed to add an additional surface?

```    Scaffold(
        topBar = {
            TopAppBar(
                modifier = Modifier.statusBarsPadding(),
                title = { Text("Toolbar title") }
            )
        }) {```
<@UBTGMFRCZ> hate to ping you directly, but could you shed some light on what I'm doing wrong?

The sample covers this: <https://github.com/chrisbanes/accompanist/blob/main/sample/src/main/java/dev/chrisbanes/accompanist/sample/insets/EdgeToEdgeLazyColumn.kt|https://github.com/chrisbanes/accompanist/blob/main/sample/src/main/java/dev/chrisbanes/accompanist/sample/insets/EdgeToEdgeLazyColumn.kt>

I have thought about providing something similar to that `InsetAwareTopAppBar` in the library. Would that help?

<@UBTGMFRCZ> thanks. I did take a look at the docs for accompanist on the github page, but I didn't realize there was a sample in the repo. Sorry about that.

No worries! I want to improve the docs anyway, so I’ll add something about this

<@UBTGMFRCZ> I think it would help. I'm probably an ididot or something... but I've converted 3 full scale apps to Edge to edge (no compose) and so I know a lot of the work involved in it.

These app have had over 5 million installs in total, and so the E2E work has had a huge impact. And its all thanks to insetter, but man does E2E still feel hard to implement.

Even in Compose? (Minus this app bar stuff)

I kinda don't realize how/why I even need to wrap toolbar in a surface. I wish it was just able to handle it.

It’s just because `TopAppBar` doesn’t (yet) support inner content padding. So we fake it wrapping it in another `Surface`.

In Compose, I basically just called `
```Insetter.setEdgeToEdgeSystemUiFlags(window.decorView, true)```
(I know on twitter you said that I don't need that anymore, and I can just use the WindowCompat api or whatever).

Then I wrapped my theme in `ProvideWindowInsets` and then adding padding to Toolbar didn't work.

&gt; It’s just because `TopAppBar` doesn’t (yet) support inner content padding. So we fake it wrapping it in another `Surface`.
Aha. Okay so it doesn't support it yet. Thats actually a huge relief. I was pretty much convinvced that it would just work with it. and when it didn't... I just thought my 2 months of work with E2E went down the drain and the world didn't make sense anymore. lol

To circle back to this. I just copied the app bar from your example and everything worked 100% as expected. Thank you for your help