[Button] Updated M3 button style to add filled icon button style. Upd…

…ated catalog to showcase the same. PiperOrigin-RevId: 447523530
material-components · May 9, 2022 · 25606cf · 25606cf
1 parent dfd8dba
commit 25606cf
Show file tree

Hide file tree

Showing 11 changed files with 137 additions and 11 deletions.
diff --git a/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml b/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml
@@ -132,12 +132,52 @@
           android:text="@string/cat_outlined_icon_btn_text"
           android:textSize="16sp"/>
 
-      <Button
-          style="@style/Widget.Material3.Button.IconButton"
-          android:layout_width="wrap_content"
+      <LinearLayout
+          android:layout_width="match_parent"
           android:layout_height="wrap_content"
-          android:contentDescription="@string/cat_button_icon_btn_text"
-          app:icon="@drawable/ic_dialogs_24px"/>
+          android:paddingTop="8dp"
+          android:paddingBottom="8dp"
+          android:gravity="center_horizontal"
+          android:orientation="horizontal">
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:gravity="center_horizontal"
+            android:orientation="vertical">
+          <Button
+              style="?attr/materialIconButtonStyle"
+              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_default_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/materialIconButtonFilledStyle"
+              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_style"
+              android:textSize="12sp"/>
+        </LinearLayout>
+      </LinearLayout>
 
       <com.google.android.material.switchmaterial.SwitchMaterial
           android:id="@+id/cat_button_enabled_switch"

diff --git a/catalog/java/io/material/catalog/button/res/values/strings.xml b/catalog/java/io/material/catalog/button/res/values/strings.xml
@@ -37,6 +37,8 @@
   <string name="cat_filled_buttons_section_title">Filled buttons</string>
   <string name="cat_outlined_btn_text">Outlined buttons</string>
   <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_button_clicked">Button clicked</string>
   <string name="cat_snackbar_action_button_text">Done</string>
 

diff --git a/docs/components/Button.md b/docs/components/Button.md
@@ -820,7 +820,15 @@ icon.setOnCheckedChangeListener { checkBox, isChecked ->
 ## Icon button
 
 [Icon buttons](https://material.io/components/buttons/#icon-buttons) help users
-take supplementary actions with a single tap.
+take supplementary actions with a single tap. There are two types of icon
+buttons: standard and contained.
+
+*   **Standard icon button:** By default icon buttons will not have a container.
+*   **Contained icon button:** Optionally, it is possible to have a container
+    around the icon.
+
+See [Icon button examples](#icon-button-examples) section below for more
+information.
 
 ### Usage
 
@@ -839,6 +847,8 @@ API and source code:
     *   [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)
 
+#### Standard Icon button
+
 The following example shows a standard icon button.
 
 !["Standard icon button example for Android over a white background."](assets/buttons/icon-button-standard.png)
@@ -862,13 +872,29 @@ iconButton.addOnButtonCheckedListener { iconButton, checkedId, isChecked ->
 }
 ```
 
-#### Styles & Theme attributes
+#### Filled Icon button
 
-Element           | Style
------------------ | ------------------------------------
-**Default style** | `Widget.Material3.Button.IconButton`
+The following example shows a contained icon button that is filled.
+
+!["Filled icon button example for Android over a white background."](assets/buttons/filled-icon-button.png)
+
+In the layout:
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledStyle"
+    android:id="@+id/iconButton"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+/>
+```
+
+#### Styles & Theme attributes
 
-Default style theme attribute: `?attr/materialIconButtonStyle`
+Element                | Style                                       | Theme Attribute
+---------------------- | ------------------------------------------- | ---------------
+**Default style**      | `Widget.Material3.Button.IconButton`        | `?attr/materialIconButtonStyle`
+**Filled Icon Button** | `Widget.Material3.Button.IconButton.Filled` | `?attr/materialIconButtonFilledStyle`
 
 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)

diff --git a/docs/components/assets/buttons/filled-icon-button.png b/docs/components/assets/buttons/filled-icon-button.png
diff --git a/lib/java/com/google/android/material/button/res-public/values/public.xml b/lib/java/com/google/android/material/button/res-public/values/public.xml
@@ -27,6 +27,7 @@
   <public name="iconTintMode" type="attr"/>
   <public name="materialButtonStyle" type="attr"/>
   <public name="materialIconButtonStyle" type="attr"/>
+  <public name="materialIconButtonFilledStyle" type="attr"/>
   <public name="materialButtonOutlinedStyle" type="attr"/>
   <public name="materialButtonToggleGroupStyle" type="attr"/>
   <public name="Widget.MaterialComponents.Button" type="style"/>
@@ -51,6 +52,7 @@
   <public name="Widget.Material3.Button.ElevatedButton" type="style"/>
   <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="ShapeAppearanceOverlay.Material3.Button" type="style"/>
   <public name="ThemeOverlay.Material3.Button" type="style"/>
   <public name="ThemeOverlay.Material3.Button.ElevatedButton" type="style"/>

diff --git a/lib/java/com/google/android/material/button/res/values/attrs.xml b/lib/java/com/google/android/material/button/res/values/attrs.xml
@@ -21,6 +21,8 @@
   <attr name="materialButtonStyle" format="reference"/>
   <!-- Style to use for Material Icon Only Buttons in this theme. -->
   <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 Material Outlined Buttons in this theme. -->
   <attr name="materialButtonOutlinedStyle" format="reference"/>
   <!-- Style to use for MaterialButtonToggleGroups in this theme. -->

diff --git a/lib/java/com/google/android/material/button/res/values/styles.xml b/lib/java/com/google/android/material/button/res/values/styles.xml
@@ -274,6 +274,12 @@
     <item name="iconPadding">@dimen/m3_btn_icon_only_icon_padding</item>
   </style>
 
+  <style name="Widget.Material3.Button.IconButton.Filled">
+    <item name="backgroundTint">@color/m3_filled_icon_button_container_color_selector</item>
+    <item name="iconTint">@color/m3_filled_icon_button_icon_color_selector</item>
+    <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button</item>
+  </style>
+
   <!-- DEPRECATED -->
   <style name="ShapeAppearanceOverlay.Material3.Button" parent="">
     <item name="cornerSize">50%</item>

diff --git a/...oogle/android/material/color/res/color/m3_filled_icon_button_container_color_selector.xml b/...oogle/android/material/color/res/color/m3_filled_icon_button_container_color_selector.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <!-- Disabled state -->
+  <item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled_background" android:state_enabled="false"/>
+  <!-- Default, Enabled state -->
+  <item android:color="?attr/colorContainer"/>
+</selector>
diff --git a/...com/google/android/material/color/res/color/m3_filled_icon_button_icon_color_selector.xml b/...com/google/android/material/color/res/color/m3_filled_icon_button_icon_color_selector.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2022 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <!-- Disabled state -->
+  <item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled" android:state_enabled="false"/>
+  <!-- Default, Enabled state -->
+  <item android:color="?attr/colorOnContainer"/>
+</selector>
diff --git a/lib/java/com/google/android/material/dialog/res/values/themes_base.xml b/lib/java/com/google/android/material/dialog/res/values/themes_base.xml
@@ -105,6 +105,7 @@
     <item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
     <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="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -330,6 +331,7 @@
     <item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
     <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="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>

diff --git a/lib/java/com/google/android/material/theme/res/values/themes_base.xml b/lib/java/com/google/android/material/theme/res/values/themes_base.xml
@@ -119,6 +119,7 @@
     <item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
     <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="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -346,6 +347,7 @@
     <item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
     <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="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>