How to hide navigationbar when showing dialog in jetpack compose?

Viewed 750

I hided the navigationbar in jetpack compose.
But, when i show a dialog, the navigationbar also shows.
I want to hide the navigationbar when showing the dialog.
Please see GIF animation for details

Please let me know if you have a good idea.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            SampleComposeTheme {
                var showDialog by remember { mutableStateOf(false) }
                OutlinedButton(
                    onClick = { showDialog = true }
                ) {
                    Text("Button")
                }

                if (showDialog) {
                    AlertDialog(
                        onDismissRequest = {},
                        text = {
                            Text("Alert")
                        },
                        confirmButton = {
                            Button(onClick = { showDialog = false }) {
                                Text("ConfirmButton")
                            }
                        }
                    )
                }
            }
        }

        window.insetsController?.apply {
            hide(WindowInsets.Type.navigationBars())
            systemBarsBehavior =
                WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
        }
    }
}

1 Answers

You can use Google's Accompanist library which provides utilities for updating the system UI bar within Compose.Accompanist

implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"

val systemUiController = rememberSystemUiController()
        systemUiController.isStatusBarVisible = false // Status bar
        systemUiController.isNavigationBarVisible = false // Navigation bar
        systemUiController.isSystemBarsVisible = false // Status & Navigation bars
        systemUiController.navigationBarDarkContentEnabled =false
Related