mirror of
https://github.com/material-components/material-components-android.git
synced 2026-02-20 08:39:55 +08:00
160 lines
6.5 KiB
Markdown
160 lines
6.5 KiB
Markdown
<!--docs:
|
|
title: "Material Button"
|
|
layout: detail
|
|
section: components
|
|
excerpt: "A customizable button component with updated visual styles."
|
|
iconId: materialbutton
|
|
path: /catalog/material-button/
|
|
-->
|
|
|
|
# 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
|
|
|
|
Note: `MaterialButton` is visually different from `Button` and
|
|
`AppCompatButton`. One of the main differences is that `AppCompatButton` has a
|
|
`4dp` inset on the left and right sides, whereas `MaterialButton` does not. To
|
|
add an inset to match `AppCompatButton`, set `android:insetLeft` and
|
|
`android:insetRight` on the button to `4dp`, or change the spacing on the
|
|
button's parent layout.
|
|
|
|
When replacing buttons in your app with `MaterialButton`, you should inspect
|
|
these changes for sizing and spacing differences.
|
|
|
|
## Design & API Documentation
|
|
|
|
- [Material Design guidelines: Buttons](https://material.io/go/design-buttons)
|
|
<!--{: .icon-list-item.icon-list-item--spec }-->
|
|
- [Class
|
|
definition](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java)
|
|
<!--{: .icon-list-item.icon-list-item--link }-->
|
|
- [Class
|
|
overview](https://developer.android.com/reference/com/google/android/material/button/MaterialButton)
|
|
<!--{: .icon-list-item.icon-list-item--link }--> <!--{: .icon-list }-->
|
|
|
|
## 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:
|
|
|
|
```xml
|
|
<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.
|
|
|
|
## Styles
|
|
|
|
We provide several styles for the `MaterialButton` component.
|
|
|
|
### Filled, elevated button (default)
|
|
|
|
The default style represents an elevated button with a colored background. This
|
|
should be used for important, final actions that complete a flow, like 'Save' or
|
|
'Confirm'. If no style attribute is specified for a `MaterialButton`, this is
|
|
the style that will be used.
|
|
|
|
```
|
|
<com.google.android.material.button.MaterialButton
|
|
android:id="@+id/material_button"
|
|
style="@style/Widget.MaterialComponents.Button"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="wrap_content"
|
|
android:text="@string/button_label_enabled"/>
|
|
```
|
|
|
|
### Filled, unelevated button
|
|
|
|
The `UnelevatedButton` style represents an unelevated button with a colored
|
|
background.
|
|
|
|
```
|
|
<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"/>
|
|
```
|
|
|
|
### Text button
|
|
|
|
The `TextButton` style has a transparent background with colored text. Text
|
|
buttons are used for low-priority actions, especially when presenting multiple
|
|
options.
|
|
|
|
```
|
|
<com.google.android.material.button.MaterialButton
|
|
android:id="@+id/material_text_button"
|
|
style="@style/Widget.MaterialComponents.Button.TextButton"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="wrap_content"
|
|
android:text="@string/text_button_label_enabled"/>
|
|
```
|
|
|
|
## Attributes
|
|
|
|
The following attributes can be changed for Material Button:
|
|
|
|
Description | Relevant attributes
|
|
------------------------------------------------------------ | -------------------
|
|
Button padding | `android:padding`<br/>`android:paddingLeft`<br/>`android:paddingRight`<br/>`android:paddingStart`<br/>`android:paddingEnd`<br/>`android:paddingTop`<br/>`android:paddingBottom`
|
|
Button inset | `android:insetLeft`<br/>`android:insetRight`<br/>`android:insetTop`<br/>`android:insetBottom`
|
|
Background color | `app:backgroundTint`<br/>`app:backgroundTintMode`
|
|
Icon drawable | `app:icon`
|
|
Padding between icon and button text | `app:iconPadding`
|
|
Icon color | `app:iconTint`<br/>`app:iconTintMode`
|
|
Padding at the start of a button when<br/>an icon is present | `app:additionalPaddingStartForIcon`
|
|
Padding at the end of a button when an<br/>icon is present | `app:additionalPaddingEndForIcon`
|
|
Stroke | `app:strokeColor`<br/>`app:strokeWidth`
|
|
The radius of all four corners of the<br/>button | `app:cornerRadius`
|
|
Ripple | `app:rippleColor`
|
|
|
|
The following shows an example of setting `icon` and `iconPadding` attributes on
|
|
a button:
|
|
|
|
```xml
|
|
<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"/>
|
|
```
|
|
|
|
## Related Concepts
|
|
|
|
If your app requires actions to be persistent and readily available, you can use
|
|
[FloatingActionButton](FloatingActionButton.md) instead.
|