Home > Mobile >  Custom drawable selected state for Radio Button in Jetpack Compose
Custom drawable selected state for Radio Button in Jetpack Compose

Time:02-15

Wondering if there is a way to set the selected state for a radio button to be a custom icon in jetpack compose

enter image description here

CodePudding user response:

RadioButton source

There is no options to change the appearance of RadioButton.

But here:

// Draw the radio button
val strokeWidth = RadioStrokeWidth.toPx()
drawCircle(
    radioColor.value,
    RadioRadius.toPx() - strokeWidth / 2,
    style = Stroke(strokeWidth)
)
if (dotRadius.value > 0.dp) {
    drawCircle(radioColor.value, dotRadius.value.toPx() - strokeWidth / 2, style = Fill)
}

you can draw whatever you want.

CodePudding user response:

You can use IconToggleButton instead of the RadioButton

IconToggleButton( checked = state.value == item,
                  onCheckedChange = { state.value = item }) 
                        {
                            Icon(
                                painter = painterResource(if (state.value == item) R.drawable.select_radio else R.drawable.unselect_radio),
                                contentDescription = "Radio button icon",
                                tint = Color(
                                    0xFF9B51E0
                                )
                            )
                        }
  • Related