Navigating in Jetpack Compose: Mastering Jetpack Navigation Component

Part of the series "Android Development Series by Mircea Ioan Soit"

Navigation is a core part of almost every app, allowing users to move between different screens and interact with various parts of the UI. In Jetpack Compose, Google has provided a powerful navigation system called Jetpack Navigation. This framework simplifies handling navigation, back stack management, and deep links in a declarative and structured way.

In this article, we’ll explore the basics of setting up navigation in Jetpack Compose, covering how to navigate between composables, pass arguments, and handle navigation events like up-button presses and deep linking.

1. Setting Up Navigation in Jetpack Compose

Jetpack Compose’s navigation system relies on the NavHost, NavController, and navigation graphs to handle transitions between different composables (screens).

a) Add Dependencies

Before starting, make sure you include the androidx.navigation:navigation-compose dependency in your build.gradle file:

implementation "androidx.navigation:navigation-compose:2.8.0"        

b) Create a NavHost

The NavHost is a container that holds the destinations (screens) and manages the back stack. First, you need to create a NavController and a NavHost to manage the navigation.

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

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

In this example, NavHost defines the navigation graph with two screens: "home" and "detail". The startDestination is the first screen shown when the app launches.

2. Navigating Between Screens

Navigation in Jetpack Compose is straightforward. You call navController.navigate() to move between screens. Let’s update the HomeScreen to navigate to the DetailScreen:

@Composable
fun HomeScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(onClick = { navController.navigate("detail") }) {
            Text(text = "Go to Detail Screen")
        }
    }
}

@Composable
fun DetailScreen() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Welcome to the Detail Screen")
    }
}        

Here, clicking the button on the HomeScreen will navigate to the DetailScreen. The navController.navigate() method triggers this navigation.

3. Passing Arguments Between Screens

Often, we need to pass data between screens. Jetpack Navigation allows you to pass arguments in the navigation route, just like you would pass parameters in a function.

a) Passing Simple Arguments

Let’s update the DetailScreen to accept an ID as an argument:

NavHost(navController = navController, startDestination = "home") {
    composable("home") { HomeScreen(navController) }
    composable("detail/{itemId}") { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailScreen(itemId)
    }
}        

In this case, we define the route with a placeholder for the argument ({itemId}) and retrieve it inside DetailScreen using backStackEntry.arguments.

b) Navigating with Arguments

To navigate with arguments, pass the values directly into the route string:

Button(onClick = { navController.navigate("detail/123") }) {
    Text(text = "Go to Detail Screen with ID")
}        

Now the DetailScreen will receive 123 as the itemId.

c) Receiving and Using Arguments

Modify the DetailScreen composable to display the passed ID:

@Composable
fun DetailScreen(itemId: String?) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "Detail Screen for Item ID: $itemId")
    }
}        

4. Handling Navigation Events (Back, Up Button)

Jetpack Navigation automatically handles the back stack when navigating between screens. However, you can customize the behavior for cases like showing a dialog when the user presses the back button or providing a custom back navigation action.

a) Handling Back Navigation

To manually handle back navigation, call navController.popBackStack() to navigate back to the previous screen:

Button(onClick = { navController.popBackStack() }) {
    Text(text = "Go Back")
}        

This will pop the current screen off the back stack and return to the previous one.

b) Customizing the Up Button

In a real app, you often want to customize the behavior of the "Up" button in the toolbar. You can handle the back button in a way that suits your needs:

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("Detail Screen") },
            navigationIcon = {
                IconButton(onClick = { navController.popBackStack() }) {
                    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                }
            }
        )
    },
    content = { /* Your screen content */ }
)        

In this example, we create a top bar with a custom back button that calls popBackStack() to return to the previous screen.

5. Deep Linking in Jetpack Compose

Deep linking allows your app to navigate directly to a specific screen when the user clicks a URL or interacts with a notification. Jetpack Compose’s navigation component supports deep linking, letting you route users to the correct destination even when the app is not running.

a) Define Deep Links in NavHost

You can define deep links within your navigation routes. For example, if you want to deep-link to the DetailScreen with a specific item ID:

NavHost(navController = navController, startDestination = "home") {
    composable("detail/{itemId}",
        deepLinks = listOf(navDeepLink { uriPattern = "app://myapp/detail/{itemId}" })
    ) { backStackEntry ->
        val itemId = backStackEntry.arguments?.getString("itemId")
        DetailScreen(itemId)
    }
}        

Now, your app can handle URLs that match the pattern app://myapp/detail/{itemId} and navigate directly to the corresponding DetailScreen.

b) Test the Deep Link

To test the deep link, you can use Android Studio’s Deep Link Testing tool, or send an intent with the URL pattern to your app from a notification or another app.

6. Navigating with Bottom Navigation

In many apps, especially those with multiple primary screens, using Bottom Navigation is common. Jetpack Compose allows you to integrate Bottom Navigation easily with the Navigation Component.

a) Setup Bottom Navigation

Create a BottomNavigation component and use the NavController to navigate between screens:

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

    Scaffold(
        bottomBar = {
            BottomNavigation {
                BottomNavigationItem(
                    selected = false,
                    onClick = { navController.navigate("home") },
                    icon = { Icon(Icons.Default.Home, contentDescription = null) },
                    label = { Text("Home") }
                )
                BottomNavigationItem(
                    selected = false,
                    onClick = { navController.navigate("detail/1") },
                    icon = { Icon(Icons.Default.Info, contentDescription = null) },
                    label = { Text("Details") }
                )
            }
        }
    ) {
        NavHost(navController = navController, startDestination = "home") {
            composable("home") { HomeScreen(navController) }
            composable("detail/{itemId}") { backStackEntry ->
                DetailScreen(backStackEntry.arguments?.getString("itemId"))
            }
        }
    }
}        

In this example, the BottomNavigation allows users to switch between the HomeScreen and DetailScreen.

7. Conclusion: Simplifying Navigation with Jetpack Compose

Jetpack Compose’s Navigation component provides a modern and powerful way to handle navigation in Android apps. With its declarative syntax, it integrates seamlessly with Compose's state management, enabling smooth and intuitive navigation flows. Whether you're handling basic screen transitions, passing data between destinations, or implementing deep links, Jetpack Navigation makes the process easy and scalable.