https://kotlinlang.org logo
#compose
Title
# compose
c

Chethan

10/21/2020, 11:52 AM
How can I change the background of Radio Button ?
n

nglauber

10/21/2020, 12:11 PM
What about this?
Copy code
Row(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))
    }
}
}
l

Louis Pullen-Freilich [G]

10/21/2020, 12:15 PM
You can / should use
Modifier.selectable
instead of
Modifier.clickable
here to add proper semantics / accessibility for a selectable item, other than that looks good.
n

nglauber

10/21/2020, 12:17 PM
great @Louis Pullen-Freilich [G]! thanks for the feedback. could you tell me more how to add this semantics / accessibility?
l

Louis Pullen-Freilich [G]

10/21/2020, 12:19 PM
Modifier.selectable
will automatically do it for you, so just replace
clickable
with it and it is all done 🙂
❤️ 1
n

nglauber

10/21/2020, 12:19 PM
thanks 😉
n

nglauber

10/21/2020, 12:22 PM
Thanks! 🙂 I took a look into this to use the
indication
property 😊
c

Chethan

10/22/2020, 1:45 AM
@nglauber @Louis Pullen-Freilich [G], Thanks for your help, I could achieve this 🙂 here is the code I made
Copy code
var 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 background
I am unable to make this textual content to center of the circle , I tried with
Copy code
textAlign = TextAlign.Center
I corrected this using Box
Copy code
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))
    }
}
3 Views