Jetpack Compose Navigation Explained

🧭 What is Jetpack Compose Navigation?

Jetpack Compose Navigation is a component that provides a framework for implementing navigation between composable screens in a Jetpack Compose application. It allows developers to define routes, pass arguments between screens, and manage the navigation stack with a declarative API.

Why Use Compose Navigation? It provides a consistent way to handle navigation in Compose apps, with built-in support for deep linking, arguments passing, and animations.

🔧 Setting Up Dependencies

// Add to your app's build.gradle file
dependencies {
    implementation "androidx.navigation:navigation-compose:2.5.3"
}

📋 Key Components

Component	Description
NavController	Central API for navigation, handles navigating between destinations
NavHost	Container that displays composables for the current route in the navigation graph
NavGraph	Collection of destinations and the routes between them
composable()	Function to define a composable destination with a specific route

💻 Basic Implementation

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun Navigation() {
    val navController = rememberNavController()
    
    NavHost(
        navController = navController, 
        startDestination = "home_screen"
    ) {
        composable("home_screen") { 
            HomeScreen(navController) 
        }
        composable("detail_screen") { 
            DetailScreen(navController) 
        }
    }
}

🔄 Creating Screen Composables

Home Screen

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

Detail Screen

@Composable
fun DetailScreen(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Detail Screen")
        Button(onClick = { 
            navController.popBackStack() 
        }) {
            Text("Back to Home")
        }
    }
}

📦 Passing Data Between Screens

Define Route with Parameters

composable("detail_screen/{itemId}") { backStackEntry ->
    val itemId = backStackEntry.arguments?.getString("itemId")
    DetailScreen(navController, itemId)
}

Navigate with Arguments

val itemId = "123"
Button(onClick = { 
    navController.navigate("detail_screen/$itemId") 
}) {
    Text("Go to Detail with ID")
}

Update Screen to Accept Parameters

@Composable
fun DetailScreen(navController: NavController, itemId: String?) {
    Column(...) {
        Text("Detail Screen for item ID: $itemId")
        ...
    }
}

🔙 Navigation Actions

navigate(route) - Navigate to a destination
popBackStack() - Navigate back to the previous destination
popBackStack(route, inclusive) - Pop back to a specific destination
navigateUp() - Navigate up in the app hierarchy

📝 Complete Example

Here's a complete example of a navigation setup with parameter passing:

@Composable
fun MyApp() {
    Navigation()
}

@Composable
fun Navigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home_screen") {
        composable("home_screen") { 
            HomeScreen(navController) 
        }
        composable("detail_screen/{itemId}") { backStackEntry ->
            DetailScreen(
                navController, 
                itemId = backStackEntry.arguments?.getString("itemId")
            )
        }
    }
}

@Composable
fun HomeScreen(navController: NavController) {
    val itemId = "123"
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Home Screen")
        Button(onClick = { 
            navController.navigate("detail_screen/$itemId") 
        }) {
            Text("Go to Detail Screen")
        }
    }
}

@Composable
fun DetailScreen(navController: NavController, itemId: String?) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text("Detail Screen for item ID: $itemId")
        Button(onClick = { 
            navController.popBackStack() 
        }) {
            Text("Back to Home Screen")
        }
    }
}

Build beautiful, navigable Compose apps.

Tech Discussions

Search This Blog