Skip to content

Commit 1abfca9

Browse files
Nick Routleticiarossi
Nick Rout
authored and
leticiarossi
committed
[Buttons] Update doc
Resolves #1035 GIT_ORIGIN_REV_ID=a881d979ba6651d5efcc5e253b012018a5cb0fc4 PiperOrigin-RevId: 295969209
1 parent ea72404 commit 1abfca9

File tree

2 files changed

+62
-131
lines changed

2 files changed

+62
-131
lines changed

‎docs/components/Button.md‎

Lines changed: 26 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!--docs:
2-
title: "Material Button"
2+
title: "Buttons"
33
layout: detail
44
section: components
55
excerpt: "A customizable button component with updated visual styles."
@@ -81,9 +81,7 @@ textButton.setOnClickListener {
8181
}
8282
```
8383

84-
<details>
85-
<summary><b>Adding an icon to a text button</b></summary>
86-
<br>
84+
#### Adding an icon to a text button
8785

8886
The following example shows a text button with an icon.
8987

@@ -100,8 +98,6 @@ In the layout:
10098
/>
10199
```
102100

103-
</details>
104-
105101
### Anatomy and key properties
106102

107103
A text button has a text label, a transparent container and an optional icon.
@@ -111,21 +107,15 @@ A text button has a text label, a transparent container and an optional icon.
111107
1. Text label
112108
2. Icon
113109

114-
<details>
115-
<summary><b>Text label</b> attributes</summary>
116-
<br>
110+
#### Text label attributes
117111

118112
&nbsp; | Attribute | Related method(s) | Default value
119113
-------------- | ------------------------ | --------------------------------- | -------------
120114
**Text label** | `android:text` | `setText`<br/>`getText` | `null`
121115
**Color** | `android:textColor` | `setTextColor`<br/>`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))
122116
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceButton`
123117

124-
</details>
125-
126-
<details>
127-
<summary><b>Container</b> attributes</summary>
128-
<br>
118+
#### Container attributes
129119

130120
&nbsp; | Attribute | Related method(s) | Default value
131121
---------------- | --------------------- | ---------------------------------------------------------------------------- | -------------
@@ -136,11 +126,7 @@ A text button has a text label, a transparent container and an optional icon.
136126
**Elevation** | `app:elevation` | `setElevation`<br/>`getElevation` | `0dp`
137127
**Ripple color** | `app:rippleColor` | `setRippleColor`<br/>`setRippleColorResource`<br/>`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))
138128

139-
</details>
140-
141-
<details>
142-
<summary><b>Icon</b> attributes</summary>
143-
<br>
129+
#### Icon attributes
144130

145131
&nbsp; | Attribute | Related method(s) | Default value
146132
----------------------------------------------- | ----------------- | --------------------------------------------------------- | -------------
@@ -150,11 +136,7 @@ A text button has a text label, a transparent container and an optional icon.
150136
**Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`<br/>`getIconGravity` | `start`
151137
**Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`<br/>`getIconPadding` | `4dp`
152138

153-
</details>
154-
155-
<details>
156-
<summary><b>Styles</b></summary>
157-
<br>
139+
#### Styles
158140

159141
&nbsp; | Style
160142
----------------- | --------------------------------------------------
@@ -168,8 +150,6 @@ See the full list of
168150
and
169151
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml).
170152

171-
</details>
172-
173153
## Outlined button
174154

175155
[Outlined buttons](https://material.io/components/buttons/#outlined-button) are
@@ -210,9 +190,7 @@ outlinedButton.setOnClickListener {
210190
}
211191
```
212192

213-
<details>
214-
<summary><b>Adding an icon to an outlined button</b></summary>
215-
<br>
193+
#### Adding an icon to an outlined button
216194

217195
The following example shows an outlined button with an icon.
218196

