Navigating between composables in Android Kotlin

Introduction

Navigation lets users move between different screens in your app. It helps organize your app into small parts called composables.

When you want to open a new screen after a button click.

When you want to go back to the previous screen.

When you want to switch between different app sections like Home and Settings.

When you want to pass simple data from one screen to another.

Syntax

Android Kotlin

val navController = rememberNavController()
NavHost(navController, startDestination = "screen1") {
  composable("screen1") { Screen1(navController) }
  composable("screen2") { Screen2(navController) }
}

// To navigate:
navController.navigate("screen2")

NavController controls navigation actions.

NavHost holds the navigation graph with all screens.

Examples

Navigate to the screen with route "profile".

Android Kotlin

navController.navigate("profile")

Go back to the previous screen.

Android Kotlin

navController.popBackStack()

Define a screen that accepts an argument called itemId.

Android Kotlin

composable("details/{itemId}") { backStackEntry ->
  val itemId = backStackEntry.arguments?.getString("itemId")
  DetailsScreen(itemId)
}

Navigate to the details screen passing 42 as itemId.

Android Kotlin

navController.navigate("details/42")

Sample App

This app has two screens: Home and Details. On Home, a button navigates to Details. On Details, a button goes back to Home.

Android Kotlin

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.compose.*

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      val navController = rememberNavController()
      NavHost(navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailsScreen(navController) }
      }
    }
  }
}

@Composable
fun HomeScreen(navController: NavHostController) {
  Scaffold(
    topBar = { TopAppBar(title = { Text("Home") }) },
    content = {
      Button(onClick = { navController.navigate("details") }) {
        Text("Go to Details")
      }
    }
  )
}

@Composable
fun DetailsScreen(navController: NavHostController) {
  Scaffold(
    topBar = { TopAppBar(title = { Text("Details") }) },
    content = {
      Button(onClick = { navController.popBackStack() }) {
        Text("Back to Home")
      }
    }
  )
}

Important Notes

Always use rememberNavController() inside a composable to keep navigation state.

Use clear route names to avoid confusion.

Passing data between screens requires defining route parameters and reading them from backStackEntry.

Summary

Navigation connects different composables as screens.

Use NavHost and NavController to manage navigation.

Navigate with navController.navigate(route) and go back with popBackStack().