Changing the Status Bar Color in Jetpack Compose

Every problem solved is a lesson learned. #AndroidTips #SolvedProblemToday

Jetpack Compose

Changing the status bar color is a common task when designing Android applications. With Jetpack Compose, it’s a simple process that can be done in just a few lines of code. (Only for Compose Material 2. If you are using Compose Material 3, please check the section below after Compose Material 2)

Compose Material 2

Changing the Status Bar Color in Jetpack Compose

To change the status bar color in Jetpack Compose, we can use the SystemUiController provided by the androidx.compose.ui.platform package.

First, we need accompanist-systemuicontroller, Add the dependency to your app’s build.gradle file:

dependencies {
    implementation "com.google.accompanist:accompanist-systemuicontroller:x.y.z"
}

Note: Replace x.y.z with the latest version number of accompanist-systemuicontroller.

We need to create a composable function that will set the status bar color (create class SetStatusBarColor.kt). Here’s an example:

@Composable
fun SetStatusBarColor(color: Color) {
    val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setSystemBarsColor(color)
    }
}

In this function, we use the rememberSystemUiController to get a reference to the SystemUiController, which we then use to set the system bars color using the setSystemBarsColor method.

Next, we can call this function in our main @Composable function on MainActivity, like this:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourAppNameTheme {
                StatusBarColor(color = MaterialTheme.colors.primary)
                // Other content here, example :
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    YourAppClass()
                }
            }
        }
    }
}

In this example, we set the status bar color to blue by passing a Color object to the SetStatusBarColor function.

And that’s it! With just a few lines of code, we can easily change the status bar color in our Jetpack Compose-based Android application.

Using SystemUiController is not only limited to changing the status bar color, it can be used for other system UI configurations as well, such as the navigation bar, immersive mode, and more.

Compose Material 3

in Theme.kt file edit this :

@Composable
fun YourTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+, 
    // And it is set to false for versions older than that.
    dynamicColor: Boolean = false,
    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 = Color.White.toArgb() // change color status bar here
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
        }
    }

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

Done and dusted, thank you! 🎉

I have sample app using jetpack compose in my repository github.com/im-o. (branch develop-M3 for Material 3 and develop-material-2 for Material 2)

GitHub - im-o/jetpack-compose-clean-architecture: Jetpack Compose with usecase pattern 🎉