Jetpack Compose Navigation

November 3, 2021

Start with Android Jetpack Compose BottomNavigationBar With Compose Navigation.

Create a new screen.

@Composable
fun ImportPhotoScreen(onBack: () -> Unit) {
    Column {
      TopAppBar(
          title = { Text("Import Photos") },
          navigationIcon = {
              IconButton(onClick = { onBack() }) {
                  Icon(
                      imageVector = Icons.Filled.ArrowBack,
                      contentDescription = "Navigate Up",
                      // tint = MaterialTheme.colors.primary
                  )
              }
          },
      )
      Text("Hello")
    }

    BackHandler {
        // optional: overwrite back handler
        onBack()
    }
}

Edit MainActivity Scaffold to add navigation graph for new screen

@Composable
fun JourneyApp() {
    JourneyTheme {
        val navController = rememberNavController()
        
        val onBack: () -> Unit = {
            navController.popBackStack()
        }

        val screens = listOf(
            Screen.Home,
            Screen.Collections,
            Screen.UserProfile
        )

        // https://developer.android.com/jetpack/compose/navigation
        Scaffold(
            bottomBar = {
                BottomNavigation {
                    val navBackStackEntry by navController.currentBackStackEntryAsState()
                    val currentDestination = navBackStackEntry?.destination
                    screens.forEach { screen ->
                        BottomNavigationItem(
                            icon = { Icon(imageVector = screen.icon, contentDescription = screen.label) },
                            label = { Text(screen.label) },
                            selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
                            onClick = {
                                navController.navigate(screen.route) {
                                    // Pop up to the start destination of the graph to
                                    // avoid building up a large stack of destinations
                                    // on the back stack as users select items
                                    popUpTo(navController.graph.findStartDestination().id) {
                                        saveState = true
                                    }
                                    // Avoid multiple copies of the same destination when
                                    // reselecting the same item
                                    launchSingleTop = true
                                    // Restore state when reselecting a previously selected item
                                    restoreState = true
                                }
                            }
                        )

                    }
                }
            }
        ) { innerPadding ->
            Box(modifier = Modifier.padding(innerPadding)) {
                // nav graph
                NavHost(navController = navController, startDestination = Screen.Home.route) {
                    // add new navigation function
                    composable(Screen.Home.route) { HomeScreen(navigateToImportPhoto = { navController.navigate("importPhoto") }) }
                    composable(Screen.Collections.route) { CollectionsScreen() }
                    composable(Screen.UserProfile.route) { UserProfileScreen() }

                    // new screen, not part of bottom nav
                    composable("importPhoto") { ImportPhotoScreen(onBack = onBack) }
                }
            }
        }
    }
}

Edit HomeScreen to allow navigation to ImportPhotoScreen

@Composable
fun HomeScreen() {
    Text(text = "Home")
    Button(onClick = { navigateToImportPhoto() }) {
        Text("Import Photos")
    }
}

Jetpack Compose Hide Bottomnavigation When Navigate to New Screen

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.