Navigation (Traditional)

Dependencies

implementation("androidx.navigation:navigation-compose:2.5.2")

Base code with NavHost

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "home"){
    composable("home"){
        Home()
    }
    composable("about"){
        About()
    }
    composable("new"){
        New()
    }
}

The page set in startDestination will be displayed when the NavHost Component is rendered.

Navigate Between Screens

• navigate() - navigate to a screen
• popBackStack() - navigate to the last screen

Button(
    onClick = {
        navController.navigate("about")
    }
) {
    Text("Go to About")
}

Button(
    onClick = {
        navController.popBackStack()
    }
) {
    Text("Go Back")
}

Nav Arguments

Setup NavHost with arguments

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            HomeScreen(navController)
        }
        composable(
            route = "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.StringType })
        ) { backStackEntry ->
            DetailScreen(itemId = backStackEntry.arguments?.getString("itemId"))
        }
    }
}

Navigate with argument

@Composable
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate("detail/123") }) {
        Text("Go to Detail")
    }
}

Receive argument

@Composable
fun DetailScreen(itemId: String?) {
    Text("Item ID: $itemId")
}

Restrict User from Going Back

navController.navigate("signin") {
    // Clear the back stack to prevent the user from navigating back to the home screen
    popUpTo("home") { inclusive = true }
}

Type-Safe Navigation

With Enum

enum class Screen {
    Home, List
}

var navController = rememberNavController()
NavHost(navController = navController, startDestination = Screen.Home.name) {
    composable(Screen.Home.name) {
        HomeScreen()
    }
    composable(Screen.List.name) {
        ListScreen()
    }
}

With Sealed Class

sealed class Screen(val route: String) {
    object Home : Screen("home")
    object List : Screen("list")
}

var navController = rememberNavController()
NavHost(navController = navController, startDestination = Screen.Home.route) {
    composable(Screen.Home.route) {
        HomeScreen()
    }
    composable(Screen.List.route) {
        ListScreen()
    }
}

Open URI

Create a URI handler

val uriHandler = LocalUriHandler.current
uriHandler.openUri("https://eliaschen.dev")