Navigation

Jetpack Compose Navigation

 1data class Todo(val id: UUID, val text: String)
 2
 3class MainActivity : ComponentActivity() {
 4    override fun onCreate(savedInstanceState: Bundle?) {
 5        super.onCreate(savedInstanceState)
 6        enableEdgeToEdge()
 7        setContent {
 8            TodoAppTheme {
 9                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
10                    TodoListScreen(modifier = Modifier.padding(innerPadding))
11                }
12            }
13        }
14    }
15}
16
17@Composable
18fun TodoListScreen(modifier: Modifier = Modifier) {
19    val todos = listOf(
20        Todo(UUID.randomUUID(), "Todo #1"),
21        Todo(UUID.randomUUID(), "Todo #2"),
22        Todo(UUID.randomUUID(), "Todo #3"),
23    )
24    Column(modifier = modifier) {
25        Text(text = "Text List")
26        todos.map {
27            TodoListItem(todo = it)
28        }
29        Button(onClick = { }) {
30            Text(text = "Create")
31        }
32    }
33}
34
35@Composable
36fun TodoListItem(todo: Todo) {
37    Text(text = todo.text, modifier = Modifier.clickable { })
38}
39
40@Composable
41fun TodoDetailScreen(
42    modifier: Modifier = Modifier
43) {
44    Column(modifier = modifier) {
45        Text(text = "Text Detail")
46        OutlinedTextField(value = "Text #1", onValueChange = { })
47        Button(onClick = { }) {
48            Text(text = "Save")
49        }
50    }
51}
1[versions]
2[...]
3navigationCompose = "2.9.6"
4
5[libraries]
6[...]
7androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationCompose" }
8
9[...]
1[...]
2
3dependencies {
4    [...]
5    implementation(libs.androidx.navigation.compose)
6    [...]
7}
 1data class Todo(val id: UUID, val text: String)
 2
 3class MainActivity : ComponentActivity() {
 4    override fun onCreate(savedInstanceState: Bundle?) {
 5        super.onCreate(savedInstanceState)
 6        enableEdgeToEdge()
 7        setContent {
 8            TodoAppTheme {
 9                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
10                    TodoNavHost(modifier = Modifier.padding(innerPadding))
11                }
12            }
13        }
14    }
15}
16
17@Composable
18fun TodoNavHost(modifier: Modifier = Modifier) {
19    val navController = rememberNavController()
20    return NavHost(
21        navController = navController,
22        startDestination = "todo-list"
23    ) {
24        composable(route = "todo-list") {
25            TodoListScreen(
26                onCreate = { navController.navigate(route = "todo-detail/new") },
27                onUpdate = { id -> navController.navigate(route = "todo-detail/$id")},
28                modifier = modifier
29            )
30        }
31        composable(route = "todo-detail/{id}") {
32            TodoDetailScreen(
33                navigateBack = { navController.popBackStack() },
34                modifier = modifier
35            )
36        }
37    }
38}
39
40@Composable
41fun TodoListScreen(
42    onCreate: () -> Unit,
43    onUpdate: (id: UUID) -> Unit,
44    modifier: Modifier = Modifier
45) {
46    val todos = listOf(
47        Todo(UUID.randomUUID(), "Todo #1"),
48        Todo(UUID.randomUUID(), "Todo #2"),
49        Todo(UUID.randomUUID(), "Todo #3"),
50    )
51    Column(modifier = modifier) {
52        Text(text = "Text List")
53        todos.map {
54            TodoListItem(todo = it, onUpdate = onUpdate)
55        }
56        Button(onClick = onCreate) {
57            Text(text = "Create")
58        }
59    }
60}
61
62@Composable
63fun TodoListItem(
64    todo: Todo,
65    onUpdate: (id: UUID) -> Unit
66) {
67    Text(text = todo.text, modifier = Modifier.clickable() { onUpdate(todo.id) })
68}
69
70@Composable
71fun TodoDetailScreen(
72    navigateBack: () -> Unit,
73    modifier: Modifier = Modifier
74) {
75    Column(modifier = modifier) {
76        Text(text = "Text Detail")
77        OutlinedTextField(value = "Text #1", onValueChange = { })
78        Button(onClick = navigateBack) {
79            Text(text = "Save")
80        }
81    }
82}

Tutorials