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

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

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

Tags:

Related entries:

Jetpack Compose Paging Sample

Jetpack Compose Check Permission (Accompanist)

Jetpack Compose Show Snackbar

Jetpack Compose load Firestore Data with Flow

Jetpack Compose Load Image With Coil

Android Jetpack Compose BottomNavigationBar With Compose Navigation

Android Jetpack Compose BottomNavigationBar

Guide to Start Learning Jetpack Compose