Is there an established convention for handling di...

# compose

[Matti MK]

Is there an established convention for handling different status bar colors for different screens? Currently I’m changing the colors with the Accompanist System UI Controller on the root of every screen

[maciejciemiega]

If you make your app "edge-to-edge" your content would be drawn behind the status bar.
Then it's just part of your layout and you can either draw just a Box with a specific color, or make TopAppBar higher to fill that space (by adding e.g. .statusBarsPadding() from Accompanist).

[Matti MK]

Thanks, but that’s not the case here. I might have worded my question badly:

I’ve got a bunch of screens among which the user navigates, these screens have different background colors and thus should have different status bar colors matching the background. Currently I’m changing the status bar color with the above mentioned library in each of the screens, but I was wondering if there’s a “cleaner” approach for this. I’m thinking of handling it in the NavHost

[maciejciemiega]

We do that in our app, because we need to draw a horizontal gradient as a Toolbar background (and it should span also behind the statusbar). The statusbar color should be set to something semi-transparent to add some protection for icons etc.

[Matti MK]

Ah, right.. that could work. Thanks!

[Matti MK]

How do you handle the status bar icon colors?

[maciejciemiega]

Ok, if you need to change icon colors on different screens then I guess you would need to use setStatusBarColor on different screens anyway (as you are using it now). You are asking for the most elegant way - we haven't encountered this issue yet because so far in all our new (Compose) screens we use the same icons color.

I would probably just create a reusable "root" composable that would always set this color and use it as a root for every screen (we have our customized Scaffold anyway).
If you really want to define these colors on NavHost level I guess you can do it by creating your own version of composable() destination that would wrap the content and set these colors there every time.