Did someone notice that there is a discrepancy bet...

# compose

[Lilly]

Did someone notice that there is a discrepancy between the Material3 Theme Builder preview appearance (https://m3.material.io/theme-builder#/custom) and the actual appearance when theme is applied to an app. While in Theme Builder preview the status bar is white or black depending on light or dark theme respectively, the status bar in app is equal to primary color or some tone of it, hard to tell.

[Lilly]

New compose project template

[Stylianos Gakis]

The template adds some code inside the generated [AppName]Theme to change the toolbar color, probably as a way to show you how it’s done. Feel free to go and remove it and potentially use https://google.github.io/accompanist/systemuicontroller/ to go edge-to-edge and make that bar transparent.

[Lilly]

Damn good point, I have overlooked this specific code. But anyway a bit misleading by the Theme Builder because without manually changing the status bar color it is not looking the same as the theme builder promises

[Lilly]

What is the purpose of SystemUiController when simply putting

<item name="android:statusBarColor">@android:color/transparent</item>

into themes.xml is enough?

[Stylianos Gakis]

Trust me, I once spent hours trying to understand what I was doing wrong, reading the accompanist library sources, even trying this https://medium.com/androiddevelopers/is-your-app-providing-a-backward-compatible-edge-to-edge-experience-2479267073a0#id_token=eyJh[…]RtEB8o4YYLiqmA one out, changing the xml files to specify different flags for different API versions, trying out different emulators, I tried everything.
Turns out it was just this rogue generated code inside there 😂

[Stylianos Gakis]

Because you also want to make sure the icon color in the status bar is legible, and for sdk versions where it’s not actually transparent but it is translucent system-ui-controller does some handling there too.
It also handles navigation bar transparency too.

At least that’s what I remember, it wasn’t as simple as 1 field in one xml and then you’re done.

[Lilly]

Yeah I have removed that code part and the status bar color fallsback to its default color (some sort of grey). I guess it is the default color. Someone who is using Theme Builder the first time would expect the status bar gets colored automatically somehow which isnt true, thats my problem. I would wish some notification/disclaimer on the Theme Builder site, that the status bar has to be manually changed. Maybe I will file an issue at material3.

Because you also want to make sure the icon color in the status bar is legible, and for sdk versions where it’s not actually transparent but it is translucent system-ui-controller does some handling there too.

It also handles navigation bar transparency too.

Thanks for this tip, I will keep that in mind.

[Stylianos Gakis]

Yes, if I were you, I’d go to the issue tracker and try and file a bug for the theme builder. Not sure which component that would be but if you can’t find anything either you can make it top-level and it should hopefully be triaged appropriately.

[Rick Regan]

I think this is the place to file an issue for theme builder: https://github.com/material-foundation/material-theme-builder/issues

[Lilly]

@Rick Regan @Stylianos Gakis I had to read the components page of top app bar multiple times until I found out, that the top app bar (and also the status bar) is only colorized when content is scrolled (at least in theory) which isn't clear at fist glance. So it is not an issue related to Theme Builder. It isn't even an issue at all but anyway I have filed one and asked for adjustment of the documentation, see https://github.com/material-components/material-components-android/issues/3200

[Lilly]

I hope it makes any sense what I have written.
Damn I hope I'm not too nitpicky...

[Stylianos Gakis]

This is a different thing than what you mentioned here though right? That first screenshot did not include the m3 top bar, it was just the status bar being colored.
Then the status bar following the top app bar color is a result of the status being transparent and the top app bar expanding all the way up to the edges when going edge to edge and handling insets yourself

[Lilly]

Yeah sorry, I lost the focus. There is still the problem, that the Theme Builder should export values to set the status bar transparent. I will file an issue there too.

[Stylianos Gakis]

Yes, however good to note that the theme builder won’t be able to set everything needed to have a transparent status bar across API levels and so on.
At the minimum it should probably just not fiddle with the status bar color, but that’s just my opinion, they may have different ideas as to what the default should be.
It may be that if you are at the level where you care what the status bar color is, then you probably can change it yourself.