@@ -229,8 +207,6 @@ In the layout:
229207
/>
230208
```
231209

232-
</details>
233-
234210
### Anatomy and key properties
235211

236212
An outlined button has a text label, a stroked container and an optional icon.
@@ -241,21 +217,15 @@ An outlined button has a text label, a stroked container and an optional icon.
241217
2. Container
242218
3. Icon
243219

244-
<details>
245-
<summary><b>Text label</b> attributes</summary>
246-
<br>
220+
#### Text label attributes
247221

248222
&nbsp; | Attribute | Related method(s) | Default value
249223
-------------- | ------------------------ | --------------------------------- | -------------
250224
**Text label** | `android:text` | `setText`<br/>`getText` | `null`
251225
**Color** | `android:textColor` | `setTextColor`<br/>`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))
252226
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceButton`
253227

254-
</details>
255-
256-
<details>
257-
<summary><b>Container</b> attributes</summary>
258-
<br>
228+
#### Container attributes
259229

260230
&nbsp; | Attribute | Related method(s) | Default value
261231
---------------- | --------------------- | ---------------------------------------------------------------------------- | -------------
@@ -266,11 +236,7 @@ An outlined button has a text label, a stroked container and an optional icon.
266236
**Elevation** | `app:elevation` | `setElevation`<br/>`getElevation` | `0dp`
267237
**Ripple color** | `app:rippleColor` | `setRippleColor`<br/>`setRippleColorResource`<br/>`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))
268238

269-
</details>
270-
271-
<details>
272-
<summary><b>Icon</b> attributes</summary>
273-
<br>
239+
#### Icon attributes
274240

275241
&nbsp; | Attribute | Related method(s) | Default value
276242
----------------------------------------------- | ----------------- | --------------------------------------------------------- | -------------
@@ -280,11 +246,7 @@ An outlined button has a text label, a stroked container and an optional icon.
280246
**Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`<br/>`getIconGravity` | `start`
281247
**Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`<br/>`getIconPadding` | `4dp`
282248

283-
</details>
284-
285-
<details>
286-
<summary><b>Styles</b></summary>
287-
<br>
249+
#### Styles
288250

289251
&nbsp; | Style
290252
----------------- | ------------------------------------------------------
@@ -298,8 +260,6 @@ See the full list of
298260
and
299261
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml).
300262

301-
</details>
302-
303263
## Contained button
304264

305265
[Contained buttons](https://material.io/components/buttons/#contained-button)
@@ -345,9 +305,7 @@ containedButton.setOnClickListener {
345305
}
346306
```
347307

348-
<details>
349-
<summary><b>Adding an icon to a contained button</b></summary>
350-
<br>
308+
#### Adding an icon to a contained button
351309

352310
The following example shows a contained button with an icon.
353311

@@ -364,8 +322,6 @@ In the layout:
364322
/>
365323
```
366324

367-
</details>
368-
369325
### Anatomy and key properties
370326

371327
A contained button has a text label, a filled container and an optional icon.
@@ -376,21 +332,15 @@ A contained button has a text label, a filled container and an optional icon.
376332
2. Container
377333
3. Icon
378334

379-
<details>
380-
<summary><b>Text label</b> attributes</summary>
381-
<br>
335+
#### Text label attributes
382336

383337
&nbsp; | Attribute | Related method(s) | Default value
384338
-------------- | ------------------------ | --------------------------------- | -------------
385339
**Text label** | `android:text` | `setText`<br/>`getText` | `null`
386340
**Color** | `android:textColor` | `setTextColor`<br/>`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))
387341
**Typography** | `android:textAppearance` | `setTextAppearance` | `?attr/textAppearanceButton`
388342

389-
</details>
390-
391-
<details>
392-
<summary><b>Container</b> attributes</summary>
393-
<br>
343+
#### Container attributes
394344

395345
&nbsp; | Attribute | Related method(s) | Default value
396346
---------------- | --------------------- | ---------------------------------------------------------------------------- | -------------
@@ -401,11 +351,7 @@ A contained button has a text label, a filled container and an optional icon.
401351
**Elevation** | `app:elevation` | `setElevation`<br/>`getElevation` | `2dp`
402352
**Ripple color** | `app:rippleColor` | `setRippleColor`<br/>`setRippleColorResource`<br/>`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))
403353

404-
</details>
405-
406-
<details>
407-
<summary><b>Icon</b> attributes</summary>
408-
<br>
354+
#### Icon attributes
409355

410356
&nbsp; | Attribute | Related method(s) | Default value
411357
----------------------------------------------- | ----------------- | --------------------------------------------------------- | -------------
@@ -415,11 +361,7 @@ A contained button has a text label, a filled container and an optional icon.
415361
**Gravity** (position relative to text label) | `app:iconGravity` | `setIconGravity`<br/>`getIconGravity` | `start`
416362
**Padding** (space between icon and text label) | `app:iconPadding` | `setIconPadding`<br/>`getIconPadding` | `4dp`
417363

