Top components

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

@@ -27,11 +27,23 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import com.example.compose.snippets.animations.AnimationExamplesScreen
+import com.example.compose.snippets.components.AppBarExamples
+import com.example.compose.snippets.components.ButtonExamples
+import com.example.compose.snippets.components.ChipExamples
+import com.example.compose.snippets.components.ComponentsScreen
+import com.example.compose.snippets.components.DialogExamples
+import com.example.compose.snippets.components.FloatingActionButtonExamples
+import com.example.compose.snippets.components.ProgressIndicatorExamples
+import com.example.compose.snippets.components.ScaffoldExample
+import com.example.compose.snippets.components.SliderExamples
 import com.example.compose.snippets.graphics.BrushExamplesScreen
 import com.example.compose.snippets.images.ImageExamplesScreen
 import com.example.compose.snippets.landing.LandingScreen
 import com.example.compose.snippets.navigation.Destination
+import com.example.compose.snippets.navigation.TopComponentsDestination
 import com.example.compose.snippets.ui.theme.SnippetsTheme
+import com.example.topcomponents.CardExamples
+import com.example.topcomponents.SwitchExamples
 
 class SnippetsActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -54,6 +66,27 @@ class SnippetsActivity : ComponentActivity() {
                                     Destination.BrushExamples -> BrushExamplesScreen()
                                     Destination.ImageExamples -> ImageExamplesScreen()
                                     Destination.AnimationQuickGuideExamples -> AnimationExamplesScreen()
+                                    Destination.ComponentsExamples -> ComponentsScreen {
+                                        navController.navigate(
+                                            it.route
+                                        )
+                                    }
+                                }
+                            }
+                        }
+                        TopComponentsDestination.values().forEach { destination ->
+                            composable(destination.route) {
+                                when (destination) {
+                                    TopComponentsDestination.CardExamples -> CardExamples()
+                                    TopComponentsDestination.SwitchExamples -> SwitchExamples()
+                                    TopComponentsDestination.SliderExamples -> SliderExamples()
+                                    TopComponentsDestination.DialogExamples -> DialogExamples()
+                                    TopComponentsDestination.ChipExamples -> ChipExamples()
+                                    TopComponentsDestination.FloatingActionButtonExamples -> FloatingActionButtonExamples()
+                                    TopComponentsDestination.ButtonExamples -> ButtonExamples()
+                                    TopComponentsDestination.ProgressIndicatorExamples -> ProgressIndicatorExamples()
+                                    TopComponentsDestination.ScaffoldExample -> ScaffoldExample()
+                                    TopComponentsDestination.AppBarExamples -> AppBarExamples()                          
                                 }
                             }
                         }

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

