Selection controls: radio buttons

Selection controls allow the user to select options.

Use radio buttons to:

  • Select a single option from a list
  • Expose all available options
  • If available options can be collapsed, consider using a dropdown menu instead, as it uses less space.

Settings menu with radio buttons for ringtones

Contents

Using radio buttons

Before you can use Material radio buttons, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Note:<RadioButton> is auto-inflated as <com.google.android.material.button.MaterialRadioButton> via MaterialComponentsViewInflater when using a non-Bridge Theme.MaterialComponents.* theme.

Making radio buttons accessible

Radio buttons support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in radio buttons is automatically provided to accessibility services. Additional content labels are usually unnecessary.

Grouping radio buttons

Changes in the states of one radio button can affect other buttons in the group. Specifically, selecting a RadioButton in a RadioGroup will de-select all other buttons in that group. See the example section below for implementation details.

Radio button

A radio button is a circle that is filled in with an inset when selected. Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.

Radio buttons example

API and source code:

The following example shows a radio button group with five radio buttons.

Example radio button group with 5 radio buttons, the first one is selected and
the last one is disabled.

In the layout:

In code:

Key properties

Radio button attributes

ElementAttributeRelated method(s)Default value
To use material colorsapp:useMaterialThemeColorssetUseMaterialThemeColors
isUseMaterialThemeColors
true (ignored if app:buttonTint is set)
Colorapp:buttonTintsetButtonTintList
getButtonTintList
null
Min sizeandroid:minWidth
android:minHeight
(set/get)MinWidth
(set/get)MinHeight
?attr/minTouchTargetSize

The color of the radio button defaults to ?attr/colorOnSurface (unchecked) and ?attr/colorSecondary (checked) defined in your app theme. If you want to override this behavior, as you might with a custom drawable that should not be tinted, set app:useMaterialThemeColors to false:

Text label attributes

ElementAttributeRelated method(s)Default value
Text labelandroid:textsetText
getText
null
Colorandroid:textColorsetTextColor
getTextColors
inherits from AppCompatRadioButton
Typographyandroid:textAppearancesetTextAppearanceinherits from AppCompatRadioButton

Radio button states

Radio buttons can be selected or unselected. Radio buttons have enabled, disabled, hover, focused, and pressed states.

Radio button states in an array. Columns are enabled, disabled, hover,
focused, pressed. Rows are selected or
unselected

Styles

ElementStyle
Default styleWidget.MaterialComponents.CompoundButton.RadioButton

Default style theme attribute: ?attr/radioButtonStyle

See the full list of styles and attrs.

Theming radio buttons

Radio buttons support Material Theming and can be customized in terms of color and typography.

Radio button theming example

API and source code:

The following example shows a radio button with Material Theming.

"5 radio buttons with brown text; first selected with pink outline and fill,
last disabled with light brown text and
button"

Implementing radio button theming

Using theme attributes in res/values/styles.xml (themes all radio buttons and affects other components):

or using default style theme attributes, styles and theme overlays (themes all radio buttons but does not affect other components):

you can also change the radio button colors via the ?attr/buttonTint attribute:

and in color/button_tint.xml:

or using the styles in the layout (affects only this radio button):