# Buttons [Buttons](https://material.io/components/buttons/) allow users to take actions, and make choices, with a single tap.  **Contents** * [Using buttons](#using-buttons) * [Text button](#text-button) * [Outlined button](#outlined-button) * [Contained button](#contained-button) * [Toggle button](#toggle-button) * [Theming](#theming-buttons) ## Using buttons Before you can use Material buttons, you need to add a dependency to the Material Components for Android library. For more information, go to the [Getting started](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md) page. _**Note:** `` is auto-inflated as `` via `MaterialComponentsViewInflater` when using a non-Bridge `Theme.MaterialComponents.*` theme._ ### Making buttons accessible Buttons support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in buttons is automatically provided to accessibility services. Additional content labels are usually unnecessary. For more information on content labels, go to the [Android accessibility help guide](https://support.google.com/accessibility/android/answer/7158690). ### Types There are four types of buttons: 1\. [Text button](#text-button), 2\. [Outlined button](#outlined-button), 3\. [Contained button](#contained-button), 4\. [Toggle button](#toggle-button)  ## Text button [Text buttons](https://material.io/components/buttons/#text-button) are typically used for less-pronounced actions, including those located in dialogs and cards. In cards, text buttons help maintain an emphasis on card content. ### Text button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a text button with a text label.  In the layout: ```xml ``` In code: ```kt textButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to a text button The following example shows a text button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties A text button has a text label, a transparent container and an optional icon.  1. Text label 2. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_text_btn_text_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceButton` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `@android:color/transparent` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_text_btn_bg_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `null` **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `0dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `0dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorPrimary` at 12% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_text_btn_ripple_color.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_text_btn_text_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `4dp` #### Styles | Element | Style | | ---------------------- | -------------------------------------------------------------- | | **Default style** | `Widget.MaterialComponents.Button.TextButton` | | **Icon style** | `Widget.MaterialComponents.Button.TextButton.Icon` | | **Full Width Buttons** | `Widget.MaterialComponents.Button.TextButton.Dialog.FullWidth` | Default style theme attribute: `?attr/borderlessButtonStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Outlined button [Outlined buttons](https://material.io/components/buttons/#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. ### Outlined button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows an outlined button with a text label and stroked container.  In the layout: ```xml ``` In code: ```kt outlinedButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to an outlined button The following example shows an outlined button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties An outlined button has a text label, a stroked container and an optional icon.  1. Text label 2. Container 3. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_text_btn_text_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceButton` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `@android:color/transparent` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_text_btn_bg_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `?attr/colorOnSurface` at 12% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_stroke_color_selector.xml)) **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `1dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `0dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorPrimary` at 12% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_text_btn_ripple_color.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_text_btn_text_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `4dp` #### Styles Element | Style ----------------- | ------------------------------------------------------ **Default style** | `Widget.MaterialComponents.Button.OutlinedButton` **Icon style** | `Widget.MaterialComponents.Button.OutlinedButton.Icon` Default style theme attribute: `?attr/materialButtonOutlinedStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Contained button [Contained buttons](https://material.io/components/buttons/#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app. _**Note** The contained button is the default style if the style is not set._ ### Contained button examples API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a contained button with a text label and a filled container.  In the layout: ```xml ``` _**Note:** Since this is the default type, you don't need to specify a style tag as long as you are using a Material Components Theme. If not, set the style to `@style/Widget.MaterialComponents.Button`._ In code: ```kt containedButton.setOnClickListener { // Respond to button press } ``` #### Adding an icon to a contained button The following example shows a contained button with an icon.  In the layout: ```xml ``` ### Anatomy and key properties A contained button has a text label, a filled container and an optional icon.  1. Text label 2. Container 3. Icon #### Text label attributes Element | Attribute | Related method(s) | Default value -------------- | ------------------------ | --------------------------------- | ------------- **Text label** | `android:text` | `setText`
`getText` | `null` **Color** | `android:textColor` | `setTextColor`
`getTextColor` | `?attr/colorOnPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_text_color_selector.xml)) **Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceButton` #### Container attributes Element | Attribute | Related method(s) | Default value ---------------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:backgroundTint` | `setBackgroundColor`
`setBackgroundTintList`
`getBackgroundTintList` | `?attr/colorPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_bg_color_selector.xml)) **Stroke color** | `app:strokeColor` | `setStrokeColor`
`setStrokeColorResource`
`getStrokeColor` | `null` **Stroke width** | `app:strokeWidth` | `setStrokeWidth`
`setStrokeWidthResource`
`getStrokeWidth` | `0dp` **Shape** | `app:shapeAppearance` | `setShapeAppearanceModel`
`getShapeAppearanceModel` | `?attr/shapeAppearanceSmallComponent` **Elevation** | `app:elevation` | `setElevation`
`getElevation` | `2dp` **Ripple color** | `app:rippleColor` | `setRippleColor`
`setRippleColorResource`
`getRippleColor` | `?attr/colorOnPrimary` at 24% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_ripple_color.xml)) #### Icon attributes Element | Attribute | Related method(s) | Default value ----------------------------------------------- | ----------------- | --------------------------------------------------------- | ------------- **Icon** | `app:icon` | `setIcon`
`setIconResource`
`getIcon` | `null` **Color** | `app:iconTint` | `setIconTint`
`setIconTintResource`
`getIconTint` | `?attr/colorOnPrimary` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/color/mtrl_btn_text_color_selector.xml)) **Size** | `app:iconSize` | `setIconSize`
`getIconSize` | `wrap_content` **Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`
`getIconGravity` | `start` **Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`
`getIconPadding` | `4dp` #### Styles Element | Style ------------------------- | ------------------------------------------------------- **Default style** | `Widget.MaterialComponents.Button` **Icon style** | `Widget.MaterialComponents.Button.Icon` **Unelevated style** | `Widget.MaterialComponents.Button.UnelevatedButton` **Unelevated icon style** | `Widget.MaterialComponents.Button.UnelevatedButton.Icon` Default style theme attribute: `?attr/materialButtonStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ## Toggle button [Toggle buttons](https://material.io/components/buttons/#toggle-button) can be used to select from a group of choices. There are two types of toggle buttons: * [Toggle button](#toggle-button) * [Icon](#icon) ### Toggle button To emphasize groups of related toggle buttons, a group should share a common container. #### Toggle button examples API and source code: * `MaterialButtonToggleGroup` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButtonToggleGroup) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButtonToggleGroup.java) * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows a toggle button with three buttons that have text labels.  In the layout: ```xml ``` In code: ```kt toggleButton.addOnButtonCheckedListener { toggleButton, checkedId, isChecked -> // Respond to button selection } ``` #### Implementing an icon-only toggle button The following example shows a toggle button with three buttons that have icons.  In `res/values/styles.xml`: ```xml ``` In the layout: ```xml ``` ### Anatomy and key properties A toggle button has a shared stroked container, icons and/or text labels.  1. Container 2. Icon #### Selection attributes Element | Attribute | Related method(s) | Default value ---------------------- | ----------------------- | ------------------------------------------------ | ------------- **Single selection** | `app:singleSelection` | `setSingleSelection`
`isSingleSelection` | `false` **Selection required** | `app:selectionRequired` | `setSelectionRequired`
`isSelectionRequired` | `false` #### Styles Element | Style ----------------- | ----------------------------------------------------- **Default style** | `Widget.MaterialComponents.MaterialButtonToggleGroup` Default style theme attribute: `?attr/materialButtonToggleGroupStyle` See the full list of [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml) and [attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml). ### Icon Icons can be used as toggle buttons when they allow selection, or deselection, of a single choice, such as marking an item as a favorite. #### Icon example API and source code: * `CheckBox` * [Class description](https://developer.android.com/reference/android/widget/CheckBox) _**Note** The `CheckBox` API is just one of several inputs that can implement the icon button. See other [selection controls](https://material.io/components/selection-controls/) for more details._ The following example shows an icon that can be used independently or in items of a `RecyclerView`.  In the layout: ```xml ``` In `res/drawable/sl_favourite_24dp.xml`: ```xml ``` In code: ```kt icon.setOnCheckedChangeListener { checkBox, isChecked -> // Respond to icon toggle } ``` ## Theming buttons Buttons support [Material Theming](https://material.io/components/buttons/#theming) and can be customized in terms of color, typography and shape. ### Button theming example API and source code: * `MaterialButton` * [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java) The following example shows text, outlined and contained button types with Material Theming.  #### Implementing button theming Using theme attributes and styles in `res/values/styles.xml` (themes all buttons and affects other components): ```xml ``` or using default style theme attributes, styles and theme overlays (themes all buttons but does not affect other components): ```xml ``` or using one of the styles in the layout (affects only this button): ```xml ```