@@ -0,0 +1,344 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.example.compose.snippets.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+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.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
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.Mic
+import androidx.compose.material3.BottomAppBar
+import androidx.compose.material3.BottomAppBarDefaults
+import androidx.compose.material3.Button
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.FloatingActionButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.LargeTopAppBar
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.MediumTopAppBar
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberTopAppBarState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Preview
+@Composable
+fun AppBarExamples() {
+    var selection by remember { mutableStateOf("none") }
+
+    Surface(
+        modifier = Modifier.fillMaxSize(),
+        color = MaterialTheme.colorScheme.background
+    ) {
+        when (selection) {
+            "bottomBar" -> BottomAppBarExample()
+            "topBar" -> SmallTopAppBarExample()
+            "topBarCenter" -> CenterAlignedTopAppBarExample()
+            "topBarMedium" -> MediumTopAppBarExample()
+            "topBarLarge" -> LargeTopAppBarExample()
+            else -> AppBarOptions(
+                toBottom = { selection = "bottomBar" },
+                toTopBarSmall = { selection = "topBar" },
+                toTopBarCenter = { selection = "topBarCenter" },
+                toTopBarMedium = { selection = "topBarMedium" },
+                toTopBarLarge = { selection = "topBarLarge" },
+            )
+        }
+    }
+}
+
+@Composable
+fun AppBarOptions(
+    toBottom: () -> Unit,
+    toTopBarSmall: () -> Unit,
+    toTopBarCenter: () -> Unit,
+    toTopBarMedium: () -> Unit,
+    toTopBarLarge: () -> Unit,
+) {
+    Column() {
+        Button({ toBottom() }) {
+            Text("Bottom bar")
+        }
+        Button({ toTopBarSmall() }) {
+            Text("Small top bar")
+        }
+        Button({ toTopBarCenter() }) {
+            Text("Center aligned top bar")
+        }
+        Button({ toTopBarMedium() }) {
+            Text("Medium top bar")
+        }
+        Button({ toTopBarLarge() }) {
+            Text("Large top bar")
+        }
+    }
+}
+
+@Preview
+// [START android_compose_components_bottomappbar]
+@Composable
+fun BottomAppBarExample() {
+    Scaffold(
+        bottomBar = {
+            BottomAppBar(
+                actions = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
+                    }
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            Icons.Filled.Edit,
+                            contentDescription = "Localized description",
+                        )
+                    }
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            Icons.Filled.Mic,
+                            contentDescription = "Localized description",
+                        )
+                    }
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            Icons.Filled.Image,
+                            contentDescription = "Localized description",
+                        )
+                    }
+                },
+                floatingActionButton = {
+                    FloatingActionButton(
+                        onClick = { /* do something */ },
+                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
+                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
+                    ) {
+                        Icon(Icons.Filled.Add, "Localized description")
+                    }
+                }
+            )
+        },
+    ) { innerPadding ->
+        Text(
+            modifier = Modifier.padding(innerPadding),
+            text = "Example of a scaffold with a bottom app bar."
+        )
+    }
+}
+// [END android_compose_components_bottomappbar]
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+// [START android_compose_components_smalltopappbar]
+@Composable
+fun SmallTopAppBarExample() {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer,
+                    titleContentColor = MaterialTheme.colorScheme.primary,
+                ),
+                title = {
+                    Text("Small Top app bar")
+                }
+            )
+        },
+    ) { innerPadding ->
+        ScrollContent(innerPadding)
+    }
+}
+// [END android_compose_components_smalltopappbar]
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+// [START android_compose_components_centeralignedtopappbar]
+@Composable
+fun CenterAlignedTopAppBarExample() {
+    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
+
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+
+        topBar = {
+            CenterAlignedTopAppBar(
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer,
+                    titleContentColor = MaterialTheme.colorScheme.primary,
+                ),
+                title = {
+                    Text(
+                        "Centered Top App Bar",
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            imageVector = Icons.Filled.ArrowBack,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+                actions = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            imageVector = Icons.Filled.Menu,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+                scrollBehavior = scrollBehavior,
+            )
+        },
+    ) { innerPadding ->
+        ScrollContent(innerPadding)
+    }
+}
+// [END android_compose_components_centeralignedtopappbar]
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+// [START android_compose_components_mediumtopappbar]
+@Composable
+fun MediumTopAppBarExample() {
+    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
+
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            MediumTopAppBar(
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer,
+                    titleContentColor = MaterialTheme.colorScheme.primary,
+                ),
+                title = {
+                    Text(
+                        "Medium Top App Bar",
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            imageVector = Icons.Filled.ArrowBack,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+                actions = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            imageVector = Icons.Filled.Menu,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+                scrollBehavior = scrollBehavior
+            )
+        },
+    ) { innerPadding ->
+        ScrollContent(innerPadding)
+    }
+}
+// [END android_compose_components_mediumtopappbar]
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+// [START android_compose_components_largetopappbar]
+@Composable
+fun LargeTopAppBarExample() {
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())
+
+    Scaffold(
+        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
+        topBar = {
+            LargeTopAppBar(
+                colors = TopAppBarDefaults.topAppBarColors(
+                    containerColor = MaterialTheme.colorScheme.primaryContainer,
+                    titleContentColor = MaterialTheme.colorScheme.primary,
+                ),
+                title = {
+                    Text(
+                        "Large Top App Bar",
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            imageVector = Icons.Filled.ArrowBack,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+                actions = {
+                    IconButton(onClick = { /* doSomething() */ }) {
+                        Icon(
+                            imageVector = Icons.Filled.Menu,
+                            contentDescription = "Localized description"
+                        )
+                    }
+                },
+                scrollBehavior = scrollBehavior
+            )
+        },
+    ) { innerPadding ->
+        ScrollContent(innerPadding)
+    }
+}
+// [END android_compose_components_largetopappbar]
+
+@Composable
+fun ScrollContent(innerPadding: PaddingValues) {
+    val range = 1..100
+
+    LazyColumn(
+        modifier = Modifier
+            .fillMaxSize(),
+        contentPadding = innerPadding,
+        verticalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        items(range.count()) { index ->
+            Text(text = "- List item number ${index + 1}")
+        }
+    }
+}