Chethan
10/21/2020, 11:52 AMnglauber
10/21/2020, 12:11 PMRow(modifier = Modifier.fillMaxWidth()) {
(1 until 5).forEach { index ->
val isSelected = toggleIndex == index
Text(
text = index.toString(),
style = TextStyle(
color = if (isSelected) Color.White else Color.Black,
fontSize = 20.sp
),
modifier = Modifier
.border(1.dp, color = Color.Black, CircleShape)
.background(
color = if (isSelected) Color.Black else Color.White,
shape = CircleShape
)
.clickable(
indication = RippleIndication(bounded = true, radius = 24.dp)
) {
toggleIndex = index
}
.size(48.dp)
)
Spacer(modifier = Modifier.width(2.dp))
}
}
}
Louis Pullen-Freilich [G]
10/21/2020, 12:15 PMModifier.selectable
instead of Modifier.clickable
here to add proper semantics / accessibility for a selectable item, other than that looks good.nglauber
10/21/2020, 12:17 PMLouis Pullen-Freilich [G]
10/21/2020, 12:19 PMModifier.selectable
will automatically do it for you, so just replace clickable
with it and it is all done 🙂nglauber
10/21/2020, 12:19 PMLouis Pullen-Freilich [G]
10/21/2020, 12:20 PMRadioButton
is builtnglauber
10/21/2020, 12:22 PMindication
property 😊Chethan
10/22/2020, 1:45 AMvar toggleIndex = remember { mutableStateOf(0) }
Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
(1..5).forEach { index ->
val isSelected = toggleIndex.value == index
Text(
text = index.toString(),
style = TextStyle(
color = if (isSelected) Color.White else Color.Black,
fontSize = 20.sp,
textAlign = TextAlign.Center
),
modifier = Modifier
.border(1.dp, color = Color.White, CircleShape)
.background(
color = if (isSelected) Color.Black else Color.White,
shape = CircleShape
)
.selectable(
enabled = true,
selected = true,
onClick = { toggleIndex.value = index },
indication = RippleIndication(bounded = true, radius = 24.dp)
).size(48.dp)
)
Spacer(modifier = Modifier.width(2.dp))
}
}
I have to align the text to be center to its backgroundtextAlign = TextAlign.Center
Row(
modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(top = 10.dp),
verticalAlignment = Alignment.CenterVertically
) {
val toggleIndex = remember { mutableStateOf(0) }
(1..5).forEach { index ->
val isSelected = toggleIndex.value == index
Box(
modifier = Modifier
.border(
1.dp,
color = if (isSelected) Color.Black else Color.White,
CircleShape
)
.background(
color = if (isSelected) Color.Black else Color.White,
shape = CircleShape
)
.selectable(
enabled = true,
selected = true,
onClick = { toggleIndex.value = index },
indication = RippleIndication(bounded = true, radius = 24.dp)
).preferredSize(buttonSize)
) {
Text(
text = index.toString(),
style = TextStyle(
color = if (isSelected) Color.White else Color.Black,
fontSize = fontSize.sp,
textAlign = TextAlign.Center
),
modifier = Modifier.align(Alignment.Center)
)
}
Spacer(modifier = Modifier.width(10.dp))
}
}