how to change statusbar color in jetpack compose?

Question

how to make status bar color transparent in compose like here:

it has the same color but with a little bit shade.

Solution 1

Google has just created a library called accompanist.
You can find it here: https://github.com/google/accompanist

It contains multiple helpful libraries for Jetpack Compose, among which is a System UI Controller that you can use for changing the status bar color.

Docs - https://google.github.io/accompanist/systemuicontroller/

Solution 2

Step 1 (add dependency) => version may change

implementation "com.google.accompanist:accompanist-systemuicontroller:0.17.0"

Step 2 => inside theme.kt file

change the colors according to your need in the functions below.

val systemUiController = rememberSystemUiController()
if(darkTheme){
    systemUiController.setSystemBarsColor(
        color = Color.Transparent
    )
}else{
    systemUiController.setSystemBarsColor(
        color = Color.White
    )
}

Step 3 => ON systemUiController you can acces all types of customizations u need for you app above one is a sample for setSystemBarsColor

Solution 3

Just go for the old-fashioned way and add this to themes.xml:

<item name="android:windowTranslucentStatus">true</item>

Solution 4

I use this code, which I found in the Jetpack Compose samples. It works fine for me. Just tweak to your own liking.

@Composable
fun SystemUi(windows: Window) =
    MaterialTheme {
        windows.statusBarColor = MaterialTheme.colors.surface.toArgb()
        windows.navigationBarColor = MaterialTheme.colors.surface.toArgb()

        @Suppress("DEPRECATION")
        if (MaterialTheme.colors.surface.luminance() > 0.5f) {
            windows.decorView.systemUiVisibility = windows.decorView.systemUiVisibility or
                    View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
        }

        @Suppress("DEPRECATION")
        if (MaterialTheme.colors.surface.luminance() > 0.5f) {
            windows.decorView.systemUiVisibility = windows.decorView.systemUiVisibility or
                    View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
        }
    }

Solution 5

The simple answer is: Head to your MainActivity.kt, then enter these codes

WindowCompat.setDecorFitsSystemWindows(window, false)

This comes before

    setContent{}

Then head to your values folder, open colors.xml and create

<color name="transparent">#00000000</color>

Go to themes open themes.xml and themes.xml(night) and place this code in the two files, in one of the style tags that has colors in it.

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

That is the simple way to create a transparent status bar on Android.

View more solutions

Comments

[Johann]

That solution is for changing the app bar and NOT the device's status bar.

[xdevs23]

Please reformat your answer and reduce it to a minimal working example

[Gianluca Veschi]

Using the WindowCompat caused my app to not behave correctly. I don't think it's needed, adjusting colors.xml and themes.xml is enough

[oriohac]

Alright, but check well what you typed, because without that, when you switch from dark screen to light screen you may still not get the desired output.

[foxtrotuniform6969]

Ahh, the good old deprecation warning suppression... artisanship at its finest

[Waruna]

You can also use systemUiController.setStatusBarColor(color = Color.White) , if you only want to change status bar color