[Button] Updated M3 button style to add filled tonal icon button style. Updated catalog to showcase the same.

PiperOrigin-RevId: 447784383

Author: raajkumars

catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml

@@ -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

catalog/java/io/material/catalog/button/res/values/strings.xml

@@ -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>
 

docs/components/Button.md

@@ -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)

docs/components/assets/buttons/filled-tonal-icon-button.png

@@ -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"/>
@@ -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"/>

lib/java/com/google/android/material/button/res-public/values/public.xml

@@ -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. -->

lib/java/com/google/android/material/button/res/values/attrs.xml

@@ -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>

lib/java/com/google/android/material/button/res/values/styles.xml

@@ -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>
@@ -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>

lib/java/com/google/android/material/dialog/res/values/themes_base.xml

@@ -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>
@@ -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>