Skip to content

Commit

Permalink
[Button] Updated M3 button style to add filled tonal icon button styl…
Browse files Browse the repository at this point in the history 
…e. Updated catalog to showcase the same.

PiperOrigin-RevId: 447784383
  • Loading branch information
@raajkumars @leticiarossi
raajkumars authored and leticiarossi committed May 10, 2022
1 parent d3ab6d7 commit 14578ed
Show file tree
Hide file tree
Showing 9 changed files with 55 additions and 4 deletions.
19 changes: 19 additions & 0 deletions catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml
View file
Expand Up @@ -177,6 +177,25 @@
android:text="@string/cat_icon_btn_filled_style"
android:textSize="12sp"/>
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<Button
style="?attr/materialIconButtonFilledTonalStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/cat_button_icon_btn_text"
app:icon="@drawable/ic_dialogs_24px"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:text="@string/cat_icon_btn_filled_tonal_style"
android:textSize="12sp"/>
</LinearLayout>
</LinearLayout>

<com.google.android.material.switchmaterial.SwitchMaterial
Expand Down
1 change: 1 addition & 0 deletions catalog/java/io/material/catalog/button/res/values/strings.xml
View file
Expand Up @@ -39,6 +39,7 @@
<string name="cat_outlined_icon_btn_text">Icon only buttons</string>
<string name="cat_icon_btn_default_style">Standard</string>
<string name="cat_icon_btn_filled_style">Filled</string>
<string name="cat_icon_btn_filled_tonal_style">Tonal</string>
<string name="cat_button_clicked">Button clicked</string>
<string name="cat_snackbar_action_button_text">Done</string>

Expand Down
26 changes: 22 additions & 4 deletions docs/components/Button.md
View file
Expand Up @@ -889,12 +889,30 @@ In the layout:
/>
```

#### Filled Tonal Icon button

The following example shows a tonal icon button.

!["Filled tonal icon button example for Android over a white background."](assets/buttons/filled-tonal-icon-button.png)

In the layout:

```xml
<Button
style="?attr/materialIconButtonFilledTonalStyle"
android:id="@+id/iconButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
```

#### Styles & Theme attributes

Element | Style | Theme Attribute
---------------------- | ------------------------------------------- | ---------------
**Default style** | `Widget.Material3.Button.IconButton` | `?attr/materialIconButtonStyle`
**Filled Icon Button** | `Widget.Material3.Button.IconButton.Filled` | `?attr/materialIconButtonFilledStyle`
Element | Style | Theme Attribute
---------------------------- | ------------------------------------------------- | ---------------
**Default style** | `Widget.Material3.Button.IconButton` | `?attr/materialIconButtonStyle`
**Filled Icon Button** | `Widget.Material3.Button.IconButton.Filled` | `?attr/materialIconButtonFilledStyle`
**Filled Tonal Icon Button** | `Widget.Material3.Button.IconButton.Filled.Tonal` | `?attr/materialIconButtonFilledTonalStyle`

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)
Expand Down
Binary file added docs/components/assets/buttons/filled-tonal-icon-button.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/button/res-public/values/public.xml
View file
Expand Up @@ -28,6 +28,7 @@
<public name="materialButtonStyle" type="attr"/>
<public name="materialIconButtonStyle" type="attr"/>
<public name="materialIconButtonFilledStyle" type="attr"/>
<public name="materialIconButtonFilledTonalStyle" type="attr"/>
<public name="materialButtonOutlinedStyle" type="attr"/>
<public name="materialButtonToggleGroupStyle" type="attr"/>
<public name="Widget.MaterialComponents.Button" type="style"/>
Expand All @@ -53,6 +54,7 @@
<public name="Widget.Material3.Button.ElevatedButton.Icon" type="style"/>
<public name="Widget.Material3.Button.IconButton" type="style"/>
<public name="Widget.Material3.Button.IconButton.Filled" type="style"/>
<public name="Widget.Material3.Button.IconButton.Filled.Tonal" type="style"/>
<public name="ShapeAppearanceOverlay.Material3.Button" type="style"/>
<public name="ThemeOverlay.Material3.Button" type="style"/>
<public name="ThemeOverlay.Material3.Button.ElevatedButton" type="style"/>
Expand Down
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/button/res/values/attrs.xml
View file
Expand Up @@ -23,6 +23,8 @@
<attr name="materialIconButtonStyle" format="reference"/>
<!-- Style to use for Filled Material Icon Only Buttons in this theme. -->
<attr name="materialIconButtonFilledStyle" format="reference"/>
<!-- Style to use for Filled Tonal Material Icon Only Buttons in this theme. -->
<attr name="materialIconButtonFilledTonalStyle" format="reference"/>
<!-- Style to use for Material Outlined Buttons in this theme. -->
<attr name="materialButtonOutlinedStyle" format="reference"/>
<!-- Style to use for MaterialButtonToggleGroups in this theme. -->
Expand Down
5 changes: 5 additions & 0 deletions lib/java/com/google/android/material/button/res/values/styles.xml
View file
Expand Up @@ -280,6 +280,11 @@
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button</item>
</style>

<style name="Widget.Material3.Button.IconButton.Filled.Tonal">
<item name="rippleColor">@color/m3_tonal_button_ripple_color_selector</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TonalButton</item>
</style>

<!-- DEPRECATED -->
<style name="ShapeAppearanceOverlay.Material3.Button" parent="">
<item name="cornerSize">50%</item>
Expand Down
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/dialog/res/values/themes_base.xml
View file
Expand Up @@ -106,6 +106,7 @@
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
<item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
<item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
<item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
<item name="materialButtonStyle">@style/Widget.Material3.Button</item>
<item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
Expand Down Expand Up @@ -332,6 +333,7 @@
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
<item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
<item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
<item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
<item name="materialButtonStyle">@style/Widget.Material3.Button</item>
<item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
Expand Down
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/theme/res/values/themes_base.xml
View file
Expand Up @@ -120,6 +120,7 @@
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
<item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
<item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
<item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
<item name="materialButtonStyle">@style/Widget.Material3.Button</item>
<item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
Expand Down Expand Up @@ -348,6 +349,7 @@
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
<item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
<item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
<item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
<item name="materialButtonStyle">@style/Widget.Material3.Button</item>
<item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
Expand Down

0 comments on commit 14578ed

Please sign in to comment.