Exploring Jetpack Compose: Radio Button

E

If you’re enjoying my posts on Jetpack Compose, check out some details on the book I’ll be writing on Compose!

We previously looked at other checkable components and how they can be used to allow a toggleable state controller within our user interface. Alongside these other toggleable components we also have the Radio Button component. This button allows our users to select some property on – usually in cases where at least one of the options is required, essentially allowing us to toggle between the different radio buttons that are on show. Within Jetpack Compose we have the Radio Button component, this provides a single composable function which can be used to construct an instance:

@Composable
fun RadioButton(
    selected: Boolean,
    onSelect: (() -> Unit)?,
    color: Color = MaterialTheme.colors.secondary
)

As we can see here, there are three available properties that we can pass to the Switch function:

  • selected – whether or not the button is currently selected. This is required
  • onSelect – a callback that will receive change events for when the selected state of the component changes changes. This is required
  • color – the color to be used for the component. If not provided, then the secondary color from the application theme will be applied

With the above in mind we can create a simple Radio Button by providing the two required values for both selected and onSelect, as shown below:

Row {
    RadioButton(
        selected = false,
        onSelect = {  }
    )
    Text(
        text = “hello”
    )
}

We can also toggle this selected property to show the component in its selected state:

Row {
    RadioButton(
        selected = true,
        onSelect = {  }
    )
    Text(
        text = “hello”
    )
}

The Radio Button component color property can be used to override the use our the secondary color from our application theme:

Row {
    RadioButton(
        selected = true,
        onSelect = {  },
        color = Color.Magenta
    )
    Text(
        text = “hello”
    )
}

Whilst the above looks great, statically defining the checked value, along with not reacting to state changed events, doesn’t really resemble how we might handle this in a real world scenario. To approach this, let’s being by created a new @Model representation that will house the state for our Radio Button. Here we’ll use a nullable string to keep a track of the selected option:

@Model
class RadioState(var selectedOption: String? = null)

Now we have this in place, we can assign values to both our selected and onSelect properties. In our composable function we pass a RadioState reference, along with a text value which is going to be assigned to our Radio Button. For the selected property we’ll simply check whether the given text value matches the currently selected option in our RadioState reference. When it comes to the onSelect property we will set the selectedOption value within our RadioState reference so that the state of the Radio Button is reflected in our model.

@Composable
fun RadioButtonWithLabel(
    text: String,
    formState: RadioState
) {
    Row {
        RadioButton(
            selected = radioState.selectedOption == text,
            onSelect = { 
                radioState.selectedOption = text
            },
            color = Color.Magenta
        )
        Text(
            text = “hello”
        )
    }
}

With the above in place we have a single Radio Button that can be used to toggle between different selectable options. You will always need more than one Radio Button to allow selection between different options, so state will need to be managed across different buttons. Jetpack Compose also contains a Radio Group component which is used to handle exactly that, which we will cover in the following section.

In this post we’ve taken a quick dive into the Radio Button component from Jetpack Compose. Stay tuned for the next post and in the meantime, subscribe to updates on my Jetpack Compose book 🙂

About the author

hitherejoe

Add Comment