Navigation Component

Why Navigation Component?

Before the Navigation Component, developers managed fragments manually with FragmentTransactions, passing arguments through Bundle strings with no type safety. The Navigation Component provides:

• Declarative graph: define all routes in one place
• Type-safe arguments: compile-time checked argument passing
• Deep linking: URI-based navigation to any screen
• Back stack management: automatic handling of back press

NavHost and NavController

In Compose, Navigation works with NavHost and NavController:

@Composable
fun AppNavGraph() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(
                onOrderClick = { orderId ->
                    navController.navigate("order/$orderId")
                }
            )
        }
        composable("order/{orderId}") { backStackEntry ->
            val orderId = backStackEntry.arguments?.getString("orderId") ?: return@composable
            OrderScreen(orderId = orderId)
        }
    }
}

NavHost renders the composable for the current route. navController manages navigation and back stack.

Route as a Sealed Class

For type safety without safe args, use a sealed class:

sealed class Screen(val route: String) {
    data object Home : Screen("home")
    data class Order(val orderId: String) : Screen("order/{orderId}")
    data object Settings : Screen("settings")
}

NavHost(navController, startDestination = Screen.Home.route) {
    composable(Screen.Home.route) { HomeScreen() }
    composable(
        route = Screen.Order.route,
        arguments = listOf(navArgument("orderId") { type = NavType.StringType })
    ) { backStackEntry ->
        val orderId = backStackEntry.arguments?.getString("orderId")
        OrderScreen(orderId = orderId!!)
    }
}

Safe Args

Safe Args generates type-safe code for argument passing. Add the Gradle plugin and define arguments in the navigation graph XML (or programmatically).

With Gradle plugin applied, arguments are accessed directly:

composable(
    route = "order/{orderId}",
    arguments = listOf(
        navArgument("orderId") {
            type = NavType.StringType
            nullable = false
        }
    )
) { backStackEntry ->
    val orderId = backStackEntry.arguments?.getString("orderId") ?: return@composable
    OrderScreen(orderId = orderId)
}

Arguments and Default Values

navArgument("page") {
    type = NavType.IntType
    defaultValue = 1
}

Deep Links

Deep links allow navigating to a screen from outside the app (notification, link, another app):

composable(
    route = "order/{orderId}",
    deepLinks = listOf(
        navDeepLink {
            uriPattern = "myapp://orders/{orderId}"
        }
    )
) { backStackEntry ->
    val orderId = backStackEntry.arguments?.getString("orderId")
    OrderScreen(orderId = orderId!!)
}

Register the intent filter in AndroidManifest.xml:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:host="orders" />
</intent-filter>

Nested Navigation

For feature modules with their own navigation graph:

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }

    navigation(startDestination = "orderList", route = "orders") {
        composable("orderList") { OrderListScreen() }
        composable("orderDetail/{id}") { OrderDetailScreen() }
    }
}

Nested graphs keep feature-level navigation contained while sharing the same navController.