Implementing back navigation in Jetpack Compose

Question

I've got a top bar with IconButton for handling back navigation when clicked.

Function passed as callback's implemented like this:

private fun navigateBack(navController: NavController) {
    val route = navController.previousBackStackEntry?.destination?.route ?: ""
    navController.navigate(route)
}

Unfortunately, it's not working the same as the default android bottom navigation shown in the picture

Is there a way to implement the same back navigation as bottom system navigation has?

Answer 1

You can pass your NavController to your TopAppBar and use navController.navigateUp() in the navigation icon.

If you want to show this icon only in some composables you can use a parameter, like canPop in the following example, and set it true in the composable where you want handle the back button.

if (canPop) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = {
            IconButton(onClick = {
                navController.navigateUp()
            }) {
                Icon(Icons.Rounded.ArrowBack, "")
            }
        },
        backgroundColor = MaterialTheme.colors.TopBarColor)
} else {
    TopAppBar(
        title = { Text(text = title) },
        backgroundColor = MaterialTheme.colors.TopBarColor
    )
}

Check also popBackStack documentation

Attempts to pop the controller's back stack. Analogous to when the user presses the system Back button when the associated navigation host has focus.