Jetpack compose: How to change NavigationBar color

Jetpack Compose - Changing NavigationBar Color

This code demonstrates how to modify the NavigationBar color in a Jetpack Compose application. It utilizes the accompanist-systemuicontroller library from Google to access and manipulate the system UI elements.

Code Breakdown:

  1. Dependencies: The build.gradle snippet specifies the dependency on accompanist-systemuicontroller library. This library provides functionalities for interacting with the system UI, including the NavigationBar.

  2. MainActivity: This class represents the main activity of the application. It sets the content of the screen using setContent function within the onCreate method.

  3. GetScaffold: This Composable function defines the overall layout structure of the app using the Scaffold composable. It includes a TopAppBar with a title and a background color, the main content (MainContent), and a background color for the entire screen.

  4. MainContent: This Composable builds the central content area. Here's what happens:

    • rememberSystemUiController: This line retrieves a reference to the SystemUiController instance, allowing interaction with system UI elements.
    • systemUiController.setNavigationBarColor(Color.Green): This line sets the initial color of the NavigationBar to green.
    • Box: This container lays out its child composables (Button) centered within the available space.
    • Button: This button triggers an action when clicked. Clicking the button calls systemUiController.setNavigationBarColor(Color.Blue), which changes the NavigationBar color to blue.

Summary:

This example showcases how to dynamically control the NavigationBar color in Jetpack Compose. By leveraging the accompanist-systemuicontroller library, developers can customize the system UI elements to enhance the app's visual appearance and user experience.


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 NavigationBar Color")},
                backgroundColor = Color(0xFF5F9EA0),
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFEFDECD)
        )
    }


    @Composable
    fun MainContent() {
        val systemUiController = rememberSystemUiController()
        systemUiController.setNavigationBarColor(Color.Green)

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

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