Jetpack compose: How to change StatusBar color

The code demonstrates how to change the StatusBar color in a Jetpack Compose app. It achieves this by using the rememberSystemUiController composable from the accompanist-systemuicontroller library.

The code first creates a MainActivity class that inherits from ComponentActivity. The onCreate method of this class sets the content of the activity using the setContent composable. The content of the activity is a call to the GetScaffold composable.

The GetScaffold composable creates a Scaffold layout, which is a common layout structure in Jetpack Compose. The Scaffold layout has three main sections: the top bar, the content, and the bottom bar.

In this example, the top bar is a TopAppBar with a title and a background color. The content is a Box that fills the entire screen. Inside the Box, there is a Button that changes the StatusBar color when clicked.

The MainContent composable is responsible for changing the StatusBar color. It first calls the rememberSystemUiController composable to get a reference to the system UI controller. The system UI controller provides access to various system UI features, including the StatusBar.

The setStatusBarColor method of the system UI controller is then called to set the StatusBar color to dark gray. The onClick event handler of the Button calls setStatusBarColor again, this time setting the color to blue.

Here is a table summarizing the key parts of the code:

Composable	Description
GetScaffold	Creates a Scaffold layout with a top bar, content, and bottom bar.
TopAppBar	The top bar of the Scaffold layout.
MainContent	The content of the Scaffold layout.
Button	A button that changes the StatusBar color when clicked.
rememberSystemUiController	Gets a reference to the system UI controller.
setStatusBarColor	Sets the color of the StatusBar.

MainActivity.kt


package com.cfsuman.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.google.accompanist.systemuicontroller.rememberSystemUiController


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {GetScaffold()}
    }


    @Composable
    fun GetScaffold() {
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(text = "Compose - Set StatusBar Color")},
                backgroundColor = Color(0xFF5F9EA0),
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFEFDECD)
        )
    }


    @Composable
    fun MainContent() {
        val systemUiController = rememberSystemUiController()
        systemUiController.setStatusBarColor(Color.DarkGray)

        Box(Modifier.fillMaxSize().wrapContentSize(Alignment.Center)) {
            Button(onClick = {
                systemUiController.setStatusBarColor(
                    color = Color.Blue
                )
            }) {
                Text(text = "Set StatusBar Color Blue")
            }
        }
    }
}

build.gradle[app] dependencies


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