How can I change the background of Radio Button ?

# compose

[Chethan]

How can I change the background of Radio Button ?

[nglauber]

What about this?

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))
    }
}
}

[Louis Pullen-Freilich [G]]

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.

[nglauber]

great @Louis Pullen-Freilich [G]! thanks for the feedback.
could you tell me more how to add this semantics / accessibility?

[Louis Pullen-Freilich [G]]

Modifier.selectable will automatically do it for you, so just replace clickable with it and it is all done 🙂

[nglauber]

thanks 😉

[Louis Pullen-Freilich [G]]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/RadioButton.kt;l=88

You can take a look at how RadioButton is built

[nglauber]

Thanks! 🙂 I took a look into this to use the indication property 😊

[Chethan]

@nglauber @Louis Pullen-Freilich [G], Thanks for your help, I could achieve this 🙂

here is the code I made

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

[Chethan]

I am unable to make this textual content to center of the circle , I tried with

textAlign = TextAlign.Center

[Chethan]

I corrected this using Box

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))
    }
}