First, my app follows a single-activity architecture, and the activity code is as follows:

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activitySetting()

        setContent {
            TableorderTheme {
                TableOrderApp()
            }
        }
    }

    private fun activitySetting() {
        WindowCompat.setDecorFitsSystemWindows(window, false)

        window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)

        val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
        windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
    }
}

I’m using Jetpack Compose with a navigation graph and navigating via navGraphBuilder.

@Composable
fun MyNavHost(
    navController: NavHostController
) {
NavHost(navController = navController, startDestination = Screen.Sign.route) {

    composable(route = Screen.Sign.route) {

        SignScreen(
            signInButtonClickListener = {
                navController.navigate(Screen.Main.route)
            }
        )
    }

    composable(route = Screen.Main.route) {
        MainScreenV2(
            settingButtonClickListener = {
                navController.navigate(Screen.SettingDialog.route)
            }
        )
    }

    composable(route = Screen.Setting.route) {
        SettingScreenV2(
            onDismissRequest = {
                Log.e(URGENT_TAG, "Setting Screen Dismiss")
                navController.popBackStack(route = Screen.Main.route, inclusive = false)
            }
        )
    }

    // issue occurring
    dialog(route = Screen.SettingDialog.route) {
        SettingDialogScreen(
            onDismissRequest = { navController.popBackStack(route = Screen.Main.route, inclusive = false) },
            onSignOutButtonClickListener = { navController.navigate(Screen.Sign.route) },
            onSettingScreenButtonClickListener = {
                navController.popBackStack()
                navController.navigate(Screen.Setting.route)
            },
        )
    }
}}

When I navigate to a dialog, the bottom system bar appears by default. To hide it, I’ve added the following code inside my dialog composable:

val systemUIController = rememberSystemUiController()
systemUIController.isNavigationBarVisible = false

When navigating to the dialog, the bottom system bar briefly appears before disappearing. I want the bottom system bar to never be visible at all. Any help would be greatly appreciated!

First, my app follows a single-activity architecture, and the activity code is as follows:

@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activitySetting()

        setContent {
            TableorderTheme {
                TableOrderApp()
            }
        }
    }

    private fun activitySetting() {
        WindowCompat.setDecorFitsSystemWindows(window, false)

        window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)

        val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
        windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())
    }
}

I’m using Jetpack Compose with a navigation graph and navigating via navGraphBuilder.

@Composable
fun MyNavHost(
    navController: NavHostController
) {
NavHost(navController = navController, startDestination = Screen.Sign.route) {

    composable(route = Screen.Sign.route) {

        SignScreen(
            signInButtonClickListener = {
                navController.navigate(Screen.Main.route)
            }
        )
    }

    composable(route = Screen.Main.route) {
        MainScreenV2(
            settingButtonClickListener = {
                navController.navigate(Screen.SettingDialog.route)
            }
        )
    }

    composable(route = Screen.Setting.route) {
        SettingScreenV2(
            onDismissRequest = {
                Log.e(URGENT_TAG, "Setting Screen Dismiss")
                navController.popBackStack(route = Screen.Main.route, inclusive = false)
            }
        )
    }

    // issue occurring
    dialog(route = Screen.SettingDialog.route) {
        SettingDialogScreen(
            onDismissRequest = { navController.popBackStack(route = Screen.Main.route, inclusive = false) },
            onSignOutButtonClickListener = { navController.navigate(Screen.Sign.route) },
            onSettingScreenButtonClickListener = {
                navController.popBackStack()
                navController.navigate(Screen.Setting.route)
            },
        )
    }
}}

When I navigate to a dialog, the bottom system bar appears by default. To hide it, I’ve added the following code inside my dialog composable:

val systemUIController = rememberSystemUiController()
systemUIController.isNavigationBarVisible = false

When navigating to the dialog, the bottom system bar briefly appears before disappearing. I want the bottom system bar to never be visible at all. Any help would be greatly appreciated!

• android
• android-jetpack-compose
• android-jetpack-compose-navigation

1 Answer 1

You have to create composable to hide bottom system bar. I am attaching HideNavigationBar

@Composable
fun HideNavigationBar() {
    val window = (LocalView.current.parent as? DialogWindowProvider)?.window
    val view = LocalView.current
    val windowInsetsController = window?.let { WindowCompat.getInsetsController(it, view) }

    LaunchedEffect(view) {
        windowInsetsController?.apply {
            systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
            hide(WindowInsetsCompat.Type.navigationBars())
        }
    }
}

You should call it in Dialog content composable. example:

@Composable
fun MyDialog(isOpen: Boolean, onDismiss: () -> Unit) {
    if (isOpen) {
        Dialog(onDismissRequest = onDismiss) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White)
            ) {
                HideNavigationBar() // Call it inside Dialog
                Text("Dialog Content", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

In your case you need to call HideNavigationBar anyone in SettingDialogScreen Let me know results if not works I have another solutions too.