Skip to content

Commit 2aadbd1

Browse files
kendrickumstattdleticiarossi
kendrickumstattd
authored and
leticiarossi
committed
[Button][Split Button] Update split button styles to lessen maker specification requirements and support consistency.
PiperOrigin-RevId: 752444738
1 parent 0c1a914 commit 2aadbd1

File tree

7 files changed

+68
-104
lines changed

7 files changed

+68
-104
lines changed

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

Lines changed: 16 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -39,80 +39,54 @@
3939
android:layout_width="wrap_content"
4040
android:layout_height="wrap_content">
4141
<Button
42+
style="?attr/materialSplitButtonLeadingFilledStyle"
4243
android:layout_width="wrap_content"
4344
android:layout_height="wrap_content"
44-
android:paddingTop="6dp"
45-
android:paddingBottom="6dp"
46-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
47-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
48-
android:minWidth="@dimen/mtrl_min_touch_target_size"
4945
android:contentDescription="@string/cat_split_button_label_edit"
5046
app:icon="@drawable/ic_edit_vd_theme_24dp"
51-
app:iconSize="20dp"
5247
app:iconPadding="0dp"/>
5348
<Button
5449
style="?attr/materialSplitButtonIconFilledStyle"
5550
android:id="@+id/expand_more_or_less_filled_icon"
5651
android:layout_width="wrap_content"
5752
android:layout_height="wrap_content"
58-
android:paddingStart="14dp"
59-
android:paddingEnd="14dp"
60-
android:minWidth="@dimen/mtrl_min_touch_target_size"
6153
android:contentDescription="@string/cat_split_button_label_chevron"
62-
app:icon="@drawable/m3_split_button_chevron_avd"
63-
app:opticalCenterEnabled="true"/>
54+
app:icon="@drawable/m3_split_button_chevron_avd"/>
6455
</com.google.android.material.button.MaterialSplitButton>
6556

6657
<com.google.android.material.button.MaterialSplitButton
6758
android:layout_width="wrap_content"
6859
android:layout_height="wrap_content">
6960
<com.google.android.material.button.MaterialButton
61+
style="?attr/materialSplitButtonLeadingFilledStyle"
7062
android:layout_width="wrap_content"
7163
android:layout_height="wrap_content"
72-
android:paddingTop="6dp"
73-
android:paddingBottom="6dp"
74-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
75-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
76-
android:minWidth="@dimen/mtrl_min_touch_target_size"
7764
android:text="@string/cat_split_button_short_label"/>
7865
<Button
7966
style="?attr/materialSplitButtonIconFilledStyle"
8067
android:id="@+id/expand_more_or_less_filled_label"
8168
android:layout_width="wrap_content"
8269
android:layout_height="wrap_content"
83-
android:paddingStart="14dp"
84-
android:paddingEnd="14dp"
85-
android:minWidth="@dimen/mtrl_min_touch_target_size"
8670
android:contentDescription="@string/cat_split_button_label_chevron"
87-
app:icon="@drawable/m3_split_button_chevron_avd"
88-
app:opticalCenterEnabled="true"/>
71+
app:icon="@drawable/m3_split_button_chevron_avd"/>
8972
</com.google.android.material.button.MaterialSplitButton>
9073

9174
<com.google.android.material.button.MaterialSplitButton
9275
android:layout_width="wrap_content"
9376
android:layout_height="wrap_content">
9477
<Button
78+
style="?attr/materialSplitButtonLeadingFilledStyle"
9579
android:layout_width="wrap_content"
9680
android:layout_height="wrap_content"
97-
android:paddingTop="6dp"
98-
android:paddingBottom="6dp"
99-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
100-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
101-
android:minWidth="@dimen/mtrl_min_touch_target_size"
10281
android:text="@string/cat_split_button_label"
103-
app:icon="@drawable/ic_edit_vd_theme_24dp"
104-
app:iconSize="20dp"/>
82+
app:icon="@drawable/ic_edit_vd_theme_24dp"/>
10583
<Button
10684
style="?attr/materialSplitButtonIconFilledStyle"
10785
android:id="@+id/expand_more_or_less_filled"
10886
android:layout_width="wrap_content"
10987
android:layout_height="wrap_content"
110-
android:paddingStart="14dp"
111-
android:paddingEnd="14dp"
112-
android:minWidth="@dimen/mtrl_min_touch_target_size"
11388
android:contentDescription="@string/cat_split_button_label_chevron"
114-
app:icon="@drawable/m3_split_button_chevron_avd"
115-
app:opticalCenterEnabled="true"/>
89+
app:icon="@drawable/m3_split_button_chevron_avd"/>
11690
</com.google.android.material.button.MaterialSplitButton>
11791

