Jetpack compose: How to hide system bars

Jetpack Compose - Hiding System Bars

This code demonstrates how to hide the system bars (status bar and navigation bar) in a Jetpack Compose application. It achieves this by leveraging the accompanist-systemuicontroller library.

Code Breakdown:

  1. Imports: The code imports necessary classes for building the UI and accessing the system UI controller.
  2. MainActivity: This is the main activity class that extends ComponentActivity. It sets the content of the activity using setContent during onCreate.
  3. GetScaffold: This composable function builds the main layout structure using Scaffold. It defines three sections:
    • topBar: This defines the top bar using TopAppBar with a title, background color, and content color.
    • content: This section displays the main content of the app, represented by the MainContent composable.
    • backgroundColor: This sets the background color for the entire scaffold.
  4. MainContent: This composable retrieves the SystemUiController using rememberSystemUiController and then sets isSystemBarsVisible to false to hide both the status and navigation bars.

Summary:

This example showcases a simple yet effective approach to hiding system bars in Jetpack Compose. By utilizing the accompanist-systemuicontroller library, the code achieves a clean separation of UI logic and system bar management. Remember, depending on your app's needs, you might want to consider showing or hiding the system bars conditionally.


MainActivity.kt 

package com.cfsuman.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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 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 - How To Hide System Bars")},
                backgroundColor = Color(0xFF592720),
                contentColor = Color.White
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFC2B280)
        )
    }


    @Composable
    fun MainContent() {
        val systemUiController = rememberSystemUiController()
        // hide system bars (status bar + navigation bar) programmatically
        systemUiController.isSystemBarsVisible = false
    }
}
build.gradle[app] dependencies 

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