418-
</details>
419-
420-
<details>
421-
<summary><b>Styles</b></summary>
422-
<br>
364+
#### Styles
423365

424366
&nbsp; | Style
425367
------------------------- | -------------------------------------------------------
@@ -435,8 +377,6 @@ See the full list of
435377
and
436378
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml).
437379

438-
</details>
439-
440380
## Toggle button
441381

442382
[Toggle buttons](https://material.io/components/buttons/#toggle-button) can be
@@ -509,9 +449,7 @@ toggleButton.addOnButtonCheckedListener { toggleButton, checkedId, isChecked ->
509449
}
510450
```
511451

512-
<details>
513-
<summary><b>Implementing an icon-only toggle button</b></summary>
514-
<br>
452+
#### Implementing an icon-only toggle button
515453

516454
The following example shows a toggle button with three buttons that have icons.
517455

@@ -555,8 +493,6 @@ In the layout:
555493
</com.google.android.material.button.MaterialButtonToggleGroup>
556494
```
557495

558-
</details>
559-
560496
### Anatomy and key properties
561497

562498
A toggle button has a shared stroked container, icons and/or text labels.
@@ -566,20 +502,14 @@ A toggle button has a shared stroked container, icons and/or text labels.
566502
1. Container
567503
2. Icon
568504

569-
<details>
570-
<summary><b>Selection</b> attributes</summary>
571-
<br>
505+
#### Selection attributes
572506

573507
&nbsp; | Attribute | Related method(s) | Default value
574508
---------------------- | ----------------------- | ------------------------------------------------ | -------------
575509
**Single selection** | `app:singleSelection` | `setSingleSelection`<br/>`isSingleSelection` | `false`
576510
**Selection required** | `app:selectionRequired` | `setSelectionRequired`<br/>`isSelectionRequired` | `false`
577511

578-
</details>
579-
580-
<details>
581-
<summary><b>Styles</b></summary>
582-
<br>
512+
#### Styles
583513

584514
&nbsp; | Style
585515
----------------- | -----------------------------------------------------
@@ -592,8 +522,6 @@ See the full list of
592522
and
593523
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml).
594524

595-
</details>
596-
597525
### Icon
598526

599527
Icons can be used as toggle buttons when they allow selection, or deselection,
@@ -673,18 +601,16 @@ Material Theming.
673601
!["Button theming with three buttons - text, outlined and contained - with pink
674602
color theming and cut corners."](assets/buttons/button-theming.svg)
675603

676-
<details>
677-
<summary><b>Implementing button theming</b></summary>
678-
<br>
604+
#### Implementing button theming
679605

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

683609
```xml
684610
<style name="Theme.App" parent="Theme.MaterialComponents.*">
685611
...
686-
<item name="colorPrimary">#FEDBD0</item>
687-
<item name="colorOnPrimary">#442C2E</item>
612+
<item name="colorPrimary">@color/shrine_pink_100</item>
613+
<item name="colorOnPrimary">@color/shrine_pink_900</item>
688614
<item name="textAppearanceButton">@style/TextAppearance.App.Button</item>
689615
<item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
690616
</style>
@@ -717,7 +643,7 @@ buttons but does not affect other components):
717643
<item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
718644
</style>
719645

720-
<style name="Widget.App.Button.OutlinedButton" parent="Widget.MaterialComponents.OutlinedButton">
646+
<style name="Widget.App.Button.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
721647
<item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
722648
<item name="android:textAppearance">@style/TextAppearance.App.Button</item>
723649
<item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
@@ -730,12 +656,12 @@ buttons but does not affect other components):
730656
</style>
731657

732658
<style name="ThemeOverlay.App.Button.TextButton" parent="">
733-
<item name="colorPrimary">#84565E</item>
659+
<item name="colorPrimary">@color/shrine_pink_900</item>
734660
</style>
735661

736662
<style name="ThemeOverlay.App.Button" parent="">
737-
<item name="colorPrimary">#FEDBD0</item>
738-
<item name="colorOnPrimary">#442C2E</item>
663+
<item name="colorPrimary">@color/shrine_pink_100</item>
664+
<item name="colorOnPrimary">@color/shrine_pink_900</item>
739665
</style>
740666
```
741667

@@ -747,5 +673,3 @@ or using one of the styles in the layout (affects only this button):
747673
style="@style/Widget.App.Button"
748674
/>
749675
```
750-
751-
</details>

0 commit comments

Comments
 (0)