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

# compose

[Colton Idle]

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?

[manueldidonna]

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.

[Colton Idle]

@manueldidonna so I'm supposed to add an additional surface?

Scaffold(
        topBar = {
            TopAppBar(
                modifier = Modifier.statusBarsPadding(),
                title = { Text("Toolbar title") }
            )
        }) {

@cb hate to ping you directly, but could you shed some light on what I'm doing wrong?

[cb]

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

[cb]

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

[Colton Idle]

@cb 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.

[cb]

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

[Colton Idle]

@cb 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.

[Colton Idle]

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.

[cb]

Even in Compose? (Minus this app bar stuff)

[Colton Idle]

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.

[cb]

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

[Colton Idle]

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.

[Colton Idle]

That's the gist of it right?

[Colton Idle]

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

[Colton Idle]

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