Add Material Carousel

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

@@ -33,6 +33,7 @@ import com.example.compose.snippets.components.AppBarExamples
 import com.example.compose.snippets.components.BadgeExamples
 import com.example.compose.snippets.components.ButtonExamples
 import com.example.compose.snippets.components.CardExamples
+import com.example.compose.snippets.components.CarouselExamples
 import com.example.compose.snippets.components.CheckboxExamples
 import com.example.compose.snippets.components.ChipExamples
 import com.example.compose.snippets.components.ComponentsScreen
@@ -109,6 +110,7 @@ class SnippetsActivity : ComponentActivity() {
                                     TopComponentsDestination.PartialBottomSheet -> PartialBottomSheet()
                                     TopComponentsDestination.TimePickerExamples -> TimePickerExamples()
                                     TopComponentsDestination.DatePickerExamples -> DatePickerExamples()
+                                    TopComponentsDestination.CarouselExamples -> CarouselExamples()
                                 }
                             }
                         }

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

@@ -0,0 +1,136 @@
+/*
+ * Copyright 2024 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.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.carousel.HorizontalMultiBrowseCarousel
+import androidx.compose.material3.carousel.HorizontalUncontainedCarousel
+import androidx.compose.material3.carousel.rememberCarouselState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.compose.snippets.R
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+// [START android_compose_carousel_multi_browse_basic]
+@Composable
+fun CarouselExample_MultiBrowse() {
+    data class CarouselItem(
+        val id: Int,
+        @DrawableRes val imageResId: Int,
+        val contentDescription: String
+    )
+
+    val items = remember {
+        listOf(
+            CarouselItem(0, R.drawable.cupcake, "cupcake"),
+            CarouselItem(1, R.drawable.donut, "donut"),
+            CarouselItem(2, R.drawable.eclair, "eclair"),
+            CarouselItem(3, R.drawable.froyo, "froyo"),
+            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
+        )
+    }
+
+    HorizontalMultiBrowseCarousel(
+        state = rememberCarouselState { items.count() },
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .padding(top = 16.dp, bottom = 16.dp),
+        preferredItemWidth = 186.dp,
+        itemSpacing = 8.dp,
+        contentPadding = PaddingValues(horizontal = 16.dp)
+    ) { i ->
+        val item = items[i]
+        Image(
+            modifier = Modifier
+                .height(205.dp)
+                .maskClip(MaterialTheme.shapes.extraLarge),
+            painter = painterResource(id = item.imageResId),
+            contentDescription = item.contentDescription,
+            contentScale = ContentScale.Crop
+        )
+    }
+}
+// [END android_compose_carousel_multi_browse_basic]
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+// [START android_compose_carousel_uncontained_basic]
+@Composable
+fun CarouselExample() {
+    data class CarouselItem(
+        val id: Int,
+        @DrawableRes val imageResId: Int,
+        val contentDescription: String
+    )
+
+    val carouselItems = remember {
+        listOf(
+            CarouselItem(0, R.drawable.cupcake, "cupcake"),
+            CarouselItem(1, R.drawable.donut, "donut"),
+            CarouselItem(2, R.drawable.eclair, "eclair"),
+            CarouselItem(3, R.drawable.froyo, "froyo"),
+            CarouselItem(4, R.drawable.gingerbread, "gingerbread"),
+        )
+    }
+
+    HorizontalUncontainedCarousel(
+        state = rememberCarouselState { carouselItems.count() },
+        modifier = Modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
+            .padding(top = 16.dp, bottom = 16.dp),
+        itemWidth = 186.dp,
+        itemSpacing = 8.dp,
+        contentPadding = PaddingValues(horizontal = 16.dp)
+    ) { i ->
+        val item = carouselItems[i]
+        Image(
+            modifier = Modifier
+                .height(205.dp)
+                .maskClip(MaterialTheme.shapes.extraLarge),
+            painter = painterResource(id = item.imageResId),
+            contentDescription = item.contentDescription,
+            contentScale = ContentScale.Crop
+        )
+    }
+}
+// [END android_compose_carousel_uncontained_basic]
+
+@Preview
+@Composable
+fun CarouselExamples() {
+    Column {
+        CarouselExample()
+        CarouselExample_MultiBrowse()
+    }
+}

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

@@ -16,45 +16,59 @@
 
 package com.example.compose.snippets.components
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import com.example.compose.snippets.navigation.TopComponentsDestination
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ComponentsScreen(
     navigate: (TopComponentsDestination) -> Unit
 ) {
-    LazyColumn(
-        modifier = Modifier
-            .padding(16.dp)
-            .fillMaxSize(),
-        verticalArrangement = Arrangement.spacedBy(8.dp),
-        horizontalAlignment = Alignment.CenterHorizontally,
-    ) {
-        items(TopComponentsDestination.entries) { destination ->
-            NavigationItem(destination) {
-                navigate(
-                    destination
-                )
+    Scaffold(topBar = {
+        TopAppBar(title = {
+            Text("Common Components")
+        })
+    }, content = { padding ->
+        LazyColumn(
+            modifier = Modifier
+                .padding(padding)
+                .fillMaxSize(),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            items(TopComponentsDestination.entries) { destination ->
+                NavigationItem(destination) {
+                    navigate(
+                        destination
+                    )
+                }
             }
         }
-    }
+    })
 }
 
 @Composable
 fun NavigationItem(destination: TopComponentsDestination, onClick: () -> Unit) {
-    Button(
-        onClick = { onClick() }
-    ) {
-        Text(destination.title)
-    }
+    ListItem(
+        headlineContent = {
+            Text(destination.title)
+        },
+        modifier = Modifier.clickable {
+            onClick()
+        }
+    )
 }

compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt

@@ -18,56 +18,45 @@ package com.example.compose.snippets.landing
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import com.example.compose.snippets.navigation.Destination
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun LandingScreen(
     navigate: (Destination) -> Unit
 ) {
-    Column(
-        modifier = Modifier
-            .padding(16.dp)
-            .fillMaxSize(),
-        verticalArrangement = Arrangement.spacedBy(24.dp),
-    ) {
-        Text(
-            modifier = Modifier.fillMaxWidth(),
-            style = TextStyle(
-                fontSize = 24.sp,
-                fontWeight = FontWeight.Bold,
-                textAlign = TextAlign.Center,
-            ),
-            text = "Android snippets",
-        )
-        Text(
-            text = "Use the following buttons to view a selection of the snippets used in the Android documentation."
-        )
-        NavigationItems { navigate(it) }
+    Scaffold(
+        topBar = {
+            TopAppBar(title = {
+                Text(text = "Android snippets",)
+            })
+        }
+    ) { padding ->
+        NavigationItems(modifier = Modifier.padding(padding)) { navigate(it) }
     }
 }
 
 @Composable
-fun NavigationItems(navigate: (Destination) -> Unit) {
+fun NavigationItems(
+    modifier: Modifier = Modifier,
+    navigate: (Destination) -> Unit
+) {
     LazyColumn(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxSize(),
         verticalArrangement = Arrangement.spacedBy(8.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
@@ -84,14 +73,14 @@ fun NavigationItems(navigate: (Destination) -> Unit) {
 
 @Composable
 fun NavigationItem(destination: Destination, onClick: () -> Unit) {
-    Box(
+    ListItem(
+        headlineContent = {
+            Text(destination.title)
+        },
         modifier = Modifier
             .heightIn(min = 48.dp)
             .clickable {
                 onClick()
             }
-    ) {
-        Text(destination.title)
-        HorizontalDivider(modifier = Modifier.align(Alignment.BottomCenter))
-    }
+    )
 }

compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt

@@ -44,4 +44,5 @@ enum class TopComponentsDestination(val route: String, val title: String) {
     PartialBottomSheet("partialBottomSheets", "Partial Bottom Sheet"),
     TimePickerExamples("timePickerExamples", "Time Pickers"),
     DatePickerExamples("datePickerExamples", "Date Pickers"),
+    CarouselExamples("carouselExamples", "Carousel")
 }