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  *      http://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 androidx.wear.compose.material.samples
18 
19 import androidx.annotation.Sampled
20 import androidx.compose.foundation.layout.Arrangement
21 import androidx.compose.foundation.layout.Column
22 import androidx.compose.foundation.layout.Spacer
23 import androidx.compose.foundation.layout.fillMaxSize
24 import androidx.compose.foundation.layout.fillMaxWidth
25 import androidx.compose.foundation.layout.height
26 import androidx.compose.foundation.layout.size
27 import androidx.compose.foundation.layout.wrapContentSize
28 import androidx.compose.runtime.Composable
29 import androidx.compose.runtime.getValue
30 import androidx.compose.runtime.mutableStateOf
31 import androidx.compose.runtime.remember
32 import androidx.compose.runtime.setValue
33 import androidx.compose.ui.Alignment
34 import androidx.compose.ui.Modifier
35 import androidx.compose.ui.res.painterResource
36 import androidx.compose.ui.text.style.TextOverflow
37 import androidx.compose.ui.unit.dp
38 import androidx.wear.compose.material.Icon
39 import androidx.wear.compose.material.SelectableChip
40 import androidx.wear.compose.material.SplitSelectableChip
41 import androidx.wear.compose.material.Text
42 
43 @Sampled
44 @Composable
SelectableChipWithRadioButtonnull45 fun SelectableChipWithRadioButton() {
46     var selectedRadioIndex by remember { mutableStateOf(0) }
47     Column(
48         modifier = Modifier.fillMaxSize(),
49         verticalArrangement = Arrangement.Center,
50         horizontalAlignment = Alignment.CenterHorizontally,
51     ) {
52         SelectableChip(
53             modifier = Modifier.fillMaxWidth(),
54             selected = selectedRadioIndex == 0,
55             onClick = { selectedRadioIndex = 0 },
56             label = {
57                 // The primary label should have a maximum 3 lines of text
58                 Text("Primary label", maxLines = 3, overflow = TextOverflow.Ellipsis)
59             },
60             secondaryLabel = {
61                 // and the secondary label should have max 2 lines of text.
62                 Text("Secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
63             },
64             appIcon = {
65                 Icon(
66                     painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
67                     contentDescription = "airplane",
68                     modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
69                 )
70             },
71             enabled = true,
72         )
73         Spacer(modifier = Modifier.height(8.dp))
74         SelectableChip(
75             modifier = Modifier.fillMaxWidth(),
76             selected = selectedRadioIndex == 1,
77             onClick = { selectedRadioIndex = 1 },
78             label = {
79                 // The primary label should have a maximum 3 lines of text
80                 Text("Alternative label", maxLines = 3, overflow = TextOverflow.Ellipsis)
81             },
82             secondaryLabel = {
83                 // and the secondary label should have max 2 lines of text.
84                 Text("Alternative secondary", maxLines = 2, overflow = TextOverflow.Ellipsis)
85             },
86             appIcon = {
87                 Icon(
88                     painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
89                     contentDescription = "airplane",
90                     modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
91                 )
92             },
93             enabled = true,
94         )
95     }
96 }
97 
98 @Sampled
99 @Composable
SplitSelectableChipWithRadioButtonnull100 fun SplitSelectableChipWithRadioButton() {
101     var selectedRadioIndex by remember { mutableStateOf(0) }
102     Column(
103         modifier = Modifier.fillMaxSize(),
104         verticalArrangement = Arrangement.Center,
105         horizontalAlignment = Alignment.CenterHorizontally,
106     ) {
107         SplitSelectableChip(
108             modifier = Modifier.fillMaxWidth(),
109             selected = selectedRadioIndex == 0,
110             onSelectionClick = { selectedRadioIndex = 0 },
111             label = {
112                 // The primary label should have a maximum 3 lines of text
113                 Text("Primary label", maxLines = 3, overflow = TextOverflow.Ellipsis)
114             },
115             secondaryLabel = {
116                 // and the secondary label should have max 2 lines of text.
117                 Text("Secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
118             },
119             onContainerClick = {
120                 /* Do something */
121             },
122             enabled = true,
123         )
124         Spacer(modifier = Modifier.height(8.dp))
125         SplitSelectableChip(
126             modifier = Modifier.fillMaxWidth(),
127             selected = selectedRadioIndex == 1,
128             onSelectionClick = { selectedRadioIndex = 1 },
129             label = {
130                 // The primary label should have a maximum 3 lines of text
131                 Text("Alternative label", maxLines = 3, overflow = TextOverflow.Ellipsis)
132             },
133             secondaryLabel = {
134                 // and the secondary label should have max 2 lines of text.
135                 Text("Alternative secondary", maxLines = 2, overflow = TextOverflow.Ellipsis)
136             },
137             onContainerClick = {
138                 /* Do something */
139             },
140             enabled = true,
141         )
142     }
143 }
144