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

score 101 · Answer 1 · edited Nov 01 '22 at 10:06

101

Step 1 (add dependency) => version may change

implementation "com.google.accompanist:accompanist-systemuicontroller:0.27.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 access all types of customizations you need for your app. Above is a sample for setSystemBarsColor

edited Nov 01 '22 at 10:06

James Pullar

203
1
7

answered Aug 21 '21 at 19:27

dolar

1,555
1
10
9

5

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
3

Be aware the code in `SideEffect` section (in `theme.kt`) can modify the behavior, as the default compose project template does. – thetaprime Oct 10 '22 at 07:16
For the if statement, you can key off of `isSystemInDarkTheme()` – James Pullar Oct 30 '22 at 15:51
after adding this library preview stopped working and then removing again preview worked. – Bilal Bangash Nov 03 '22 at 14:30
2

What is the difference between SystemBars and StatusBar?? – Arst Nov 28 '22 at 03:24
Apparently there is some issue with accompanist. It works and set color only if I am coming back to that screen, not in the first go – Cyph3rCod3r Dec 13 '22 at 11:49
@Arst I think system bar is interchangeable with status bar, see also https://m2.material.io/design/platform-guidance/android-bars.html – FalloutBoy Feb 01 '23 at 12:06

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

60

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

852
9
12

This library is not helpful for coloring the bars any more – Arthur Khazbs Aug 15 '22 at 15:51
Why is that a thing? – Mieszko Koźma Aug 30 '22 at 08:01
@ArthurKhazbs so what should we use instead? – MohammadBaqer Sep 24 '22 at 17:17
1

@MohammadBaqer I think [`androidx.core.view.WindowInsetsControllerCompat`](https://developer.android.com/reference/androidx/core/view/WindowInsetsControllerCompat) should do it. Take a look at this [`Theme.kt`](https://gist.github.com/Khazbs/1f1f1b5c05f45dbfa465f249b1e20506) snippet as a template/example. – Arthur Khazbs Sep 24 '22 at 22:51
1

@MohammadBaqer Oh, of course, forgot to mention the main darn thing: [`android.view.Window.setStatusBarColor`](https://developer.android.com/reference/android/view/Window#setStatusBarColor(int)) and [`android.view.Window.setNavigationBarColor`](https://developer.android.com/reference/android/view/Window#setNavigationBarColor(int)) – Arthur Khazbs Sep 24 '22 at 23:00

score 17 · Answer 3 · 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>

You can change or add colors in `src/main/res/values/colors.xml` and then use them in `src/main/res/values/themes.xml` If you add a color in colors.xml: `#FFff5a00` you can then change it in themes.xml `@color/orangePlain` — Steffo Dimfelt, Apr 06 '23 at 19:01

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

15

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

12,083
7
65
69

9

with compose there is no theme.xml – Carmen Aug 02 '22 at 07:56
@Carmen There is you can still use the XML themes but you will have more than one source of truth – Farid Feb 10 '23 at 06:29
This is close, but with whiteish themes, the statusbar icons stay white. – dessalines Mar 15 '23 at 15:19
Adding `true` seemed to do the correct icon colors for both light and dark themes. – dessalines Mar 15 '23 at 15:23

score 13 · Answer 5 · 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 12 · Answer 6 · answered Jun 27 '22 at 17:20

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.

Why are you wrapping everything inside that `if` check for the android version when you can only put that line for navigation inside the `if`? — YaMiN, Aug 23 '22 at 21:57
@yamin I wanted to either set both (navigationBarColor AND statusBarColor) or keep the standard colors for both bars for older Android versions. But I guess this is a matter of taste. For sure you could also just put the one technically relevant line in the if check for the version code. — Patrick Lang, Aug 25 '22 at 06:49

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

9

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

187
1
8

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
You can use `@android:color/transparent` instead of declare it – Iglesias Leonardo Dec 20 '22 at 21:56

MohammadReza Eram · Answer 8 · 2022-08-23T19:50:51.310

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

score 5 · Answer 9 · answered Feb 24 '23 at 16:19

Slight modification of @Patrik Lang, you can use this inside any @Composable functions:

@Composable
fun StatusBarColor(color: Color) {
    val view = LocalView.current
    val darkTheme = isSystemInDarkTheme()

    if (!view.isInEditMode) {
        SideEffect {
            (view.context as Activity).window.statusBarColor = color.toArgb()
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = !darkTheme
            ViewCompat.getWindowInsetsController(view)?.isAppearanceLightNavigationBars = !darkTheme
        }
    }
}

score 5 · Answer 10 · answered May 08 '23 at 15:06

In Jetpack material3

Here's the theme.kt file that you need to modify.

[I comment that out where you need to make changes]

@Composable
fun WellnessTheme(
    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 window = (view.context as Activity).window
          window.statusBarColor = colorScheme.background.toArgb() // here change the color
          window.navigationBarColor = colorScheme.background.toArgb() // here change the color

          // here change the status bar element color
          WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
      }
    }

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

score 4 · Answer 11 · answered Jan 09 '23 at 11:26

In your Theme use this to change status bar color

val view = LocalView.current
if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = if (darkTheme)  Color.Black.toArgb() else Purple40.toArgb()

    }
}

