how to change statusbar color in jetpack compose?

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

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/

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

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

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

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.

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>

Here's my solution without accompanist and pretty minimal. All is done in the Theme definition. This is the standard code that comes out if you create a new compose project, but with the block in the middle added:

@Composable
fun JtxBoardTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val activity  = view.context as Activity
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                activity.window.navigationBarColor = colorScheme.primary.copy(alpha = 0.08f).compositeOver(colorScheme.surface.copy()).toArgb()
                activity.window.statusBarColor = colorScheme.background.toArgb()
                WindowCompat.getInsetsController(activity.window, view).isAppearanceLightStatusBars = !darkTheme
                WindowCompat.getInsetsController(activity.window, view).isAppearanceLightNavigationBars = !darkTheme
            }
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

I am applying a color on the status and navigation bar. The color for the navigation bar is calculated as I would like to use the same color as the bottom app bar (which has an elevation of 2 which means a color overlay of the primary color of 8%).

            WindowCompat.getInsetsController(activity.window, view).isAppearanceLightStatusBars = !darkTheme
            WindowCompat.getInsetsController(activity.window, view).isAppearanceLightNavigationBars = !darkTheme

Those two lines takes care of the icons in the navigation and status bar. As WindowCompat.getInsetsController(activity.window, view).isAppearanceLightNavigationBars = !darkTheme is only available from Android API level 26 (O), I have limited the whole block to this version. If you only want a color for the status bar, then you could also go to min API level 23 (M).

I am not happy with the way how I calculate the color for the navigation bar, but it was the best way that worked also with dynamic colors.

If you're not interested in using the accompanist library, you can write this code into your composable function:

val activity = LocalView.current.context as Activity
val backgroundArgb = MaterialTheme.colors.background.toArgb()
activity.window.statusBarColor = backgroundArgb

Also, for changing status bar icon color you can do like this:

val wic = WindowCompat.getInsetsController(window, window.decorView)
wic.isAppearanceLightStatusBars = false // Adapt it with your implementation

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

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

   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 }