11892
<TextView
@@ -127,83 +101,54 @@
127101
android:layout_width="wrap_content"
128102
android:layout_height="wrap_content">
129103
<Button
130-
style="?attr/materialButtonTonalStyle"
104+
style="?attr/materialSplitButtonLeadingFilledTonalStyle"
131105
android:layout_width="wrap_content"
132106
android:layout_height="wrap_content"
133-
android:paddingTop="6dp"
134-
android:paddingBottom="6dp"
135-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
136-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
137-
android:minWidth="@dimen/mtrl_min_touch_target_size"
138107
android:contentDescription="@string/cat_split_button_label_edit"
139108
app:icon="@drawable/ic_edit_vd_theme_24dp"
140-
app:iconSize="20dp"
141109
app:iconPadding="0dp"/>
142110
<Button
143111
style="?attr/materialSplitButtonIconFilledTonalStyle"
144112
android:id="@+id/expand_more_or_less_tonal_icon"
145113
android:layout_width="wrap_content"
146114
android:layout_height="wrap_content"
147-
android:paddingStart="14dp"
148-
android:paddingEnd="14dp"
149115
android:contentDescription="@string/cat_split_button_label_chevron"
150-
app:icon="@drawable/m3_split_button_chevron_avd"
151-
android:minWidth="@dimen/mtrl_min_touch_target_size"
152-
app:opticalCenterEnabled="true"/>
116+
app:icon="@drawable/m3_split_button_chevron_avd"/>
153117
</com.google.android.material.button.MaterialSplitButton>
154118

155119
<com.google.android.material.button.MaterialSplitButton
156120
android:layout_width="wrap_content"
157121
android:layout_height="wrap_content">
158122
<Button
159-
style="?attr/materialButtonTonalStyle"
123+
style="?attr/materialSplitButtonLeadingFilledTonalStyle"
160124
android:layout_width="wrap_content"
161125
android:layout_height="wrap_content"
162-
android:paddingTop="6dp"
163-
android:paddingBottom="6dp"
164-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
165-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
166-
android:minWidth="@dimen/mtrl_min_touch_target_size"
167126
android:text="@string/cat_split_button_short_label"/>
168127
<Button
169128
style="?attr/materialSplitButtonIconFilledTonalStyle"
170129
android:id="@+id/expand_more_or_less_tonal_label"
171130
android:layout_width="wrap_content"
172131
android:layout_height="wrap_content"
173-
android:paddingStart="14dp"
174-
android:paddingEnd="14dp"
175-
android:minWidth="@dimen/mtrl_min_touch_target_size"
176132
android:contentDescription="@string/cat_split_button_label_chevron"
177-
app:icon="@drawable/m3_split_button_chevron_avd"
178-
app:opticalCenterEnabled="true"/>
133+
app:icon="@drawable/m3_split_button_chevron_avd"/>
179134
</com.google.android.material.button.MaterialSplitButton>
180135

181136
<com.google.android.material.button.MaterialSplitButton
182137
android:layout_width="wrap_content"
183138
android:layout_height="wrap_content">
184139
<Button
185-
style="?attr/materialButtonTonalStyle"
140+
style="?attr/materialSplitButtonLeadingFilledTonalStyle"
186141
android:layout_width="wrap_content"
187142
android:layout_height="wrap_content"
188-
android:paddingTop="6dp"
189-
android:paddingBottom="6dp"
190-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
191-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
192-
android:minWidth="@dimen/mtrl_min_touch_target_size"
193143
android:text="@string/cat_split_button_label"
194-
app:icon="@drawable/ic_edit_vd_theme_24dp"
195-
app:iconSize="20dp"/>
144+
app:icon="@drawable/ic_edit_vd_theme_24dp"/>
196145
<Button
197146
style="?attr/materialSplitButtonIconFilledTonalStyle"
198147
android:id="@+id/expand_more_or_less_tonal"
199148
android:layout_width="wrap_content"
200149
android:layout_height="wrap_content"
201-
android:paddingStart="14dp"
202-
android:paddingEnd="14dp"
203-
android:minWidth="@dimen/mtrl_min_touch_target_size"
204150
android:contentDescription="@string/cat_split_button_label_chevron"
205-
app:icon="@drawable/m3_split_button_chevron_avd"
206-
app:opticalCenterEnabled="true"/>
151+
app:icon="@drawable/m3_split_button_chevron_avd"/>
207152
</com.google.android.material.button.MaterialSplitButton>
208153

