[Button] Updated M3 button style to add outlined icon button style. U…

…pdated catalog to showcase the same. PiperOrigin-RevId: 448118229
material-components · May 12, 2022 · 467a2c9 · 467a2c9
1 parent 91a2550
commit 467a2c9
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 0 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
@@ -196,6 +196,25 @@
               android:text="@string/cat_icon_btn_filled_tonal_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/materialIconButtonOutlinedStyle"
+              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_outlined_style"
+              android:textSize="12sp"/>
+        </LinearLayout>
       </LinearLayout>
 
       <com.google.android.material.switchmaterial.SwitchMaterial

diff --git a/catalog/java/io/material/catalog/button/res/values/strings.xml b/catalog/java/io/material/catalog/button/res/values/strings.xml
@@ -40,6 +40,7 @@
   <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_icon_btn_outlined_style">Outlined</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
@@ -906,13 +906,31 @@ In the layout:
 />
 ```
 
+#### Outlined Icon button
+
+The following example shows an outlined icon button.
+
+!["Outlined icon button example for Android over a white background."](assets/buttons/outlined-icon-button.png)
+
+In the layout:
+
+```xml
+<Button
+    style="?attr/materialIconButtonOutlinedStyle"
+    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`
 **Filled Tonal Icon Button** | `Widget.Material3.Button.IconButton.Filled.Tonal` | `?attr/materialIconButtonFilledTonalStyle`
+**Outlined Icon Button**     | `Widget.Material3.Button.IconButton.Outlined`     | `?attr/materialIconButtonOutlinedStyle`
 
 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/outlined-icon-button.png b/docs/components/assets/buttons/outlined-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
@@ -29,6 +29,7 @@
   <public name="materialIconButtonStyle" type="attr"/>
   <public name="materialIconButtonFilledStyle" type="attr"/>
   <public name="materialIconButtonFilledTonalStyle" type="attr"/>
+  <public name="materialIconButtonOutlinedStyle" type="attr"/>
   <public name="materialButtonOutlinedStyle" type="attr"/>
   <public name="materialButtonToggleGroupStyle" type="attr"/>
   <public name="Widget.MaterialComponents.Button" type="style"/>
@@ -55,6 +56,7 @@
   <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="Widget.Material3.Button.IconButton.Outlined" 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
@@ -25,6 +25,8 @@
   <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 Outlined Material Icon Only Buttons in this theme. -->
+  <attr name="materialIconButtonOutlinedStyle" 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
@@ -285,6 +285,11 @@
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TonalButton</item>
   </style>
 
+  <style name="Widget.Material3.Button.IconButton.Outlined">
+    <item name="strokeColor">@color/m3_button_outline_color_selector</item>
+    <item name="strokeWidth">@dimen/m3_btn_stroke_size</item>
+  </style>
+
   <!-- DEPRECATED -->
   <style name="ShapeAppearanceOverlay.Material3.Button" parent="">
     <item name="cornerSize">50%</item>

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
@@ -107,6 +107,7 @@
     <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="materialIconButtonOutlinedStyle">@style/Widget.Material3.Button.IconButton.Outlined</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -334,6 +335,7 @@
     <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="materialIconButtonOutlinedStyle">@style/Widget.Material3.Button.IconButton.Outlined</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
@@ -121,6 +121,7 @@
     <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="materialIconButtonOutlinedStyle">@style/Widget.Material3.Button.IconButton.Outlined</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -350,6 +351,7 @@
     <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="materialIconButtonOutlinedStyle">@style/Widget.Material3.Button.IconButton.Outlined</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>