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.

Any way to implement a gradient yet? – Richard Onslow Roper May 14 '22 at 18:27 — Richard Onslow Roper, May 14 '22 at 18:27

dolar · Answer 1 · 2021-08-21T19:34:27.320

41

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

edited Aug 21 '21 at 19:34

answered Aug 21 '21 at 19:27

dolar

716
8
5

1

You can also use systemUiController.setStatusBarColor(color = Color.White) , if you only want to change status bar color – Waruna Oct 29 '21 at 12:20

Donny Rozendal · Accepted Answer · 2021-05-04T11:16:55.953

40

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/

edited May 04 '21 at 11:16

answered Apr 13 '21 at 07:51

Donny Rozendal

570
5
10

score 9 · Answer 3 · answered Jan 07 '21 at 12:02

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
        }
    }

Ahh, the good old deprecation warning suppression... artisanship at its finest — foxtrotuniform6969, Jul 07 '21 at 19:26

score 9 · Answer 4 · answered Mar 13 '21 at 10:01

9

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

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

answered Mar 13 '21 at 10:01

Cristan

9,210
4
58
62

score 5 · Answer 5 · answered Mar 18 '21 at 11:05

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.

answered Mar 18 '21 at 11:05

oriohac

77
1
7

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 – Gianluca Veschi Apr 13 '21 at 07:06
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. – oriohac Apr 23 '21 at 15:17

score 4 · Answer 6 · answered Nov 05 '21 at 08:14

I think other answers are overthinking.

Just check out your src/main/res/values-night/themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.HelloWorld" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        ...
        <item name="colorPrimaryVariant">@color/black</item>
        ...

        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    </style>
</resources>

score 0 · Answer 7 · answered Jan 07 '21 at 11:20

0

I use this: https://stackoverflow.com/a/22192691/9957384

It works but maybe there is a better solution in compose. For convenience, I suggest creating an Ambient

answered Jan 07 '21 at 11:20

2jan222

1,302
2
11
25

That solution is for changing the app bar and NOT the device's status bar. – Johann Mar 04 '21 at 16:51

guerdaa · Answer 8 · 2022-02-03T22:34:16.547

The answers are really complicated :o !!! You can change the style of the app from the style xml and that is it. Here an example from https://github.com/android/compose-samples/tree/main/Rally

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Rally" parent="Theme.MaterialComponents.NoActionBar">
    <item name="android:statusBarColor">@color/statusBarColor</item>
    <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    <item name="android:windowBackground">?attr/colorSurface</item>
</style>

The line responsible for changing the color of the status bar here is

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

But you have also to consider the text inside the status bar. If you set the color to black for example and you don't indicate that the chosen color is dark, the text inside will be black, and thus it will be invisible. To fix that you have to set the following attribute to false if the chosen color is dark otherwise true.

<item name="android:windowLightStatusBar" tools:targetApi="m">false</item>

Important Note: Don't forget to add the theme attribute to your manifest file:

    <application
    ...
    android:theme="@style/Theme.Rally">

score -1 · Answer 9 · answered Jan 08 '21 at 01:46

   def version = "0.4.1"
implementation "dev.chrisbanes.accompanist:accompanist-coil:$version"
implementation "dev.chrisbanes.accompanist:accompanist-insets:$version"


