Navigation Compose

Why a navigation library?

Real apps have many screens: home, product details, cart, checkout, profile. You need to move between them, pass data (which product?), and make the system Back button behave correctly. Doing this by hand is error-prone. Navigation Compose, part of Android Jetpack, manages it for you inside a single activity.

Type-safe routes

Older Navigation code used string routes like "details/{id}", where a typo or a wrong argument type crashed at run time. Since Navigation 2.8, routes can be Kotlin types marked @Serializable (from the kotlinx.serialization plugin). The compiler then checks that you pass the right arguments.

import kotlinx.serialization.Serializable

@Serializable object Home
@Serializable data class ProductDetails(val productId: Int)
@Serializable object Cart

@Composable
fun ShopApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = Home) {
        composable<Home> {
            HomeScreen(onProductClick = { id -> navController.navigate(ProductDetails(id)) })
        }
        composable<ProductDetails> { backStackEntry ->
            val route: ProductDetails = backStackEntry.toRoute()
            DetailsScreen(
                productId = route.productId,
                onAddedToCart = { navController.navigate(Cart) },
                onBack = { navController.popBackStack() },
            )
        }
        composable<Cart> { CartScreen() }
    }
}

The back stack

Start:            [Home]
Tap product 42:   [Home, ProductDetails(42)]
Add to cart:      [Home, ProductDetails(42), Cart]
Press Back:       [Home, ProductDetails(42)]

Sometimes you do not want a screen to stay in the back stack. After login, the user should not go "back" to the login screen. Use navOptions: navController.navigate(Home) { popUpTo<Login> { inclusive = true } } removes Login before showing Home.

Good habits

• Pass only small IDs as arguments (productId), not whole objects. The next screen loads the details from the repository. This survives process death and keeps routes simple.
• Do not pass the NavController deep into your composables. Pass lambdas like onProductClick, so screens stay reusable and testable.
• Bottom navigation (a NavigationBar with Home, Search, Orders) uses the same NavHost; each tab navigates to a top-level destination.

Navigation 3

Google has also released Navigation 3, a newer library designed around Compose where you own the back stack as a list in your state. It is a good option for new projects; the ideas above (destinations, back stack, passing IDs) still apply. Check the current Android documentation to decide which library your project should use.

Common mistakes

• Forgetting the kotlinx.serialization plugin and @Serializable on route types: a run-time or build error.
• Creating a new NavController inside a screen instead of using the one from rememberNavController at the top.
• Passing large objects through navigation instead of an ID.
• Leaving the login screen in the back stack after sign-in.