hey guys, how to make status bar color same as top app bar color in material 3 in jetpack compose? I...

# compose-android

[Hristijan]

hey guys, how to make status bar color same as top app bar color in material 3 in jetpack compose?
If i just change it using the systemUiController by reacting to the overlappedFraction from the scaffold state, the animation is janky, I want everything to happen at once, like in the Clock app from Google

[Stylianos Gakis]

Make the top app bar go edge to edge (with transparent system bars) and have it all animate together is the simplest answer to this imo. No need to make those two animations match in that case since it’d be 1 color all together

[Hristijan]

any sample how to achieve this?

[Stylianos Gakis]

The simplest way to setup everything would probably be to use ActivityComponent.setUpEdgeToEdge() from here https://developer.android.com/jetpack/androidx/releases/activity#1.8.0-alpha03
Then material3 TopAppBar if you see has a parameter for windowInsets and it uses the right insets in order to inset the contents it has appropriately while still going edge to edge.

Now if you don’t want to use the alpha library yet, sample projects like this one https://github.com/AdamMc331/AndroidAppTemplate/commits/development has the code you’d need to add to go edge to edge properly.

And of course official docs https://developer.android.com/develop/ui/views/layout/edge-to-edge to understand why you need to do stuff like WindowCompat.setDecorFitsSystemWindows(window, false) and so on.

[Hristijan]

I can’t seem to find ComponentActivity.setUpEdgeToEdge 1.8.0-alpha03 onwards

[Hristijan]

ahhh it’s renamed to enableEdgeToEdge