Material 3 Radio Buttons

Overview

Radio buttons allow users to select a single option from a list.

Material 3 Radio Buttons, using MaterialRadioButton within a RadioGroup, are ideal for presenting all choices visibly, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Using Radio Buttons

• Add Material Components for Android library dependency
• Use RadioButton with Theme.Material3.* for auto-inflation to MaterialRadioButton
• Group in a RadioGroup for single selection

Accessibility

• Readable by TalkBack with auto-provided text labels
• Add android:contentDescription for clarity if needed
• Ensure sufficient contrast for visibility

Behavior and Configuration

• Group in RadioGroup to ensure single selection
• Handle state changes with setOnCheckedChangeListener
• Configure via XML attributes or programmatically

      
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.setOnCheckedChangeListener { _, checkedId ->
    when (checkedId) {
        R.id.radio_button_1 -> { /* Handle option 1 */ }
        R.id.radio_button_2 -> { /* Handle option 2 */ }
    }
}
val radioButton = findViewById<RadioButton>(R.id.radio_button_1)
radioButton.isChecked = true
      
    

Radio Button Anatomy

Component	Description	Selected State	Unselected State
Button	Circular indicator, 20dp diameter	Filled with colorPrimary	Empty with outline
Text Label	Describes the option	Enabled, same appearance	Enabled, same appearance

Radio Button Example

• Enables single-choice selection
• Exposes all options visibly
• Ideal for small, clear option sets

Example

      
<RadioGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/radio_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:checkedButton="@+id/radio_button_1">
    <RadioButton
        android:id="@+id/radio_button_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:enabled="true"
        android:paddingStart="16dp"
        android:text="@string/option_1"/>
    <RadioButton
        android:id="@+id/radio_button_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:enabled="true"
        android:paddingStart="16dp"
        android:text="@string/option_2"/>
</RadioGroup>
      
    

      
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.setOnCheckedChangeListener { _, checkedId ->
    when (checkedId) {
        R.id.radio_button_1 -> { /* Handle option 1 */ }
        R.id.radio_button_2 -> { /* Handle option 2 */ }
    }
}
      
    

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description	Component Type
Button	app:buttonTint	setButtonTintList	?attr/colorOnSurface (unchecked), ?attr/colorPrimary (checked)	Sets radio button color	All
Material Colors	app:useMaterialThemeColors	setUseMaterialThemeColors	true	Enables Material theme colors	All
Text	android:text	setText	null	Sets label text	All
Text Appearance	android:textAppearance	setTextAppearance	?attr/textAppearanceBodyMedium	Sets text style	All

Styles

• Default style: Widget.Material3.CompoundButton.RadioButton
• Default theme attribute: ?attr/radioButtonStyle

Theming Radio Buttons

• Customize colors and typography
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="radioButtonStyle">@style/Widget.App.RadioButton</item>
</style>
<style name="Widget.App.RadioButton" parent="Widget.Material3.CompoundButton.RadioButton">
    <item name="buttonTint">@color/shrine_pink_100</item>
    <item name="android:textColor">@color/shrine_pink_900</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Radio Buttons
• Covers design, behavior, theming specifications
• Includes structure, accessibility requirements
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Radio Buttons?

• Controls for selecting one option from a list

---

When to use Radio Buttons?

• Use to show all options; use dropdowns for collapsible lists

---

How to group them?

• Use RadioGroup to ensure single selection

---

How to make them accessible?

• Labels are auto-readable; add contentDescription if needed

---

Can I customize appearance?

• Yes, theme via res/values/styles.xml

---

How to add the Material 3 library?

• Include Material Components for Android

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for radio buttons