From 6d4424787244855166b2d56126d7347101e4c239 Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Tue, 1 Oct 2024 14:17:18 +0100 Subject: [PATCH 1/7] Add Carousel --- .../compose/snippets/components/Carousel.kt | 110 ++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt new file mode 100644 index 000000000..2dbd74479 --- /dev/null +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt @@ -0,0 +1,110 @@ +package com.example.compose.snippets.components + +import androidx.annotation.DrawableRes +import androidx.compose.foundation.Image +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 +private fun CarouselExamples_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 +private fun CarouselExamples() { + 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"), + ) + } + + HorizontalUncontainedCarousel( + state = rememberCarouselState { items.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 = 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_uncontained_basic] \ No newline at end of file From 72fd61bcf0b3c426048db451a6b4563ad4b46f47 Mon Sep 17 00:00:00 2001 From: riggaroo Date: Tue, 1 Oct 2024 13:19:27 +0000 Subject: [PATCH 2/7] Apply Spotless --- .../compose/snippets/components/Carousel.kt | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt index 2dbd74479..6766b5b12 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt @@ -1,3 +1,19 @@ +/* + * 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 @@ -107,4 +123,4 @@ private fun CarouselExamples() { ) } } -// [END android_compose_carousel_uncontained_basic] \ No newline at end of file +// [END android_compose_carousel_uncontained_basic] From e31225a854e15c241ff89c1a6b7e567b732028f0 Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Tue, 1 Oct 2024 15:18:50 +0100 Subject: [PATCH 3/7] add to components --- .../example/compose/snippets/SnippetsActivity.kt | 2 ++ .../compose/snippets/components/Carousel.kt | 16 +++++++++++++--- .../compose/snippets/navigation/Destination.kt | 1 + 3 files changed, 16 insertions(+), 3 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 index 3979a110b..357cf556f 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt +++ b/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() } } } diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt index 2dbd74479..4d554d81a 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt @@ -2,6 +2,7 @@ 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 @@ -25,7 +26,7 @@ import com.example.compose.snippets.R @Preview // [START android_compose_carousel_multi_browse_basic] @Composable -private fun CarouselExamples_MultiBrowse() { +fun CarouselExamples_MultiBrowse() { data class CarouselItem( val id: Int, @DrawableRes val imageResId: Int, @@ -69,7 +70,7 @@ private fun CarouselExamples_MultiBrowse() { @Preview // [START android_compose_carousel_uncontained_basic] @Composable -private fun CarouselExamples() { +fun CarouselExample() { data class CarouselItem( val id: Int, @DrawableRes val imageResId: Int, @@ -107,4 +108,13 @@ private fun CarouselExamples() { ) } } -// [END android_compose_carousel_uncontained_basic] \ No newline at end of file +// [END android_compose_carousel_uncontained_basic] + +@Preview +@Composable +fun CarouselExamples() { + Column { + CarouselExample() + CarouselExamples_MultiBrowse() + } +} \ No newline at end of file diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt b/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt index 9e7110503..20753d365 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt +++ b/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") } From c3505e910dc7f4eb1c8e86d2e05e3fab5475718b Mon Sep 17 00:00:00 2001 From: riggaroo Date: Tue, 1 Oct 2024 14:22:05 +0000 Subject: [PATCH 4/7] Apply Spotless --- .../java/com/example/compose/snippets/components/Carousel.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt index 4a91e11a8..13220be8d 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt @@ -133,4 +133,4 @@ fun CarouselExamples() { CarouselExample() CarouselExamples_MultiBrowse() } -} \ No newline at end of file +} From 72a9fca88f040ecd1f3c5fcddb09b155ee7add81 Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Wed, 2 Oct 2024 09:46:40 +0100 Subject: [PATCH 5/7] Clean up landing screens, using Scaffold and list items. --- .../snippets/components/ComponentsScreen.kt | 54 ++++++++++++------- .../compose/snippets/landing/LandingScreen.kt | 49 ++++++++--------- 2 files changed, 59 insertions(+), 44 deletions(-) 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 index ce1bbae40..045496a4a 100644 --- 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 @@ -16,45 +16,63 @@ package com.example.compose.snippets.components +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column 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.HorizontalDivider +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() + } + ) } diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt b/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt index 79083bd3b..0e3c9eacd 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt @@ -26,8 +26,12 @@ 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.ExperimentalMaterial3Api import androidx.compose.material3.HorizontalDivider +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 @@ -38,36 +42,29 @@ 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 +81,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)) - } + ) } From fe79a9f4b37d3ec9f47c53c6a3594a7d37b265c6 Mon Sep 17 00:00:00 2001 From: riggaroo Date: Wed, 2 Oct 2024 08:48:26 +0000 Subject: [PATCH 6/7] Apply Spotless --- .../compose/snippets/components/ComponentsScreen.kt | 6 +----- .../com/example/compose/snippets/landing/LandingScreen.kt | 8 -------- 2 files changed, 1 insertion(+), 13 deletions(-) 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 index 045496a4a..7f87a5c95 100644 --- 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 @@ -18,14 +18,11 @@ package com.example.compose.snippets.components import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column 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.HorizontalDivider import androidx.compose.material3.ListItem import androidx.compose.material3.Scaffold import androidx.compose.material3.Text @@ -62,14 +59,13 @@ fun ComponentsScreen( } } }) - } @Composable fun NavigationItem(destination: TopComponentsDestination, onClick: () -> Unit) { ListItem( headlineContent = { - Text(destination.title) + Text(destination.title) }, modifier = Modifier.clickable { onClick() diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt b/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt index 0e3c9eacd..6e6c84019 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/landing/LandingScreen.kt @@ -18,16 +18,12 @@ 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.ExperimentalMaterial3Api -import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.ListItem import androidx.compose.material3.Scaffold import androidx.compose.material3.Text @@ -35,11 +31,7 @@ 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) From 867af140c8bde71dccfd2403b7d746b2894d0a4c Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Thu, 3 Oct 2024 11:34:59 +0100 Subject: [PATCH 7/7] Review comments --- .../example/compose/snippets/components/Carousel.kt | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt index 13220be8d..fb8a31775 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/Carousel.kt @@ -42,7 +42,7 @@ import com.example.compose.snippets.R @Preview // [START android_compose_carousel_multi_browse_basic] @Composable -fun CarouselExamples_MultiBrowse() { +fun CarouselExample_MultiBrowse() { data class CarouselItem( val id: Int, @DrawableRes val imageResId: Int, @@ -93,7 +93,7 @@ fun CarouselExample() { val contentDescription: String ) - val items = remember { + val carouselItems = remember { listOf( CarouselItem(0, R.drawable.cupcake, "cupcake"), CarouselItem(1, R.drawable.donut, "donut"), @@ -104,7 +104,7 @@ fun CarouselExample() { } HorizontalUncontainedCarousel( - state = rememberCarouselState { items.count() }, + state = rememberCarouselState { carouselItems.count() }, modifier = Modifier .fillMaxWidth() .wrapContentHeight() @@ -113,7 +113,7 @@ fun CarouselExample() { itemSpacing = 8.dp, contentPadding = PaddingValues(horizontal = 16.dp) ) { i -> - val item = items[i] + val item = carouselItems[i] Image( modifier = Modifier .height(205.dp) @@ -131,6 +131,6 @@ fun CarouselExample() { fun CarouselExamples() { Column { CarouselExample() - CarouselExamples_MultiBrowse() + CarouselExample_MultiBrowse() } }