How to change status Bar Color in Jetpack Compose + Material 3

Question

I'm following the theming tutorial from developer.google. I'm trying to migrate the app to Mat. 3 and modify the status bar's color to match with the background color.

After adding android:statusBarColor and android:windowLightStatusBar, nothing changes.
I noticed that at the very first moments the app loading, status bar is really as my expected, but a moment later it becomes wrong.

Before: https://i.stack.imgur.com/i43cL.png

After: https://i.stack.imgur.com/kMwaP.png

What I've tried:

// res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.Superheroes" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/background_light</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowBackground">@color/background_light</item>
    </style>
</resources>

// res/values-night/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.Superheroes" parent="android:Theme.Material.NoActionBar">
        <item name="android:statusBarColor">@color/background_dark</item>
        <item name="android:windowLightStatusBar">false</item>
        <item name="android:windowBackground">@color/background_dark</item>
    </style>
</resources>

Look at your AppTheme composable, if you created your app from android studio template, status bar color is changed there. — Jan Bína, Nov 10 '22 at 09:01
@zjmo yes I have applied it but I can see xml has been overrided by Compose in runtime — VanSuTuyDuyen, Nov 10 '22 at 14:09

score 6 · Answer 1 · edited Nov 10 '22 at 13:46

In Jetpack Compose the easiest is to use the Accompanist System UI Controller.

Add this to your dependencies : implementation "com.google.accompanist:accompanist-systemuicontroller:0.27.0"

Then, in your MainActivity:

setContent {
            MyTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val systemUiController = rememberSystemUiController()

                    SideEffect {
                        systemUiController.setStatusBarColor(
                            color = Color(0xff655D8A),
                        )
                    }
                }
            }
        }

Source and details here.

Thanks for your help. I'm looking for the way to do it without adding a dependency. In the comment section I actually found that! — VanSuTuyDuyen, Nov 10 '22 at 14:01

score 6 · Answer 2 · answered Nov 10 '22 at 14:08

Another way to change it without adding a dependency is at ui.theme/Theme.kt as @2801938 has mentioned:

@Composable
fun YourAppTheme(darkTheme...) {
    ...
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }
    ...
}

score 1 · Answer 3 · answered Nov 10 '22 at 14:35

1

The compose samples project Jetchat does this through xml themes.

Be sure to cover all android versions as they do in the various themes.xml files in the same way they do or you'll end up with some weird behaviour on specific versions.

answered Nov 10 '22 at 14:35

Chris

4,662
2
19
27

Fatiq Hussnain · Answer 4 · 2023-09-02T08:32:06.460

if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = colorScheme.primaryContainer.toArgb()
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
    }
}

Change the primaryConatiner color in Color.kt file and then change it also according to Light and Dark theme like this

private val DarkColorScheme = darkColorScheme(
primaryContainer = Color.Black,
onPrimaryContainer = Color.White
)

private val LightColorScheme = lightColorScheme(
primaryContainer = RoyalBlue,
onPrimaryContainer = Color.White
)

In Color.kt file

val RoyalBlue = Color(0xFF246EE9)

How to change status Bar Color in Jetpack Compose + Material 3

4 Answers4