Jetpack compose: How to change SystemBars color

Jetpack Compose - Dynamic SystemBar Color Change

This example demonstrates how to change the color of the system bars (status bar and navigation bar) dynamically in a Jetpack Compose application. It utilizes the accompanist-systemuicontroller library to achieve this functionality.

Code Breakdown:

  1. Dependencies: The build.gradle file includes the accompanist-systemuicontroller library as a dependency. This library provides access to the system UI controller, which allows you to modify various aspects of the system UI, including its colors.

  2. MainActivity:

    • This is the main activity class that sets up the content of the app using setContent.

  3. GetScaffold:

    • This Composable function defines the overall layout of the app using a Scaffold element.
    • It includes a TopAppBar with a title and a background color.
    • The content parameter is filled with the MainContent Composable.
    • The backgroundColor of the Scaffold is also set.

  4. MainContent:

    • This Composable defines the content displayed within the app.
    • It uses rememberSystemUiController to access the system UI controller for the current composition.
    • The setSystemBarsColor function of the controller is called initially, setting the system bars to blue.
    • A Box with fillMaxSize modifier is used to center a Button.
    • Clicking the button triggers another call to setSystemBarsColor, changing the system bars to red.

Summary:

This example showcases how to leverage the accompanist-systemuicontroller library to dynamically control the color of the system bars in your Jetpack Compose app. You can easily adapt this approach to change the system bar color based on user interactions, app theme, or other conditions within your composables.


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 SystemBars Color")},
                backgroundColor = Color(0xFF8DB600)
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFBFAFB2)
        )
    }


    @Composable
    fun MainContent() {
        val systemUiController = rememberSystemUiController()
        systemUiController.setSystemBarsColor(Color.Blue)

        Box(Modifier.fillMaxSize().wrapContentSize(Alignment.Center)) {
            Button(onClick = {
                systemUiController.setSystemBarsColor(
                    color = Color.Red
                )
            }) {
                Text(text = "Set SystemBars Color Red")
            }
        }
    }
}
build.gradle[app] dependencies 

implementation "com.google.accompanist:accompanist-systemuicontroller:0.17.0"
More android jetpack compose tutorials