209154
<TextView
@@ -217,28 +162,19 @@
217162
android:layout_width="wrap_content"
218163
android:layout_height="wrap_content">
219164
<com.google.android.material.button.MaterialButton
165+
style="?attr/materialSplitButtonLeadingFilledStyle"
220166
android:layout_width="wrap_content"
221167
android:layout_height="wrap_content"
222-
android:paddingTop="6dp"
223-
android:paddingBottom="6dp"
224-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
225-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
226-
android:minWidth="@dimen/mtrl_min_touch_target_size"
227168
android:contentDescription="@string/cat_split_button_label_edit"
228169
app:icon="@drawable/ic_edit_vd_theme_24dp"
229-
app:iconSize="20dp"
230170
app:iconPadding="0dp"/>
231171
<com.google.android.material.button.MaterialButton
232172
style="?attr/materialSplitButtonIconFilledStyle"
233173
android:id="@+id/expand_more_or_less_filled_icon_popup"
234174
android:layout_width="wrap_content"
235175
android:layout_height="wrap_content"
236-
android:paddingStart="14dp"
237-
android:paddingEnd="14dp"
238-
android:minWidth="@dimen/mtrl_min_touch_target_size"
239176
android:contentDescription="@string/cat_split_button_label_chevron"
240-
app:icon="@drawable/m3_split_button_chevron_avd"
241-
app:opticalCenterEnabled="true"/>
177+
app:icon="@drawable/m3_split_button_chevron_avd"/>
242178
</com.google.android.material.button.MaterialSplitButton>
243179
<com.google.android.material.materialswitch.MaterialSwitch
244180
android:id="@+id/switch_enable"

‎docs/components/Button.md‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -907,25 +907,17 @@ In the layout:
907907
android:layout_width="wrap_content"
908908
android:layout_height="wrap_content">
909909
<Button
910+
style="?attr/materialSplitButtonLeadingFilledStyle"
910911
android:layout_width="wrap_content"
911912
android:layout_height="wrap_content"
912-
android:paddingTop="6dp"
913-
android:paddingBottom="6dp"
914-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
915-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
916-
android:minWidth="@dimen/mtrl_min_touch_target_size"
917913
android:text="@string/cat_split_button_label"
918914
app:icon="@drawable/ic_edit_vd_theme_24dp"
919-
app:iconSize="20dp"
920915
/>
921916
<Button
922917
style="?attr/materialSplitButtonIconFilledStyle"
923918
android:id="@+id/expand_more_or_less_filled"
924919
android:layout_width="wrap_content"
925920
android:layout_height="wrap_content"
926-
android:paddingStart="14dp"
927-
android:paddingEnd="14dp"
928-
android:minWidth="@dimen/mtrl_min_touch_target_size"
929921
android:contentDescription="@string/cat_split_button_label_chevron"
930922
app:icon="@drawable/m3_split_button_chevron_avd"
931923
/>
@@ -943,26 +935,18 @@ In the layout:
943935
android:layout_width="wrap_content"
944936
android:layout_height="wrap_content">
945937
<Button
938+
style="?attr/materialSplitButtonLeadingFilledStyle"
946939
android:layout_width="wrap_content"
947940
android:layout_height="wrap_content"
948-
android:paddingTop="6dp"
949-
android:paddingBottom="6dp"
950-
android:paddingStart="@dimen/m3_comp_split_button_small_leading_button_leading_space"
951-
android:paddingEnd="@dimen/m3_comp_split_button_small_leading_button_trailing_space"
952-
android:minWidth="@dimen/mtrl_min_touch_target_size"
953941
android:contentDescription="@string/cat_split_button_label_edit"
954942
app:icon="@drawable/ic_edit_vd_theme_24dp"
955-
app:iconSize="20dp"
956943
app:iconPadding="0dp"
957944
/>
958945
<Button
959946
style="?attr/materialSplitButtonIconFilledStyle"
960947
android:id="@+id/expand_more_or_less_filled_icon"
961948
android:layout_width="wrap_content"
962949
android:layout_height="wrap_content"
963-
android:paddingStart="14dp"
964-
android:paddingEnd="14dp"
965-
android:minWidth="@dimen/mtrl_min_touch_target_size"
966950
android:contentDescription="@string/cat_split_button_label_chevron"
967951
app:icon="@drawable/m3_split_button_chevron_avd"
968952
/>
@@ -985,11 +969,13 @@ Element | Attribute | Related method(s)
985969

