Skip to content

Commit da1a929

Browse files
authored
Add navigation example to app bars examples (#271)
* First commit for app bars navigation example * Apply Spotless * Implementing a top app bar whose navigation icon actually pops from the back stack when clicked * Implementing a top app bar whose navigation icon actually pops from the back stack when clicked * Removing unnecessary code --------- Co-authored-by: jakeroseman <[email protected]>
1 parent 7dca9cf commit da1a929

File tree

3 files changed

+55
-11
lines changed

3 files changed

+55
-11
lines changed

compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ class SnippetsActivity : ComponentActivity() {
6565
composable("LandingScreen") {
6666
LandingScreen { navController.navigate(it.route) }
6767
}
68-
Destination.values().forEach { destination ->
68+
Destination.entries.forEach { destination ->
6969
composable(destination.route) {
7070
when (destination) {
7171
Destination.BrushExamples -> BrushExamplesScreen()
@@ -81,7 +81,7 @@ class SnippetsActivity : ComponentActivity() {
8181
}
8282
}
8383
}
84-
TopComponentsDestination.values().forEach { destination ->
84+
TopComponentsDestination.entries.forEach { destination ->
8585
composable(destination.route) {
8686
when (destination) {
8787
TopComponentsDestination.CardExamples -> CardExamples()
@@ -93,7 +93,9 @@ class SnippetsActivity : ComponentActivity() {
9393
TopComponentsDestination.ButtonExamples -> ButtonExamples()
9494
TopComponentsDestination.ProgressIndicatorExamples -> ProgressIndicatorExamples()
9595
TopComponentsDestination.ScaffoldExample -> ScaffoldExample()
96-
TopComponentsDestination.AppBarExamples -> AppBarExamples()
96+
TopComponentsDestination.AppBarExamples -> AppBarExamples {
97+
navController.popBackStack()
98+
}
9799
TopComponentsDestination.CheckboxExamples -> CheckboxExamples()
98100
}
99101
}

compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ import androidx.compose.foundation.layout.fillMaxSize
2323
import androidx.compose.foundation.layout.padding
2424
import androidx.compose.foundation.lazy.LazyColumn
2525
import androidx.compose.material.icons.Icons
26+
import androidx.compose.material.icons.automirrored.filled.ArrowBack
2627
import androidx.compose.material.icons.filled.Add
27-
import androidx.compose.material.icons.filled.ArrowBack
2828
import androidx.compose.material.icons.filled.Check
2929
import androidx.compose.material.icons.filled.Edit
3030
import androidx.compose.material.icons.filled.Image
@@ -59,9 +59,10 @@ import androidx.compose.ui.text.style.TextOverflow
5959
import androidx.compose.ui.tooling.preview.Preview
6060
import androidx.compose.ui.unit.dp
6161

62-
@Preview
6362
@Composable
64-
fun AppBarExamples() {
63+
fun AppBarExamples(
64+
navigateBack: () -> Unit
65+
) {
6566
var selection by remember { mutableStateOf("none") }
6667

6768
Surface(
@@ -74,12 +75,14 @@ fun AppBarExamples() {
7475
"topBarCenter" -> CenterAlignedTopAppBarExample()
7576
"topBarMedium" -> MediumTopAppBarExample()
7677
"topBarLarge" -> LargeTopAppBarExample()
78+
"topBarNavigation" -> TopBarNavigationExample { navigateBack() }
7779
else -> AppBarOptions(
7880
toBottom = { selection = "bottomBar" },
7981
toTopBarSmall = { selection = "topBar" },
8082
toTopBarCenter = { selection = "topBarCenter" },
8183
toTopBarMedium = { selection = "topBarMedium" },
8284
toTopBarLarge = { selection = "topBarLarge" },
85+
toTopBarNavigation = { selection = "topBarNavigation" },
8386
)
8487
}
8588
}
@@ -92,6 +95,7 @@ fun AppBarOptions(
9295
toTopBarCenter: () -> Unit,
9396
toTopBarMedium: () -> Unit,
9497
toTopBarLarge: () -> Unit,
98+
toTopBarNavigation: () -> Unit,
9599
) {
96100
Column() {
97101
Button({ toBottom() }) {
@@ -109,6 +113,9 @@ fun AppBarOptions(
109113
Button({ toTopBarLarge() }) {
110114
Text("Large top bar")
111115
}
116+
Button({ toTopBarNavigation() }) {
117+
Text("Top bar navigation example")
118+
}
112119
}
113120
}
114121

@@ -211,7 +218,7 @@ fun CenterAlignedTopAppBarExample() {
211218
navigationIcon = {
212219
IconButton(onClick = { /* do something */ }) {
213220
Icon(
214-
imageVector = Icons.Filled.ArrowBack,
221+
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
215222
contentDescription = "Localized description"
216223
)
217224
}
@@ -258,7 +265,7 @@ fun MediumTopAppBarExample() {
258265
navigationIcon = {
259266
IconButton(onClick = { /* do something */ }) {
260267
Icon(
261-
imageVector = Icons.Filled.ArrowBack,
268+
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
262269
contentDescription = "Localized description"
263270
)
264271
}
@@ -305,7 +312,7 @@ fun LargeTopAppBarExample() {
305312
navigationIcon = {
306313
IconButton(onClick = { /* do something */ }) {
307314
Icon(
308-
imageVector = Icons.Filled.ArrowBack,
315+
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
309316
contentDescription = "Localized description"
310317
)
311318
}
@@ -327,6 +334,39 @@ fun LargeTopAppBarExample() {
327334
}
328335
// [END android_compose_components_largetopappbar]
329336

337+
@OptIn(ExperimentalMaterial3Api::class)
338+
// [START android_compose_components_navigation]
339+
@Composable
340+
fun TopBarNavigationExample(
341+
navigateBack: () -> Unit,
342+
) {
343+
Scaffold(
344+
topBar = {
345+
CenterAlignedTopAppBar(
346+
title = {
347+
Text(
348+
"Navigation example",
349+
)
350+
},
351+
navigationIcon = {
352+
IconButton(onClick = navigateBack) {
353+
Icon(
354+
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
355+
contentDescription = "Localized description"
356+
)
357+
}
358+
},
359+
)
360+
},
361+
) { innerPadding ->
362+
Text(
363+
"Click the back button to pop from the back stack.",
364+
modifier = Modifier.padding(innerPadding),
365+
)
366+
}
367+
}
368+
// [END android_compose_components_navigation]
369+
330370
@Composable
331371
fun ScrollContent(innerPadding: PaddingValues) {
332372
val range = 1..100

compose/snippets/src/main/java/com/example/compose/snippets/components/ComponentsScreen.kt

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,17 @@ import androidx.compose.ui.unit.dp
3030
import com.example.compose.snippets.navigation.TopComponentsDestination
3131

3232
@Composable
33-
fun ComponentsScreen(navigate: (TopComponentsDestination) -> Unit) {
33+
fun ComponentsScreen(
34+
navigate: (TopComponentsDestination) -> Unit
35+
) {
3436
LazyColumn(
3537
modifier = Modifier
3638
.padding(16.dp)
3739
.fillMaxSize(),
3840
verticalArrangement = Arrangement.spacedBy(8.dp),
3941
horizontalAlignment = Alignment.CenterHorizontally,
4042
) {
41-
items(TopComponentsDestination.values().toList()) { destination ->
43+
items(TopComponentsDestination.entries) { destination ->
4244
NavigationItem(destination) {
4345
navigate(
4446
destination

0 commit comments

Comments
 (0)