From 1a8773418d465585de15abc49004c21ac179912c Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Thu, 24 Oct 2024 15:00:39 +0100 Subject: [PATCH 1/3] Add basic segmented button examples --- .../compose/snippets/SnippetsActivity.kt | 2 + .../snippets/components/SegmentedButton.kt | 120 ++++++++++++++++++ .../snippets/navigation/Destination.kt | 3 +- 3 files changed, 124 insertions(+), 1 deletion(-) create mode 100644 compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt 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 33e8c3dd0..f07c46133 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 @@ -46,6 +46,7 @@ import com.example.compose.snippets.components.MenusExamples import com.example.compose.snippets.components.PartialBottomSheet import com.example.compose.snippets.components.ProgressIndicatorExamples import com.example.compose.snippets.components.ScaffoldExample +import com.example.compose.snippets.components.SegmentedButtonExamples import com.example.compose.snippets.components.SliderExamples import com.example.compose.snippets.components.SwitchExamples import com.example.compose.snippets.components.TimePickerExamples @@ -119,6 +120,7 @@ class SnippetsActivity : ComponentActivity() { TopComponentsDestination.MenusExample -> MenusExamples() TopComponentsDestination.TooltipExamples -> TooltipExamples() TopComponentsDestination.NavigationDrawerExamples -> NavigationDrawerExamples() + TopComponentsDestination.SegmentedButtonExamples -> SegmentedButtonExamples() } } } diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt new file mode 100644 index 000000000..aa6ed14e8 --- /dev/null +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt @@ -0,0 +1,120 @@ +package com.example.compose.snippets.components + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.automirrored.filled.DirectionsWalk +import androidx.compose.material.icons.filled.DirectionsBus +import androidx.compose.material.icons.filled.DirectionsCar +import androidx.compose.material3.Icon +import androidx.compose.material3.MultiChoiceSegmentedButtonRow +import androidx.compose.material3.SegmentedButton +import androidx.compose.material3.SegmentedButtonDefaults +import androidx.compose.material3.SingleChoiceSegmentedButtonRow +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.mutableStateListOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp + +@Composable +fun SegmentedButtonExamples() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(16.dp), + verticalArrangement = Arrangement.Center, + horizontalAlignment = Alignment.CenterHorizontally + + ) { + SingleChoiceSegmentedButton() + Spacer(modifier = Modifier.height(16.dp)) + MultiChoiceSegmentedButton() + } +} + +@Composable +fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { + var selectedIndex by remember { mutableIntStateOf(0) } + val options = listOf("Day", "Month", "Week") + + SingleChoiceSegmentedButtonRow { + options.forEachIndexed { index, label -> + SegmentedButton( + shape = SegmentedButtonDefaults.itemShape( + index = index, + count = options.size + ), + onClick = { selectedIndex = index }, + selected = index == selectedIndex, + label = { Text(label) } + ) + } + } +} + + +@Preview +@Composable +private fun SingleChoiceSegmentedButtonPreview() { + SingleChoiceSegmentedButton() +} + + +@Composable +fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { + val selectedOptions = remember { + mutableStateListOf(false, false, false) + } + val options = listOf("Walk", "Ride", "Drive") + + MultiChoiceSegmentedButtonRow { + options.forEachIndexed { index, label -> + SegmentedButton( + shape = SegmentedButtonDefaults.itemShape( + index = index, + count = options.size + ), + checked = selectedOptions[index], + onCheckedChange = { + selectedOptions[index] = !selectedOptions[index] + }, + icon = { SegmentedButtonDefaults.Icon(selectedOptions[index])}, + label = { + when (label) { + "Walk" -> Icon( + imageVector = + Icons.AutoMirrored.Filled.DirectionsWalk, + contentDescription = "Directions Walk" + ) + "Ride" -> Icon( + imageVector = + Icons.Default.DirectionsBus, contentDescription = "Directions Bus" + ) + "Drive" -> Icon( + imageVector = + Icons.Default.DirectionsCar, contentDescription = "Directions Car" + ) + } + } + ) + } + } +} + + +@Preview +@Composable +private fun MultiChoiceSegmentedButtonPreview() { + MultiChoiceSegmentedButton() +} 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 f913923e1..783963906 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 @@ -48,5 +48,6 @@ enum class TopComponentsDestination(val route: String, val title: String) { CarouselExamples("carouselExamples", "Carousel"), MenusExample("menusExamples", "Menus"), TooltipExamples("tooltipExamples", "Tooltips"), - NavigationDrawerExamples("navigationDrawerExamples", "Navigation drawer") + NavigationDrawerExamples("navigationDrawerExamples", "Navigation drawer"), + SegmentedButtonExamples("segmentedButtonExamples", "Segmented button") } From 65f6769c13ecd320afa8c7d8039aef26b95ecea0 Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Thu, 24 Oct 2024 14:03:04 +0000 Subject: [PATCH 2/3] Apply Spotless --- .../snippets/components/SegmentedButton.kt | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt index aa6ed14e8..415a14cb8 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.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.compose.foundation.layout.Arrangement @@ -63,14 +79,12 @@ fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { } } - @Preview @Composable private fun SingleChoiceSegmentedButtonPreview() { SingleChoiceSegmentedButton() } - @Composable fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { val selectedOptions = remember { @@ -89,7 +103,7 @@ fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { onCheckedChange = { selectedOptions[index] = !selectedOptions[index] }, - icon = { SegmentedButtonDefaults.Icon(selectedOptions[index])}, + icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) }, label = { when (label) { "Walk" -> Icon( @@ -99,11 +113,13 @@ fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { ) "Ride" -> Icon( imageVector = - Icons.Default.DirectionsBus, contentDescription = "Directions Bus" + Icons.Default.DirectionsBus, + contentDescription = "Directions Bus" ) "Drive" -> Icon( imageVector = - Icons.Default.DirectionsCar, contentDescription = "Directions Car" + Icons.Default.DirectionsCar, + contentDescription = "Directions Car" ) } } @@ -112,7 +128,6 @@ fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { } } - @Preview @Composable private fun MultiChoiceSegmentedButtonPreview() { From 3e3e9ad485ba7ddbcf2afdaa35740d90f497aac7 Mon Sep 17 00:00:00 2001 From: jakeroseman Date: Thu, 24 Oct 2024 15:08:12 +0100 Subject: [PATCH 3/3] Add region tags --- .../example/compose/snippets/components/SegmentedButton.kt | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt b/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt index 415a14cb8..21fbd9d65 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt @@ -59,6 +59,7 @@ fun SegmentedButtonExamples() { } } +// [START android_compose_components_singlechoicesegmentedbutton] @Composable fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { var selectedIndex by remember { mutableIntStateOf(0) } @@ -78,6 +79,7 @@ fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) { } } } +// [END android_compose_components_singlechoicesegmentedbutton] @Preview @Composable @@ -85,6 +87,7 @@ private fun SingleChoiceSegmentedButtonPreview() { SingleChoiceSegmentedButton() } +// [START android_compose_components_multichoicesegmentedbutton] @Composable fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { val selectedOptions = remember { @@ -127,6 +130,7 @@ fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) { } } } +// [END android_compose_components_multichoicesegmentedbutton] @Preview @Composable