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]>
android · May 16, 2024 · da1a929 · da1a929
1 parent 7dca9cf
commit da1a929
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt b/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt
@@ -65,7 +65,7 @@ class SnippetsActivity : ComponentActivity() {
                         composable("LandingScreen") {
                             LandingScreen { navController.navigate(it.route) }
                         }
-                        Destination.values().forEach { destination ->
+                        Destination.entries.forEach { destination ->
                             composable(destination.route) {
                                 when (destination) {
                                     Destination.BrushExamples -> BrushExamplesScreen()
@@ -81,7 +81,7 @@ class SnippetsActivity : ComponentActivity() {
                                 }
                             }
                         }
-                        TopComponentsDestination.values().forEach { destination ->
+                        TopComponentsDestination.entries.forEach { destination ->
                             composable(destination.route) {
                                 when (destination) {
                                     TopComponentsDestination.CardExamples -> CardExamples()
@@ -93,7 +93,9 @@ class SnippetsActivity : ComponentActivity() {
                                     TopComponentsDestination.ButtonExamples -> ButtonExamples()
                                     TopComponentsDestination.ProgressIndicatorExamples -> ProgressIndicatorExamples()
                                     TopComponentsDestination.ScaffoldExample -> ScaffoldExample()
-                                    TopComponentsDestination.AppBarExamples -> AppBarExamples()
+                                    TopComponentsDestination.AppBarExamples -> AppBarExamples {
+                                        navController.popBackStack()
+                                    }
                                     TopComponentsDestination.CheckboxExamples -> CheckboxExamples()
                                 }
                             }

diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt
@@ -23,8 +23,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.Image
@@ -59,9 +59,10 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 
-@Preview
 @Composable
-fun AppBarExamples() {
+fun AppBarExamples(
+    navigateBack: () -> Unit
+) {
     var selection by remember { mutableStateOf("none") }
 
     Surface(
@@ -74,12 +75,14 @@ fun AppBarExamples() {
             "topBarCenter" -> CenterAlignedTopAppBarExample()
             "topBarMedium" -> MediumTopAppBarExample()
             "topBarLarge" -> LargeTopAppBarExample()
+            "topBarNavigation" -> TopBarNavigationExample { navigateBack() }
             else -> AppBarOptions(
                 toBottom = { selection = "bottomBar" },
                 toTopBarSmall = { selection = "topBar" },
                 toTopBarCenter = { selection = "topBarCenter" },
                 toTopBarMedium = { selection = "topBarMedium" },
                 toTopBarLarge = { selection = "topBarLarge" },
+                toTopBarNavigation = { selection = "topBarNavigation" },
             )
         }
     }
@@ -92,6 +95,7 @@ fun AppBarOptions(
     toTopBarCenter: () -> Unit,
     toTopBarMedium: () -> Unit,
     toTopBarLarge: () -> Unit,
+    toTopBarNavigation: () -> Unit,
 ) {
     Column() {
         Button({ toBottom() }) {
@@ -109,6 +113,9 @@ fun AppBarOptions(
         Button({ toTopBarLarge() }) {
             Text("Large top bar")
         }
+        Button({ toTopBarNavigation() }) {
+            Text("Top bar navigation example")
+        }
     }
 }
 
@@ -211,7 +218,7 @@ fun CenterAlignedTopAppBarExample() {
                 navigationIcon = {
                     IconButton(onClick = { /* do something */ }) {
                         Icon(
-                            imageVector = Icons.Filled.ArrowBack,
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                             contentDescription = "Localized description"
                         )
                     }
@@ -258,7 +265,7 @@ fun MediumTopAppBarExample() {
                 navigationIcon = {
                     IconButton(onClick = { /* do something */ }) {
                         Icon(
-                            imageVector = Icons.Filled.ArrowBack,
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                             contentDescription = "Localized description"
                         )
                     }
@@ -305,7 +312,7 @@ fun LargeTopAppBarExample() {
                 navigationIcon = {
                     IconButton(onClick = { /* do something */ }) {
                         Icon(
-                            imageVector = Icons.Filled.ArrowBack,
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                             contentDescription = "Localized description"
                         )
                     }
@@ -327,6 +334,39 @@ fun LargeTopAppBarExample() {
 }
 // [END android_compose_components_largetopappbar]
 
+@OptIn(ExperimentalMaterial3Api::class)
+// [START android_compose_components_navigation]
+@Composable
+fun TopBarNavigationExample(
+    navigateBack: () -> Unit,
+) {
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = {
+                    Text(
+                        "Navigation example",
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = navigateBack) {
+                        Icon(
+                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+            )
+        },
+    ) { innerPadding ->
+        Text(
+            "Click the back button to pop from the back stack.",
+            modifier = Modifier.padding(innerPadding),
+        )
+    }
+}
+// [END android_compose_components_navigation]
+
 @Composable
 fun ScrollContent(innerPadding: PaddingValues) {
     val range = 1..100

diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/ComponentsScreen.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/ComponentsScreen.kt
@@ -30,15 +30,17 @@ import androidx.compose.ui.unit.dp
 import com.example.compose.snippets.navigation.TopComponentsDestination
 
 @Composable
-fun ComponentsScreen(navigate: (TopComponentsDestination) -> Unit) {
+fun ComponentsScreen(
+    navigate: (TopComponentsDestination) -> Unit
+) {
     LazyColumn(
         modifier = Modifier
             .padding(16.dp)
             .fillMaxSize(),
         verticalArrangement = Arrangement.spacedBy(8.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        items(TopComponentsDestination.values().toList()) { destination ->
+        items(TopComponentsDestination.entries) { destination ->
             NavigationItem(destination) {
                 navigate(
                     destination