What is Navigation?

Think of navigation in Android apps like moving between different rooms in a house. Just as you need doors and hallways to move from one room to another, your app needs a way to move between different screens. In Android Compose, we use the Navigation component to create these "doors" between screens, making it easy for users to move around your app.

Whether you're building a social media app where users need to move between their feed and profile, or a shopping app where users browse products and view their cart, navigation is essential for creating a smooth user experience.

Why Do We Need Navigation?

• Move between different screens in your app
• Create a back button experience
• Pass data between screens
• Handle user flow and app structure
• Manage screen history

Quick Reference: Navigation Components

Setting Up Navigation Dependencies

Before you can use navigation in your app, you need to add the required dependencies. These dependencies provide the navigation components and functionality we'll be using.

Add to libs.versions.toml

[versions]
    # ... other versions ...
    navigation-compose = "2.7.7"
    
    [libraries]
    # ... other libraries ...
    androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation-compose" }
    

Add to app/build.gradle.kts

dependencies {
        // ... other dependencies ...
        implementation(libs.androidx.navigation.compose)
    }
    

After adding these dependencies, sync your project with Gradle files. You'll then be able to use all the navigation components we'll discuss in these lessons.

Basic Navigation Example

@Composable
    fun SimpleNavigationExample() {
        val navController = rememberNavController()
    
        NavHost(
            navController = navController,
            startDestination = "home"
        ) {
            composable("home") {
                HomeScreen(
                    onNavigateToProfile = {
                        navController.navigate("profile") {
                            launchSingleTop = true
                        }
                    }
                )
            }
            composable("profile") {
                ProfileScreen(
                    onNavigateBack = {
                        navController.popBackStack()
                    }
                )
            }
        }
    }
    
    @Composable
    fun HomeScreen(onNavigateToProfile: () -> Unit) {
        Box(modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .padding(top = 50.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(onClick = onNavigateToProfile) {
                    Text("Go to Profile")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    "This is the home page",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
    
    @Composable
    fun ProfileScreen(onNavigateBack: () -> Unit) {
        Box(modifier = Modifier.fillMaxSize()) {
            Column(
                modifier = Modifier
                    .padding(top = 50.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(onClick = onNavigateBack) {
                    Text("Back to Home")
                }
                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    "This is the profile page",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }

What's Happening in the above example?

How this example renders

Above is just a snippet of the code to view the full code, you need to go to my GitHub page and look at the chapter9 intro.kt file.

The first image shows the home screen. The second image shows the profile screen.

Tips for Getting Started

• Plan your navigation structure before implementing
• Use meaningful names for your routes
• Start with simple navigation before adding complexity
• Test navigation on different screen sizes

Common Mistakes to Avoid

• Creating circular navigation paths
• Forgetting to handle the back button
• Using hardcoded route names
• Not planning navigation structure