RadioButtons in Android using Jetpack Compose

Jetpack Compose is Android's modern, fully declarative UI toolkit to create native UI. With Compose, the way you define and work with UI components, like RadioButton, has changed significantly from the traditional XML-based approach.

Here's how you can create and use RadioButtons in Jetpack Compose:

First, ensure you have Jetpack Compose dependencies in your build.gradle.kts or build.gradle file:

implementation "androidx.compose.ui:ui:1.X.X"
implementation "androidx.compose.material:material:1.X.X"
implementation "androidx.compose.ui:ui-tooling:1.X.X"

Note: Replace 1.X.X with the version you are using.

Create RadioButtons using Composable functions:

import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.window.ApplicationScope
import androidx.compose.material.*
import androidx.compose.runtime.saveable.rememberSaveable

@Composable
fun RadioButtonDemo() {
    var selectedOption by rememberSaveable { mutableStateOf("Option 1") }
    val options = listOf("Option 1", "Option 2", "Option 3")

    Column {
        options.forEach { text ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.Start
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = { selectedOption = text }
                )
                Spacer(modifier = Modifier.width(16.dp))
                Text(text = text, style = MaterialTheme.typography.body1)
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun RadioButtonPreview() {
    RadioButtonDemo()
}

In this example:

RadioButtonDemo composable function renders a list of options as RadioButtons.
The selected option is stored in a mutableStateOf which is a state-backed property, provided by the rememberSaveable function to keep the state across recompositions.
We use a Column to stack each option vertically, and within that, a Row to place the RadioButton and its associated Text side by side.
We set the RadioButton's selected parameter based on the currently selected option.
The @Preview annotation allows you to preview this UI in Android Studio without running it on a device or emulator.

To display the RadioButtons in your app, you just call RadioButtonDemo() inside your main UI Composable function.

Android RadioButton example with Jetpack Compose:

@Composable
fun RadioButtonExample() {
    var selectedOption by remember { mutableStateOf("Option 1") }

    Column {
        RadioButton(
            selected = selectedOption == "Option 1",
            onClick = { selectedOption = "Option 1" },
            modifier = Modifier.padding(16.dp)
        ) {
            Text("Option 1")
        }

        RadioButton(
            selected = selectedOption == "Option 2",
            onClick = { selectedOption = "Option 2" },
            modifier = Modifier.padding(16.dp)
        ) {
            Text("Option 2")
        }

        // ... Add more RadioButtons as needed
    }
}

RadioButton and AlertDialog in Jetpack Compose example:

Use AlertDialog in combination with RadioButton:

AlertDialog(
    onDismissRequest = { /* Handle dismiss */ },
    title = { Text("Select an option") },
    buttons = {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            RadioButton(
                selected = selectedOption == "Option 1",
                onClick = { selectedOption = "Option 1" },
                modifier = Modifier.padding(16.dp)
            ) {
                Text("Option 1")
            }

            RadioButton(
                selected = selectedOption == "Option 2",
                onClick = { selectedOption = "Option 2" },
                modifier = Modifier.padding(16.dp)
            ) {
                Text("Option 2")
            }
        }
    }
)