Navigation Basics (NavHost, NavController)

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Navigation Basics (NavHost, NavController) without the intimidation
Get comfortable running Android Studio/Compose code yourself
Apply this concept in a real project right away

Let's think about it this way for a second

`NavController` is the object that controls screen transitions (navigate to, go back) — `NavHost` is the container that maps each route (a screen name string) to its composable function. Calling `navController.navigate("home")` switches to the composable for the 'home' route — calling `popBackStack()` takes you back to the previous screen, just like tapping the back button.

Let's connect this to a real scenario

If you set things up like `NavHost(navController, startDestination = "login") { composable("login") { LoginScreen(onLoginSuccess = { navController.navigate("home") }) }; composable("home") { HomeScreen() } }` — clicking the login button calls `navController.navigate("home")`, taking you to HomeScreen.

NavController = controls screen transitions (navigate/back)
NavHost = maps route strings to composable functions
navigate("route") = move to a screen, popBackStack() = go back to the previous screen

Let's walk through it together

kotlin

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

    NavHost(navController = navController, startDestination = "login") {
        composable("login") {
            LoginScreen(onLoginSuccess = {
                navController.navigate("home")
            })
        }
        composable("home") {
            HomeScreen(onLogout = {
                navController.popBackStack()
            })
        }
    }
}

You should see

After logging in on the Login screen, you should see it automatically switch over to the Home screen.

5-minute try-it

Run `AppNavigation` and actually try the LoginScreen → HomeScreen transition on the emulator — then press the physical device's Back button and confirm it takes you back to LoginScreen.

A quick word of caution

If you don't handle `popBackStack()` or navigation options (like `popUpTo`) after moving from the Login screen to the Home screen, pressing Back on the Home screen can send the user right back to the Login screen (even though they're already logged in) — you'll want to fix this UX gap in a production app.

Easy traps

Typo-ing the route name string (like `"home"`) — calling navigate can throw a screen not found error
Passing sensitive data (like a password) directly as a navigation argument in the route string — navigation arguments can end up lingering in logs/history

Now try it yourself

Run `AppNavigation` and actually try the LoginScreen → HomeScreen transition on the emulator — then press the physical device's Back button and confirm it takes you back to LoginScreen.

You'll know it worked when: After logging in on the Login screen, you should see it automatically switch over to the Home screen.