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

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Jetpack Compose ModalBottomSheetLayout Sample

Jetpack Compose LazyColumn of Clickable Icon With Text

Jetpack Compose LazyVerticalGrid Within LazyColumn

Jetpack Compose Nested Lazycolumn

Jetpack Compose Paging Group Items Under Header

Jetpack Compose Google Places Show Nearby Places

Jetpack Compose Show Confirm Dialog

Jetpack Compose Show TextField with Popup Date and Time Picker

Jetpack Compose Show Progress Bar Dialog