986970
#### Styles and Theme attributes
987971

988-
Element | Style | Theme Attribute
989-
----------------------------------------- | ------------------------------------------------------------ | ---------------
990-
**Default style** | `Widget.Material3.MaterialSplitButton` | `?attr/materialSplitButtonStyle`
991-
**Trailing icon primary (filled) style** | `Widget.Material3.SplitButton.IconButton.Filled` | `?attr/materialSplitButtonIconFilledStyle`
992-
**Trailing icon secondary (tonal) style** | `Widget.Material3.SplitButton.IconButton.Filled.Tonal` | `?attr/materialSplitButtonIconFilledTonalStyle`
972+
Element | Style | Theme Attribute
973+
----------------------------------------- | --------------------------------------------------------- | ---------------
974+
**Default style** | `Widget.Material3.MaterialSplitButton` | `?attr/materialSplitButtonStyle`
975+
**Leading button primary (filled) style** | `Widget.Material3.SplitButton.LeadingButton.Filled` | `?attr/materialSplitButtonLeadingFilledStyle`
976+
**Leading button primary (tonal) style** | `Widget.Material3.SplitButton.LeadingButton.Filled.Tonal` | `?attr/materialSplitButtonLeadingFilledTonalStyle`
977+
**Trailing icon primary (filled) style** | `Widget.Material3.SplitButton.IconButton.Filled` | `?attr/materialSplitButtonIconFilledStyle`
978+
**Trailing icon secondary (tonal) style** | `Widget.Material3.SplitButton.IconButton.Filled.Tonal` | `?attr/materialSplitButtonIconFilledTonalStyle`
993979

994980
The two new trailing icon styles `materialSplitButtonIconFilledStyle` – parented
995981
by `materialIconButtonFilledStyle` – and

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636
<public name="materialIconButtonOutlinedStyle" type="attr"/>
3737
<public name="materialButtonGroupStyle" type="attr"/>
3838
<public name="materialSplitButtonStyle" type="attr"/>
39+
<public name="materialSplitButtonLeadingFilledStyle" type="attr"/>
40+
<public name="materialSplitButtonLeadingFilledTonalStyle" type="attr"/>
3941
<public name="materialSplitButtonIconFilledStyle" type="attr"/>
4042
<public name="materialSplitButtonIconFilledTonalStyle" type="attr"/>
4143
<public name="materialButtonToggleGroupStyle" type="attr"/>
@@ -68,6 +70,8 @@
6870
<public name="Widget.Material3.MaterialButtonGroup" type="style"/>
6971
<public name="Widget.Material3.MaterialButtonGroup.Connected" type="style"/>
7072
<public name="Widget.Material3.MaterialSplitButton" type="style"/>
73+
<public name="Widget.Material3.MaterialSplitButton.LeadingButton.Filled" type="style"/>
74+
<public name="Widget.Material3.MaterialSplitButton.LeadingButton.Filled.Tonal" type="style"/>
7175
<public name="Widget.Material3.MaterialSplitButton.Icon.Filled" type="style"/>
7276
<public name="Widget.Material3.MaterialSplitButton.Icon.Filled.Tonal" type="style"/>
7377
<public name="Widget.Material3.MaterialButtonToggleGroup" type="style"/>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,11 @@
3737
<attr name="materialButtonGroupStyle" format="reference"/>
3838
<!-- Style to use for MaterialSplitButtons in this theme. -->
3939
<attr name="materialSplitButtonStyle" format="reference"/>
40-
<!-- Style to use for Filled Material Icon Only Split Buttons in this theme. -->
40+
<!-- Style to use for leading Filled Button in Split Buttons in this theme. -->
41+
<attr name="materialSplitButtonLeadingFilledStyle" format="reference" />
42+
<!-- Style to use for leading Filled Tonal Button in Split Buttons in this theme. -->
43+
<attr name="materialSplitButtonLeadingFilledTonalStyle" format="reference" />
44+
<!-- Style to use for Filled Material Icon Only Split Buttons in this theme. -->
4145
<attr name="materialSplitButtonIconFilledStyle" format="reference" />
4246
<!-- Style to use for Filled Tonal Material Icon Only Split Buttons in this theme. -->
4347
<attr name="materialSplitButtonIconFilledTonalStyle" format="reference" />

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,13 +547,35 @@
547547
<item name="shapeAppearance">@style/ShapeAppearance.M3.Sys.Shape.Corner.Full</item>
548548
</style>
549549

