Jetpack compose: How to hide navigation bar

Jetpack Compose - Hiding the Navigation Bar

This code demonstrates how to hide the navigation bar programmatically in a Jetpack Compose application. It utilizes the accompanist-systemuicontroller library to interact with the system UI elements.

Breakdown:

  1. MainActivity: This is the entry point of the application. It sets the content of the activity using setContent with the GetScaffold composable function.

  2. GetScaffold: This composable builds the main layout structure using a Scaffold element.

    • topBar: Defines the top app bar with title and styling.
    • content: Defines the content area of the screen, which in this case is filled by the MainContent composable.
    • backgroundColor: Sets the background color for the entire scaffold.

  3. MainContent: This composable retrieves a reference to the SystemUiController using rememberSystemUiController. It then directly sets the isNavigationBarVisible property of the controller to false to hide the navigation bar.

  4. build.gradle: The dependency for accompanist-systemuicontroller library is included with version 0.17.0 specified.

Summary

This code snippet provides a simple yet effective way to hide the navigation bar in a Jetpack Compose app. By leveraging the accompanist-systemuicontroller library, you gain programmatic control over the system UI elements, allowing for a more immersive user experience when needed. Remember to consider the trade-offs of hiding the navigation bar, as users might expect it to be accessible.


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 - Hide NavigationBar")},
                backgroundColor = Color(0xFF4B5320),
                contentColor = Color.White
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFEFBBCC)
        )
    }


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

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