How to get value from Radio group in Jetpack Compose

Question

I'm beginner in Jetpack Compose, so I don't know how can I get value from Radio group that I created.

This is my Radio group composable function:

@Composable
fun KindRadioGroup(
    mItems: List<String>
) {
    val mRememberObserver = remember { mutableStateOf("") }
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            mItems.forEach { item ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {

                    RadioButton(
                        selected = mRememberObserver.value == item,
                        onClick = { mRememberObserver.value = item },
                        enabled = true,
                        colors = RadioButtonDefaults.colors(
                            selectedColor = Color.Magenta
                        )
                    )//RadioButton
                    Text(text = item, modifier = Modifier.padding(start = 8.dp))
                }//Row
            }
        }//Column
    }

}

Is that ok for creating a Radio group or you have better idea?

This is the way that I use that composable function:

val kinds = listOf(stringResource(id = R.string.req_impor), stringResource(id = R.string.nonreq_impor),
    stringResource(id = R.string.req_nonimpor))
KindRadioGroup(mItems = kinds)

By the way if it's ok, how can I get value from selected radio button?

Manteau

Answer 1

Use state hoisting and move the selection state outside the composable.

Sample code

@Composable
fun KindRadioGroupUsage() {
    val kinds = listOf("Option 1", "Option 2", "Option 3")
    val (selected, setSelected) = remember { mutableStateOf("") }
    Column {
        KindRadioGroup(
            mItems = kinds,
            selected, setSelected
        )
        Text(
            text = "Selected Option : $selected",
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth(),
        )
    }
}

@Composable
fun KindRadioGroup(
    mItems: List<String>,
    selected: String,
    setSelected: (selected: String) -> Unit,
) {
    CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            mItems.forEach { item ->
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    RadioButton(
                        selected = selected == item,
                        onClick = {
                            setSelected(item)
                        },
                        enabled = true,
                        colors = RadioButtonDefaults.colors(
                            selectedColor = Color.Magenta
                        )
                    )
                    Text(text = item, modifier = Modifier.padding(start = 8.dp))
                }
            }
        }
    }
}

Runny