guerdaa · Answer 12 · 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 2 · Answer 13 · answered Apr 15 '23 at 21:18

Open your Theme.kt and change the base code to this:

            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.background.toArgb()
            val wic = WindowCompat.getInsetsController(window, view)
            wic.isAppearanceLightStatusBars = !darkTheme

score 1 · Answer 14 · answered Jan 07 '21 at 11:20

1

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,732
2
16
29

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

score 1 · Answer 15 · answered Aug 29 '23 at 14:56

This is how I approached this case:

I used the surface color for the status bar color, then added the not (!) at the darkTheme variable, so as to make the status bar icons visible in cases of light and dark theme.

val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window?.statusBarColor =
                colorScheme.surface.toArgb() // surface becomes the the status bar color

            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars =
                !darkTheme // not darkTheme makes the status bar icons visible
        }
    }

This is my general code

@Composable
fun MyAppNameTheme(
    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 window = (view.context as Activity).window
            window?.statusBarColor =
                colorScheme.surface.toArgb() // surface becomes the the status bar color

            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars =
                !darkTheme // not darkTheme makes the status bar icons visible
        }
    }

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

Results:

My app in light theme

My app in dark theme

score 0 · Answer 16 · answered Aug 23 '23 at 23:31

@Donny Rozendal gave best answer. Just to be clear :

implementation("com.google.accompanist:accompanist-systemuicontroller:0.30.1")

Theme.kt

@Composable
fun OneProjTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val systemUiController = rememberSystemUiController()

    DisposableEffect(systemUiController, darkTheme){
        systemUiController.setSystemBarsColor( color = Color.Transparent, darkIcons = darkTheme)
        //systemUiController.setStatusBarColor(color = Color., darkIcons = darkTheme)
        systemUiController.setNavigationBarColor(color = Color.Transparent, darkIcons = darkTheme)

        onDispose {  }
    }

Activity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)

hcl2000 · Answer 17 · 2023-08-28T04:20:15.773

Updated answer Google's Accompanist library collection has has some changes and the systemuicontroller library is now deprecated.

The primary use case was to make it easier to go edge-to-edge. For this use case, there is now a direct replacement: Activity.enableEdgeToEdge

Keep the following in mind when using it:

The default style configures the system bars with a transparent background when contrast can be enforced by the system (API 29 or above).

To solve the problem post-deprecation, place this in your calling activity:

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)
    // ...
}

score -1 · Answer 18 · answered Jan 14 '23 at 10:58

This does the job

It works like a charm. Trust me

You can check the whole project here https://github.com/samuel23taku/WeatherApp


