Skip to content

Commit 514653c

Browse files
jakerosemanjakeroseman
authored
Add basic segmented button examples (#383)
* Add basic segmented button examples * Apply Spotless * Add region tags --------- Co-authored-by: jakeroseman <[email protected]>
1 parent 2af26d9 commit 514653c

File tree

3 files changed

+143
-1
lines changed

3 files changed

+143
-1
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import com.example.compose.snippets.components.MenusExamples
4646
import com.example.compose.snippets.components.PartialBottomSheet
4747
import com.example.compose.snippets.components.ProgressIndicatorExamples
4848
import com.example.compose.snippets.components.ScaffoldExample
49+
import com.example.compose.snippets.components.SegmentedButtonExamples
4950
import com.example.compose.snippets.components.SliderExamples
5051
import com.example.compose.snippets.components.SwitchExamples
5152
import com.example.compose.snippets.components.TimePickerExamples
@@ -119,6 +120,7 @@ class SnippetsActivity : ComponentActivity() {
119120
TopComponentsDestination.MenusExample -> MenusExamples()
120121
TopComponentsDestination.TooltipExamples -> TooltipExamples()
121122
TopComponentsDestination.NavigationDrawerExamples -> NavigationDrawerExamples()
123+
TopComponentsDestination.SegmentedButtonExamples -> SegmentedButtonExamples()
122124
}
123125
}
124126
}

‎compose/snippets/src/main/java/com/example/compose/snippets/components/SegmentedButton.kt

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/*
2+
* Copyright 2024 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package com.example.compose.snippets.components
18+
19+
import androidx.compose.foundation.layout.Arrangement
20+
import androidx.compose.foundation.layout.Column
21+
import androidx.compose.foundation.layout.Spacer
22+
import androidx.compose.foundation.layout.fillMaxSize
23+
import androidx.compose.foundation.layout.height
24+
import androidx.compose.foundation.layout.padding
25+
import androidx.compose.material.icons.Icons
26+
import androidx.compose.material.icons.automirrored.filled.DirectionsWalk
27+
import androidx.compose.material.icons.filled.DirectionsBus
28+
import androidx.compose.material.icons.filled.DirectionsCar
29+
import androidx.compose.material3.Icon
30+
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
31+
import androidx.compose.material3.SegmentedButton
32+
import androidx.compose.material3.SegmentedButtonDefaults
33+
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
34+
import androidx.compose.material3.Text
35+
import androidx.compose.runtime.Composable
36+
import androidx.compose.runtime.getValue
37+
import androidx.compose.runtime.mutableIntStateOf
38+
import androidx.compose.runtime.mutableStateListOf
39+
import androidx.compose.runtime.remember
40+
import androidx.compose.runtime.setValue
41+
import androidx.compose.ui.Alignment
42+
import androidx.compose.ui.Modifier
43+
import androidx.compose.ui.tooling.preview.Preview
44+
import androidx.compose.ui.unit.dp
45+
46+
@Composable
47+
fun SegmentedButtonExamples() {
48+
Column(
49+
modifier = Modifier
50+
.fillMaxSize()
51+
.padding(16.dp),
52+
verticalArrangement = Arrangement.Center,
53+
horizontalAlignment = Alignment.CenterHorizontally
54+
55+
) {
56+
SingleChoiceSegmentedButton()
57+
Spacer(modifier = Modifier.height(16.dp))
58+
MultiChoiceSegmentedButton()
59+
}
60+
}
61+
62+
// [START android_compose_components_singlechoicesegmentedbutton]
63+
@Composable
64+
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
65+
var selectedIndex by remember { mutableIntStateOf(0) }
66+
val options = listOf("Day", "Month", "Week")
67+
68+
SingleChoiceSegmentedButtonRow {
69+
options.forEachIndexed { index, label ->
70+
SegmentedButton(
71+
shape = SegmentedButtonDefaults.itemShape(
72+
index = index,
73+
count = options.size
74+
),
75+
onClick = { selectedIndex = index },
76+
selected = index == selectedIndex,
77+
label = { Text(label) }
78+
)
79+
}
80+
}
81+
}
82+
// [END android_compose_components_singlechoicesegmentedbutton]
83+
84+
@Preview
85+
@Composable
86+
private fun SingleChoiceSegmentedButtonPreview() {
87+
SingleChoiceSegmentedButton()
88+
}
89+
90+
// [START android_compose_components_multichoicesegmentedbutton]
91+
@Composable
92+
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
93+
val selectedOptions = remember {
94+
mutableStateListOf(false, false, false)
95+
}
96+
val options = listOf("Walk", "Ride", "Drive")
97+
98+
MultiChoiceSegmentedButtonRow {
99+
options.forEachIndexed { index, label ->
100+
SegmentedButton(
101+
shape = SegmentedButtonDefaults.itemShape(
102+
index = index,
103+
count = options.size
104+
),
105+
checked = selectedOptions[index],
106+
onCheckedChange = {
107+
selectedOptions[index] = !selectedOptions[index]
108+
},
109+
icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
110+
label = {
111+
when (label) {
112+
"Walk" -> Icon(
113+
imageVector =
114+
Icons.AutoMirrored.Filled.DirectionsWalk,
115+
contentDescription = "Directions Walk"
116+
)
117+
"Ride" -> Icon(
118+
imageVector =
119+
Icons.Default.DirectionsBus,
120+
contentDescription = "Directions Bus"
121+
)
122+
"Drive" -> Icon(
123+
imageVector =
124+
Icons.Default.DirectionsCar,
125+
contentDescription = "Directions Car"
126+
)
127+
}
128+
}
129+
)
130+
}
131+
}
132+
}
133+
// [END android_compose_components_multichoicesegmentedbutton]
134+
135+
@Preview
136+
@Composable
137+
private fun MultiChoiceSegmentedButtonPreview() {
138+
MultiChoiceSegmentedButton()
139+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,6 @@ enum class TopComponentsDestination(val route: String, val title: String) {
4848
CarouselExamples("carouselExamples", "Carousel"),
4949
MenusExample("menusExamples", "Menus"),
5050
TooltipExamples("tooltipExamples", "Tooltips"),
51-
NavigationDrawerExamples("navigationDrawerExamples", "Navigation drawer")
51+
NavigationDrawerExamples("navigationDrawerExamples", "Navigation drawer"),
52+
SegmentedButtonExamples("segmentedButtonExamples", "Segmented button")
5253
}

0 commit comments

Comments
 (0)