Jetpack compose: How to hide status bar

Jetpack Compose - Hiding the Status Bar Programmatically

This code demonstrates how to hide the status bar in a Jetpack Compose application. It utilizes the accompanist-systemuicontroller library to achieve this functionality.

The code is structured within a MainActivity class extending ComponentActivity. Let's break down the key functionalities:

  1. Setting Up the Content:

    • The onCreate method sets the content of the activity using setContent. This function takes a composable function that defines the UI hierarchy. In this case, it calls the GetScaffold composable.

  2. Scaffold for Application Structure:

    • GetScaffold defines the overall application structure using a Scaffold composable. This provides a standard layout with optional elements like a top bar, content area, and background color.

  3. Top Bar for Title:

    • The topBar property of Scaffold defines the top app bar using TopAppBar. This displays the app title ("Compose - How To Hide StatusBar") and sets its background color.

  4. Content Area:

    • The content property defines the main content area using the MainContent composable.

  5. Hiding the Status Bar:

    • Inside MainContent, the rememberSystemUiController function retrieves a reference to the system UI controller.
    • By setting systemUiController.isStatusBarVisible to false, the code programmatically hides the status bar for the current screen.

  6. Background Color:

    • The Scaffold and the content area (MainContent) set their own background colors using the Color composable from Jetpack Compose's material library.

  7. Dependency:

    • The build.gradle file ensures the necessary library (accompanist-systemuicontroller) is included in the project's dependencies.

Summary

This example effectively demonstrates hiding the status bar in Jetpack Compose using the accompanist-systemuicontroller library. The code leverages composables like Scaffold, TopAppBar, and MainContent to structure the UI and employs the system UI controller to manipulate the status bar visibility. Remember, hiding the status bar might impact user experience, so use it judiciously in your applications.


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 StatusBar")},
                backgroundColor = Color(0xFF91A3B0)
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFA9B2C3)
        )
    }


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

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