Skip to content

Commit 25606cf

Browse files
raajkumarsleticiarossi
raajkumars
authored and
leticiarossi
committed
[Button] Updated M3 button style to add filled icon button style. Updated catalog to showcase the same.
PiperOrigin-RevId: 447523530
1 parent dfd8dba commit 25606cf

File tree

11 files changed

+137
-11
lines changed

11 files changed

+137
-11
lines changed

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

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,12 +132,52 @@
132132
android:text="@string/cat_outlined_icon_btn_text"
133133
android:textSize="16sp"/>
134134

135-
<Button
136-
style="@style/Widget.Material3.Button.IconButton"
137-
android:layout_width="wrap_content"
135+
<LinearLayout
136+
android:layout_width="match_parent"
138137
android:layout_height="wrap_content"
139-
android:contentDescription="@string/cat_button_icon_btn_text"
140-
app:icon="@drawable/ic_dialogs_24px"/>
138+
android:paddingTop="8dp"
139+
android:paddingBottom="8dp"
140+
android:gravity="center_horizontal"
141+
android:orientation="horizontal">
142+
143+
<LinearLayout
144+
android:layout_width="wrap_content"
145+
android:layout_height="wrap_content"
146+
android:gravity="center_horizontal"
147+
android:orientation="vertical">
148+
<Button
149+
style="?attr/materialIconButtonStyle"
150+
android:layout_width="wrap_content"
151+
android:layout_height="wrap_content"
152+
android:contentDescription="@string/cat_button_icon_btn_text"
153+
app:icon="@drawable/ic_dialogs_24px"/>
154+
<TextView
155+
android:layout_width="wrap_content"
156+
android:layout_height="wrap_content"
157+
android:paddingTop="4dp"
158+
android:text="@string/cat_icon_btn_default_style"
159+
android:textSize="12sp"/>
160+
</LinearLayout>
161+
162+
<LinearLayout
163+
android:layout_width="wrap_content"
164+
android:layout_height="wrap_content"
165+
android:gravity="center_horizontal"
166+
android:orientation="vertical">
167+
<Button
168+
style="?attr/materialIconButtonFilledStyle"
169+
android:layout_width="wrap_content"
170+
android:layout_height="wrap_content"
171+
android:contentDescription="@string/cat_button_icon_btn_text"
172+
app:icon="@drawable/ic_dialogs_24px"/>
173+
<TextView
174+
android:layout_width="wrap_content"
175+
android:layout_height="wrap_content"
176+
android:paddingTop="4dp"
177+
android:text="@string/cat_icon_btn_filled_style"
178+
android:textSize="12sp"/>
179+
</LinearLayout>
180+
</LinearLayout>
141181

142182
<com.google.android.material.switchmaterial.SwitchMaterial
143183
android:id="@+id/cat_button_enabled_switch"

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
<string name="cat_filled_buttons_section_title">Filled buttons</string>
3838
<string name="cat_outlined_btn_text">Outlined buttons</string>
3939
<string name="cat_outlined_icon_btn_text">Icon only buttons</string>
40+
<string name="cat_icon_btn_default_style">Standard</string>
41+
<string name="cat_icon_btn_filled_style">Filled</string>
4042
<string name="cat_button_clicked">Button clicked</string>
4143
<string name="cat_snackbar_action_button_text">Done</string>
4244