550+
<style name="Widget.Material3.SplitButton.LeadingButton.Filled" parent="Widget.Material3.Button">
551+
<item name="android:paddingTop">6dp</item>
552+
<item name="android:paddingBottom">6dp</item>
553+
<item name="android:paddingStart">@dimen/m3_comp_split_button_small_leading_button_leading_space</item>
554+
<item name="android:paddingEnd">@dimen/m3_comp_split_button_small_leading_button_trailing_space</item>
555+
<item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item>
556+
<item name="iconSize">20dp</item>
557+
</style>
558+
559+
<style name="Widget.Material3.SplitButton.LeadingButton.Filled.Tonal" parent="Widget.Material3.Button.TonalButton">
560+
<item name="android:paddingTop">6dp</item>
561+
<item name="android:paddingBottom">6dp</item>
562+
<item name="android:paddingStart">@dimen/m3_comp_split_button_small_leading_button_leading_space</item>
563+
<item name="android:paddingEnd">@dimen/m3_comp_split_button_small_leading_button_trailing_space</item>
564+
<item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item>
565+
<item name="iconSize">20dp</item>
566+
</style>
567+
550568
<style name="Widget.Material3.SplitButton.IconButton.Filled" parent="Widget.Material3.Button.IconButton.Filled">
551569
<item name="android:insetLeft">0dp</item>
552570
<item name="android:paddingTop">6dp</item>
553571
<item name="android:paddingBottom">6dp</item>
572+
<item name="android:paddingStart">14dp</item>
573+
<item name="android:paddingEnd">14dp</item>
574+
<item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item>
554575
<item name="android:textColor">@color/m3_button_foreground_color_selector</item>
555576
<item name="iconTint">@color/m3_button_foreground_color_selector</item>
556577
<item name="backgroundTint">@color/m3_button_background_color_selector</item>
578+
<item name="opticalCenterEnabled">true</item>
557579
<item name="materialThemeOverlay">
558580
@style/ThemeOverlay.Material3.SplitButton.IconButton.Filled
559581
</item>
@@ -563,9 +585,13 @@
563585
<item name="android:insetLeft">0dp</item>
564586
<item name="android:paddingTop">6dp</item>
565587
<item name="android:paddingBottom">6dp</item>
588+
<item name="android:paddingStart">14dp</item>
589+
<item name="android:paddingEnd">14dp</item>
590+
<item name="android:minWidth">@dimen/mtrl_min_touch_target_size</item>
566591
<item name="android:textColor">@color/m3_button_foreground_color_selector</item>
567592
<item name="iconTint">@color/m3_button_foreground_color_selector</item>
568593
<item name="backgroundTint">@color/m3_button_background_color_selector</item>
594+
<item name="opticalCenterEnabled">true</item>
569595
<item name="materialThemeOverlay">
570596
@style/ThemeOverlay.Material3.SplitButton.IconButton.Filled.Tonal
571597
</item>

0 commit comments

Comments
 (0)