// Material 3
package com.example.weatherapp_jetpack_compose.ui.theme
import android.app.Activity
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat


    private val LightColors = lightColorScheme(
        primary = md_theme_light_primary,
        onPrimary = md_theme_light_onPrimary,
        primaryContainer = md_theme_light_primaryContainer,
        onPrimaryContainer = md_theme_light_onPrimaryContainer,
        secondary = md_theme_light_secondary,
        onSecondary = md_theme_light_onSecondary,
        secondaryContainer = md_theme_light_secondaryContainer,
        onSecondaryContainer = md_theme_light_onSecondaryContainer,
        tertiary = md_theme_light_tertiary,
        onTertiary = md_theme_light_onTertiary,
        tertiaryContainer = md_theme_light_tertiaryContainer,
        onTertiaryContainer = md_theme_light_onTertiaryContainer,
        error = md_theme_light_error,
        errorContainer = md_theme_light_errorContainer,
        onError = md_theme_light_onError,
        onErrorContainer = md_theme_light_onErrorContainer,
        background = md_theme_light_background,
        onBackground = md_theme_light_onBackground,
        surface = md_theme_light_surface,
        onSurface = md_theme_light_onSurface,
        surfaceVariant = md_theme_light_surfaceVariant,
        onSurfaceVariant = md_theme_light_onSurfaceVariant,
        outline = md_theme_light_outline,
        inverseOnSurface = md_theme_light_inverseOnSurface,
        inverseSurface = md_theme_light_inverseSurface,
        inversePrimary = md_theme_light_inversePrimary,
        surfaceTint = md_theme_light_surfaceTint,
        outlineVariant = md_theme_light_outlineVariant,
        scrim = md_theme_light_scrim,
    )


    private val DarkColors = darkColorScheme(
        primary = md_theme_dark_primary,
        onPrimary = md_theme_dark_onPrimary,
        primaryContainer = md_theme_dark_primaryContainer,
        onPrimaryContainer = md_theme_dark_onPrimaryContainer,
        secondary = md_theme_dark_secondary,
        onSecondary = md_theme_dark_onSecondary,
        secondaryContainer = md_theme_dark_secondaryContainer,
        onSecondaryContainer = md_theme_dark_onSecondaryContainer,
        tertiary = md_theme_dark_tertiary,
        onTertiary = md_theme_dark_onTertiary,
        tertiaryContainer = md_theme_dark_tertiaryContainer,
        onTertiaryContainer = md_theme_dark_onTertiaryContainer,
        error = md_theme_dark_error,
        errorContainer = md_theme_dark_errorContainer,
        onError = md_theme_dark_onError,
        onErrorContainer = md_theme_dark_onErrorContainer,
        background = md_theme_dark_background,
        onBackground = md_theme_dark_onBackground,
        surface = md_theme_dark_surface,
        onSurface = md_theme_dark_onSurface,
        surfaceVariant = md_theme_dark_surfaceVariant,
        onSurfaceVariant = md_theme_dark_onSurfaceVariant,
        outline = md_theme_dark_outline,
        inverseOnSurface = md_theme_dark_inverseOnSurface,
        inverseSurface = md_theme_dark_inverseSurface,
        inversePrimary = md_theme_dark_inversePrimary,
        surfaceTint = md_theme_dark_surfaceTint,
        outlineVariant = md_theme_dark_outlineVariant,
        scrim = md_theme_dark_scrim,
    )

    @Composable
    fun JetpackWeatherTheme(
        useDarkTheme: Boolean = isSystemInDarkTheme(),
        content: @Composable() () -> Unit
    ) {

        val colors = if (!useDarkTheme) {
            LightColors
        } else {
            DarkColors
        }
        val activity = LocalView.current.context as Activity
        val backgroundArgb = colors.background.toArgb()
        activity.window?.statusBarColor = backgroundArgb

        val wic = WindowCompat.getInsetsController(activity.window, activity.window.decorView)
        wic.isAppearanceLightStatusBars = !useDarkTheme
        MaterialTheme(
            colorScheme = colors,
            content = content
        )
    }

score -3 · Answer 19 · 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?

19 Answers19

Linked