‎docs/components/Button.md‎

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -820,7 +820,15 @@ icon.setOnCheckedChangeListener { checkBox, isChecked ->
820820
## Icon button
821821

822822
[Icon buttons](https://material.io/components/buttons/#icon-buttons) help users
823-
take supplementary actions with a single tap.
823+
take supplementary actions with a single tap. There are two types of icon
824+
buttons: standard and contained.
825+
826+
* **Standard icon button:** By default icon buttons will not have a container.
827+
* **Contained icon button:** Optionally, it is possible to have a container
828+
around the icon.
829+
830+
See [Icon button examples](#icon-button-examples) section below for more
831+
information.
824832

825833
### Usage
826834

@@ -839,6 +847,8 @@ API and source code:
839847
* [Class description](https://developer.android.com/reference/com/google/android/material/button/MaterialButton)
840848
* [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/MaterialButton.java)
841849

850+
#### Standard Icon button
851+
842852
The following example shows a standard icon button.
843853

844854
!["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 ->
862872
}
863873
```
864874

865-
#### Styles & Theme attributes
875+
#### Filled Icon button
866876

867-
Element | Style
868-
----------------- | ------------------------------------
869-
**Default style** | `Widget.Material3.Button.IconButton`
877+
The following example shows a contained icon button that is filled.
878+
879+
!["Filled icon button example for Android over a white background."](assets/buttons/filled-icon-button.png)
880+
881+
In the layout:
882+
883+
```xml
884+
<Button
885+
style="?attr/materialIconButtonFilledStyle"
886+
android:id="@+id/iconButton"
887+
android:layout_width="wrap_content"
888+
android:layout_height="wrap_content"
889+
/>
890+
```
891+
892+
#### Styles & Theme attributes
870893

871-
Default style theme attribute: `?attr/materialIconButtonStyle`
894+
Element | Style | Theme Attribute
895+
---------------------- | ------------------------------------------- | ---------------
896+
**Default style** | `Widget.Material3.Button.IconButton` | `?attr/materialIconButtonStyle`
897+
**Filled Icon Button** | `Widget.Material3.Button.IconButton.Filled` | `?attr/materialIconButtonFilledStyle`
872898

873899
See the full list of
874900
[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-icon-button.png‎

4.17 KB
Loading

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<public name="iconTintMode" type="attr"/>
2828
<public name="materialButtonStyle" type="attr"/>
2929
<public name="materialIconButtonStyle" type="attr"/>
30+
<public name="materialIconButtonFilledStyle" type="attr"/>
3031
<public name="materialButtonOutlinedStyle" type="attr"/>
3132
<public name="materialButtonToggleGroupStyle" type="attr"/>
3233
<public name="Widget.MaterialComponents.Button" type="style"/>
@@ -51,6 +52,7 @@
5152
<public name="Widget.Material3.Button.ElevatedButton" type="style"/>
5253
<public name="Widget.Material3.Button.ElevatedButton.Icon" type="style"/>
5354
<public name="Widget.Material3.Button.IconButton" type="style"/>
55+
<public name="Widget.Material3.Button.IconButton.Filled" type="style"/>
5456
<public name="ShapeAppearanceOverlay.Material3.Button" type="style"/>
5557
<public name="ThemeOverlay.Material3.Button" type="style"/>
5658
<public name="ThemeOverlay.Material3.Button.ElevatedButton" type="style"/>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
<attr name="materialButtonStyle" format="reference"/>
2222
<!-- Style to use for Material Icon Only Buttons in this theme. -->
2323
<attr name="materialIconButtonStyle" format="reference"/>
24+
<!-- Style to use for Filled Material Icon Only Buttons in this theme. -->
25+
<attr name="materialIconButtonFilledStyle" format="reference"/>
2426
<!-- Style to use for Material Outlined Buttons in this theme. -->
2527
<attr name="materialButtonOutlinedStyle" format="reference"/>
2628
<!-- Style to use for MaterialButtonToggleGroups in this theme. -->

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,12 @@
274274
<item name="iconPadding">@dimen/m3_btn_icon_only_icon_padding</item>
275275
</style>
276276

277+
<style name="Widget.Material3.Button.IconButton.Filled">
278+
<item name="backgroundTint">@color/m3_filled_icon_button_container_color_selector</item>
279+
<item name="iconTint">@color/m3_filled_icon_button_icon_color_selector</item>
280+
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button</item>
281+
</style>
282+
277283
<!-- DEPRECATED -->
278284
<style name="ShapeAppearanceOverlay.Material3.Button" parent="">
279285
<item name="cornerSize">50%</item>

‎lib/java/com/google/android/material/color/res/color/m3_filled_icon_button_container_color_selector.xml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 2022 The Android Open Source Project
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled_background" android:state_enabled="false"/>
20+
<!-- Default, Enabled state -->
21+
<item android:color="?attr/colorContainer"/>
22+
</selector>

‎lib/java/com/google/android/material/color/res/color/m3_filled_icon_button_icon_color_selector.xml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
~ Copyright (C) 2022 The Android Open Source Project
4+
~
5+
~ Licensed under the Apache License, Version 2.0 (the "License");
6+
~ you may not use this file except in compliance with the License.
7+
~ You may obtain a copy of the License at
8+
~
9+
~ http://www.apache.org/licenses/LICENSE-2.0
10+
~
11+
~ Unless required by applicable law or agreed to in writing, software
12+
~ distributed under the License is distributed on an "AS IS" BASIS,
13+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
~ See the License for the specific language governing permissions and
15+
~ limitations under the License.
16+
-->
17+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
18+
<!-- Disabled state -->
19+
<item android:color="?attr/colorOnSurface" android:alpha="@dimen/material_emphasis_disabled" android:state_enabled="false"/>
20+
<!-- Default, Enabled state -->
21+
<item android:color="?attr/colorOnContainer"/>
22+
</selector>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@
105105
<item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
106106
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
107107
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
108+
<item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
108109
<item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
109110
<item name="materialButtonStyle">@style/Widget.Material3.Button</item>
110111
<item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -330,6 +331,7 @@
330331
<item name="floatingActionButtonLargeSurfaceStyle">@style/Widget.Material3.FloatingActionButton.Large.Surface</item>
331332
<item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
332333
<item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
334+
<item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
333335
<item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
334336
<item name="materialButtonStyle">@style/Widget.Material3.Button</item>
335337
<item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>

0 commit comments

Comments
 (0)