gauthams 64f950c429 Update MaterialButton docs
PiperOrigin-RevId: 195140077
2018-05-02 17:06:48 -04:00

5.4 KiB

Material Button

Material Button is a customizable button component with updated visual styles. This button component has several built-in styles to support different levels of emphasis, as typically any UI will contain a few different buttons to indicate different actions. These levels of emphasis include:

  • raised button: A rectangular material button that lifts and displays ink reactions on press
  • unelevated button: A button made of ink that displays ink reactions on press but does not lift

Design & API Documentation

Usage

The MaterialButton component provides a complete implementation of Material Design's button component. Example code of how to include the component in your layout:

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_label_enabled"/>

<com.google.android.material.button.MaterialButton
    android:id="@+id/disabled_material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="@string/button_label_disabled"/>

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_unelevated_button"
    style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/unelevated_button_label_enabled"/>

For raised buttons, your theme's colorAccent provides the default background color of the component, and the text color is white by default. For unelevated buttons, your theme's colorAccent provides the default text color of the component, and the background color is transparent by default.

Attributes

The following attributes can be changed for Material Button:

Description Relevant attributes
Button padding android:padding \
: : android\:paddingLeft \ :
                               : `android\:paddingRight` \           :
                               : `android\:paddingStart` \           :
                               : `android\:paddingEnd` \             :
                               : `android\:paddingTop` \             :
                               : `android\:paddingBottom`            :
| Button inset | android:insetLeft \ |
                               : `android\:insetRight` \             :
                               : `android\:insetTop` \               :
                               : `android\:insetBottom`              :
| Background color | app:backgroundTint \ |
                               : `app\:backgroundTintMode`           :
| Icon drawable | app:icon |
| Padding between icon and button text | app:iconPadding |
| Icon color | app:iconTint \ |
                               : `app\:iconTintMode`                 :
| Padding at the start of a button when | app:additionalPaddingStartForIcon |
an icon is present : : | Padding at the end of a button when an | app:additionalPaddingEndForIcon |
icon is present : : | Stroke | app:strokeColor \ |
                               : `app\:strokeWidth`                  :
| The radius of all four corners of the | app:cornerRadius |
button : : | Ripple | app:rippleColor |

The following shows an example of setting icon and iconPadding attributes on a button:

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_icon_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_button_label_enabled"
    app:icon="@drawable/icon_24px"
    app:iconPadding="8dp"/>

If your app requires actions to be persistent and readily available, you can use FloatingActionButton instead.