Navigation

Navigation helps you in understanding how your app moves across different components in your Application.

Android JetPack Navigation helps in implementing your high-level navigation in a go easy approach.

The Navigation Component is made up of three major parts:

• NavController: Responsible for navigating between destinations—that is, the screens in your app.
• NavGraph: Maps composable destinations to navigate to.
• NavHost: Composable acting as a container for displaying the current destination of the NavGraph.

In this Article ,we’ll focus on the NavController and the NavHost. Within the NavHost, you’ll define the destinations for the App.

A Simple Navigation Example

Here’s a simple example of how to implement navigation in Jetpack Compose using Kotlin, where clicking a button on one screen navigates to another screen.

✅Step 1. Add Navigation Dependency

Make sure your build.gradle (app) has the following dependency:

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

✅Step 2. Create Navigation Setup

MainActivity.kt

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("second") { SecondScreen() }
    }
}

✅ Step 3. Create Screens

HomeScreen.kt

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.navigation.NavController

@Composable
fun HomeScreen(navController: NavController) {
    Scaffold(
        topBar = { TopAppBar(title = { Text("Home Screen") }) }
    ) {
        Button(
            onClick = { navController.navigate("second") },
            modifier = Modifier.padding(it).padding(16.dp)
        ) {
            Text("Go to Second Screen")
        }
    }
}

SecondScreen.kt

import androidx.compose.material3.*
import androidx.compose.runtime.Composable

@Composable
fun SecondScreen() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("Second Screen") }) }
    ) {
        Text(
            text = "Welcome to the Second Screen!",
            modifier = Modifier.padding(it).padding(16.dp)
        )
    }
}

A Navigation Example with sending value

To send a value like a name from one screen to another using Jetpack Compose Navigation, you can use navigation arguments.

Below is how you can modify the previous example to pass a name string from the Home Screen to the Second Screen.

✅ Updated Example with Argument Passing

🔧 Step 1: Update Navigation Route in NavHost

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApp()

        }
    }
}
@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("second/{name}") { backStackEntry ->
            val name = backStackEntry.arguments?.getString("name")
            SecondScreen(name)
        }
    }
}

✏️ Step 2: Modify HomeScreen.kt to Send a Name

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController

@Composable
fun HomeScreen(navController: NavController) {
    var name by remember { mutableStateOf("") }

    Scaffold(
        topBar = { TopAppBar(title = { Text("Home Screen") }) }
    ) {
        Column(
            modifier = Modifier
                .padding(it)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            OutlinedTextField(
                value = name,
                onValueChange = { name = it },
                label = { Text("Enter your name") },
                modifier = Modifier.fillMaxWidth()
            )

            Button(
                onClick = {
                    // Encode name if needed for special characters
                    navController.navigate("second/${name}")
                },
                enabled = name.isNotBlank()
            ) {
                Text("Go to Second Screen")
            }
        }
    }
}

🖥️ Step 3: Update SecondScreen.kt to Accept and Display Name

@Composable
fun SecondScreen(name: String?) {
    Scaffold(
        topBar = { TopAppBar(title = { Text("Second Screen") }) }
    ) {
        Text(
            text = "Hello, ${name ?: "Guest"}!",
            modifier = Modifier.padding(it).padding(16.dp)
        )
    }
}