class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
        // A surface container using the 'background' color from the theme
        val systemUiController = remember { SystemUiController(window) }
        Providers(SysUiController provides systemUiController) {
            ProvideWindowInsets {
                val sysUiController = SysUiController.current

                onCommit(sysUiController, LightColorPalette2.uiBackground) {
                    sysUiController.setSystemBarsColor(
                        color = LightColorPalette2.uiBackground.copy(alpha = AlphaNearOpaque)
                    )
                }
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

}

and you also need this file:

package com.example.myjetsnack

import android.os.Build import android.view.View import android.view.Window import androidx.compose.runtime.staticAmbientOf import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.compositeOver import androidx.compose.ui.graphics.luminance import androidx.compose.ui.graphics.toArgb

interface SystemUiController { fun setStatusBarColor( color: Color, darkIcons: Boolean = color.luminance() > 0.5f, transformColorForLightContent: (Color) -> Color = BlackScrimmed )

fun setNavigationBarColor(
    color: Color,
    darkIcons: Boolean = color.luminance() > 0.5f,
    transformColorForLightContent: (Color) -> Color = BlackScrimmed
)

fun setSystemBarsColor(
    color: Color,
    darkIcons: Boolean = color.luminance() > 0.5f,
    transformColorForLightContent: (Color) -> Color = BlackScrimmed
)

}

fun SystemUiController(window: Window): SystemUiController { return SystemUiControllerImpl(window) }

/**

A helper class for setting the navigation and status bar colors for a [Window], gracefully
degrading behavior based upon API level. */ private class SystemUiControllerImpl(private val window: Window) : SystemUiController {

/**
- Set the status bar color.
- @param color The desired [Color] to set. This may require modification if running on an
- API level that only supports white status bar icons.
- @param darkIcons Whether dark status bar icons would be preferable. Only available on
- API 23+.
- @param transformColorForLightContent A lambda which will be invoked to transform [color] if
- dark icons were requested but are not available. Defaults to applying a black scrim. */ override fun setStatusBarColor( color: Color, darkIcons: Boolean, transformColorForLightContent: (Color) -> Color ) { val statusBarColor = when { darkIcons && Build.VERSION.SDK_INT < 23 -> transformColorForLightContent(color) else -> color } window.statusBarColor = statusBarColor.toArgb()
  
  if (Build.VERSION.SDK_INT >= 23) { @Suppress("DEPRECATION") if (darkIcons) { window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR } else { window.decorView.systemUiVisibility = window.decorView.systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() } } }
/**
- Set the navigation bar color.
- @param color The desired [Color] to set. This may require modification if running on an
- API level that only supports white navigation bar icons. Additionally this will be ignored
- and [Color.Transparent] will be used on API 29+ where gesture navigation is preferred or the
- system UI automatically applies background protection in other navigation modes.
- @param darkIcons Whether dark navigation bar icons would be preferable. Only available on
- API 26+.
- @param transformColorForLightContent A lambda which will be invoked to transform [color] if
- dark icons were requested but are not available. Defaults to applying a black scrim. */ override fun setNavigationBarColor( color: Color, darkIcons: Boolean, transformColorForLightContent: (Color) -> Color ) { val navBarColor = when { Build.VERSION.SDK_INT >= 29 -> Color.Transparent // For gesture nav darkIcons && Build.VERSION.SDK_INT < 26 -> transformColorForLightContent(color) else -> color } window.navigationBarColor = navBarColor.toArgb()
  
  if (Build.VERSION.SDK_INT >= 26) { @Suppress("DEPRECATION") if (darkIcons) { window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR } else { window.decorView.systemUiVisibility = window.decorView.systemUiVisibility and View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR.inv() } } }
/**
- Set the status and navigation bars to [color].
- @see setStatusBarColor
- @see setNavigationBarColor */ override fun setSystemBarsColor( color: Color, darkIcons: Boolean, transformColorForLightContent: (Color) -> Color ) { setStatusBarColor(color, darkIcons, transformColorForLightContent) setNavigationBarColor(color, darkIcons, transformColorForLightContent) } }

/**

An [androidx.compose.runtime.Ambient] holding the current [SysUiController]. Defaults to a
no-op controller; consumers should [provide][androidx.compose.runtime.Providers] a real one. */ val SysUiController = staticAmbientOf { FakeSystemUiController }

private val BlackScrim = Color(0f, 0f, 0f, 0.2f) // 20% opaque black private val BlackScrimmed: (Color) -> Color = { original -> BlackScrim.compositeOver(original) }

/**

A fake implementation, useful as a default or used in Previews. */ private object FakeSystemUiController : SystemUiController { override fun setStatusBarColor( color: Color, darkIcons: Boolean, transformColorForLightContent: (Color) -> Color ) = Unit

override fun setNavigationBarColor( color: Color, darkIcons: Boolean, transformColorForLightContent: (Color) -> Color ) = Unit

override fun setSystemBarsColor( color: Color, darkIcons: Boolean, transformColorForLightContent: (Color) -> Color ) = Unit }

Please reformat your answer and reduce it to a minimal working example — xdevs23, Mar 21 '21 at 16:16

how to change statusbar color in jetpack compose?

9 Answers9

Linked