Skip to content

Commit 2667e09

Browse files
kendrickumstattdimhappi
kendrickumstattd
authored and
imhappi
committed
[Button] Added optical center feature.
ORIGINAL_AUTHOR=pekingme PiperOrigin-RevId: 748415083
1 parent 696a48a commit 2667e09

File tree

12 files changed

+225
-36
lines changed

12 files changed

+225
-36
lines changed

‎catalog/java/io/material/catalog/button/ButtonGroupDemoFragment.java

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
import androidx.annotation.LayoutRes;
2828
import androidx.annotation.NonNull;
2929
import androidx.annotation.Nullable;
30+
import com.google.android.material.button.MaterialButton;
3031
import com.google.android.material.button.MaterialButtonGroup;
3132
import com.google.android.material.materialswitch.MaterialSwitch;
3233
import io.material.catalog.feature.DemoFragment;
@@ -52,6 +53,7 @@ public View onCreateDemoView(
5253
layoutInflater.inflate(getLabelOnlyButtonGroupContent(), content, /* attachToRoot= */ true);
5354
layoutInflater.inflate(getMixedButtonGroupContent(), content, /* attachToRoot= */ true);
5455

56+
List<MaterialButton> buttons = DemoUtils.findViewsWithType(view, MaterialButton.class);
5557
List<MaterialButtonGroup> buttonGroups =
5658
DemoUtils.findViewsWithType(view, MaterialButtonGroup.class);
5759

@@ -73,6 +75,13 @@ public View onCreateDemoView(
7375
buttonGroup.setEnabled(isChecked);
7476
}
7577
});
78+
MaterialSwitch opticalCenterSwitch = view.findViewById(R.id.switch_optical_center);
79+
opticalCenterSwitch.setOnCheckedChangeListener(
80+
(buttonView, isChecked) -> {
81+
for (MaterialButton button : buttons) {
82+
button.setOpticalCenterEnabled(isChecked);
83+
}
84+
});
7685
return view;
7786
}
7887

‎catalog/java/io/material/catalog/button/ButtonToggleGroupDemoFragment.java

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ public View onCreateDemoView(
5555
layoutInflater.inflate(getButtonToggleGroupContent(), viewGroup, /* attachToRoot= */ false);
5656
MaterialSwitch requireSelectionToggle = view.findViewById(R.id.switch_toggle);
5757
defaultInset = getResources().getDimensionPixelSize(com.google.android.material.R.dimen.mtrl_btn_inset);
58+
List<MaterialButton> buttons = DemoUtils.findViewsWithType(view, MaterialButton.class);
5859
List<MaterialButtonToggleGroup> toggleGroups =
5960
DemoUtils.findViewsWithType(view, MaterialButtonToggleGroup.class);
6061
requireSelectionToggle.setOnCheckedChangeListener(
@@ -115,6 +116,13 @@ public View onCreateDemoView(
115116
toggleGroup.setSpacing((int) (value * pixelsInDp));
116117
}
117118
});
119+
MaterialSwitch opticalCenterSwitch = view.findViewById(R.id.switch_optical_center);
120+
opticalCenterSwitch.setOnCheckedChangeListener(
121+
(buttonView, isChecked) -> {
122+
for (MaterialButton button : buttons) {
123+
button.setOpticalCenterEnabled(isChecked);
124+
}
125+
});
118126
return view;
119127
}
120128

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,5 +52,14 @@
5252
android:checked="true"
5353
android:enabled="true"
5454
android:text="@string/cat_button_enable" />
55+
<com.google.android.material.materialswitch.MaterialSwitch
56+
android:id="@+id/switch_optical_center"
57+
android:paddingTop="16dp"
58+
android:layout_width="wrap_content"
59+
android:layout_height="match_parent"
60+
android:layout_gravity="center"
61+
android:checked="false"
62+
android:enabled="true"
63+
android:text="@string/cat_button_optical_center" />
5564
</LinearLayout>
5665
</ScrollView>

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@
5050
style="?attr/materialButtonOutlinedStyle"
5151
android:layout_width="wrap_content"
5252
android:layout_height="wrap_content"
53-
android:text="@string/cat_button_label_team" />
53+
android:text="@string/cat_button_label_team" />
5454

5555
<Button
5656
style="?attr/materialButtonOutlinedStyle"
5757
android:layout_width="wrap_content"
5858
android:layout_height="wrap_content"
59-
android:text="@string/cat_button_label_everyone" />
59+
android:text="@string/cat_button_label_everyone" />
6060

6161
<Button
6262
style="?attr/materialButtonOutlinedStyle"
@@ -80,17 +80,17 @@
8080
style="?attr/materialButtonOutlinedStyle"
8181
android:layout_width="wrap_content"
8282
android:layout_height="wrap_content"
83-
android:text="@string/cat_button_label_cheese"/>
83+
android:text="@string/cat_button_label_cheese" />
8484
<Button
8585
style="?attr/materialButtonOutlinedStyle"
8686
android:layout_width="wrap_content"
8787
android:layout_height="wrap_content"
88-
android:text="@string/cat_button_label_tomatoes"/>
88+
android:text="@string/cat_button_label_tomatoes" />
8989
<Button
9090
style="?attr/materialButtonOutlinedStyle"
9191
android:layout_width="wrap_content"
9292
android:layout_height="wrap_content"
93-
android:text="@string/cat_button_label_mushrooms"/>
93+
android:text="@string/cat_button_label_mushrooms" />
9494
</com.google.android.material.button.MaterialButtonToggleGroup>
9595

9696
<TextView
@@ -112,39 +112,39 @@
112112
android:minWidth="@dimen/mtrl_min_touch_target_size"
113113
android:contentDescription="@string/cat_icon_button_label_add_circle"
114114
app:icon="@drawable/ic_add_circle_checkable_24px"
115-
app:iconPadding="0dp"/>
115+
app:iconPadding="0dp" />
116116
<Button
117117
style="?attr/materialButtonOutlinedStyle"
118118
android:layout_width="wrap_content"
119119
android:layout_height="wrap_content"
120120
android:minWidth="@dimen/mtrl_min_touch_target_size"
121121
android:contentDescription="@string/cat_icon_button_label_favorite"
122122
app:icon="@drawable/ic_favorite_checkable_24px"
123-
app:iconPadding="0dp"/>
123+
app:iconPadding="0dp" />
124124
<Button
125125
style="?attr/materialButtonOutlinedStyle"
126126
android:layout_width="wrap_content"
127127
android:layout_height="wrap_content"
128128
android:minWidth="@dimen/mtrl_min_touch_target_size"
129129
android:contentDescription="@string/cat_icon_button_label_home"
130130
app:icon="@drawable/ic_home_checkable_24px"
131-
app:iconPadding="0dp"/>
131+
app:iconPadding="0dp" />
132132
<Button
133133
style="?attr/materialButtonOutlinedStyle"
134134
android:layout_width="wrap_content"
135135
android:layout_height="wrap_content"
136136
android:minWidth="@dimen/mtrl_min_touch_target_size"
137137
android:contentDescription="@string/cat_icon_button_label_settings"
138138
app:icon="@drawable/ic_settings_checkable_24px"
139-
app:iconPadding="0dp"/>
139+
app:iconPadding="0dp" />
140140
<Button
141141
style="?attr/materialButtonOutlinedStyle"
142142
android:layout_width="wrap_content"
143143
android:layout_height="wrap_content"
144144
android:minWidth="@dimen/mtrl_min_touch_target_size"
145145
android:contentDescription="@string/cat_icon_button_label_delete_forever"
146146
app:icon="@drawable/ic_delete_forever_checkable_24px"
147-
app:iconPadding="0dp"/>
147+
app:iconPadding="0dp" />
148148
</com.google.android.material.button.MaterialButtonToggleGroup>
149149

150150
<TextView
@@ -200,6 +200,14 @@
200200
android:checked="true"
201201
android:enabled="true"
202202
android:text="@string/cat_button_enable" />
203-
203+
<com.google.android.material.materialswitch.MaterialSwitch
204+
android:id="@+id/switch_optical_center"
205+
android:paddingTop="16dp"
206+
android:layout_width="wrap_content"
207+
android:layout_height="match_parent"
208+
android:layout_gravity="center"
209+
android:checked="false"
210+
android:enabled="true"
211+
android:text="@string/cat_button_optical_center" />
204212
</LinearLayout>
205213
</ScrollView>

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
android:paddingEnd="14dp"
6060
android:minWidth="@dimen/mtrl_min_touch_target_size"
6161
android:contentDescription="@string/cat_split_button_label_chevron"
62-
app:icon="@drawable/m3_split_button_chevron_avd"/>
62+
app:icon="@drawable/m3_split_button_chevron_avd"
63+
app:opticalCenterEnabled="true"/>
6364
</com.google.android.material.button.MaterialSplitButton>
6465

6566
<com.google.android.material.button.MaterialSplitButton
@@ -83,7 +84,8 @@
8384
android:paddingEnd="14dp"
8485
android:minWidth="@dimen/mtrl_min_touch_target_size"
8586
android:contentDescription="@string/cat_split_button_label_chevron"
86-
app:icon="@drawable/m3_split_button_chevron_avd"/>
87+
app:icon="@drawable/m3_split_button_chevron_avd"
88+
app:opticalCenterEnabled="true"/>
8789
</com.google.android.material.button.MaterialSplitButton>
8890

8991
<com.google.android.material.button.MaterialSplitButton
@@ -109,7 +111,8 @@
109111
android:paddingEnd="14dp"
110112
android:minWidth="@dimen/mtrl_min_touch_target_size"
111113
android:contentDescription="@string/cat_split_button_label_chevron"
112-
app:icon="@drawable/m3_split_button_chevron_avd"/>
114+
app:icon="@drawable/m3_split_button_chevron_avd"
115+
app:opticalCenterEnabled="true"/>
113116
</com.google.android.material.button.MaterialSplitButton>
114117

115118
<TextView
@@ -145,7 +148,8 @@
145148
android:paddingEnd="14dp"
146149
android:contentDescription="@string/cat_split_button_label_chevron"
147150
app:icon="@drawable/m3_split_button_chevron_avd"
148-
android:minWidth="@dimen/mtrl_min_touch_target_size"/>
151+
android:minWidth="@dimen/mtrl_min_touch_target_size"
152+
app:opticalCenterEnabled="true"/>
149153
</com.google.android.material.button.MaterialSplitButton>
150154

151155
<com.google.android.material.button.MaterialSplitButton
@@ -170,7 +174,8 @@
170174
android:paddingEnd="14dp"
171175
android:minWidth="@dimen/mtrl_min_touch_target_size"
172176
android:contentDescription="@string/cat_split_button_label_chevron"
173-
app:icon="@drawable/m3_split_button_chevron_avd"/>
177+
app:icon="@drawable/m3_split_button_chevron_avd"
178+
app:opticalCenterEnabled="true"/>
174179
</com.google.android.material.button.MaterialSplitButton>
175180

176181
<com.google.android.material.button.MaterialSplitButton
@@ -197,7 +202,8 @@
197202
android:paddingEnd="14dp"
198203
android:minWidth="@dimen/mtrl_min_touch_target_size"
199204
android:contentDescription="@string/cat_split_button_label_chevron"
200-
app:icon="@drawable/m3_split_button_chevron_avd"/>
205+
app:icon="@drawable/m3_split_button_chevron_avd"
206+
app:opticalCenterEnabled="true"/>
201207
</com.google.android.material.button.MaterialSplitButton>
202208

203209
<TextView
@@ -231,9 +237,9 @@
231237
android:paddingEnd="14dp"
232238
android:minWidth="@dimen/mtrl_min_touch_target_size"
233239
android:contentDescription="@string/cat_split_button_label_chevron"
234-
app:icon="@drawable/m3_split_button_chevron_avd"/>
240+
app:icon="@drawable/m3_split_button_chevron_avd"
241+
app:opticalCenterEnabled="true"/>
235242
</com.google.android.material.button.MaterialSplitButton>
236-
237243
<com.google.android.material.materialswitch.MaterialSwitch
238244
android:id="@+id/switch_enable"
239245
android:paddingTop="16dp"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
</string>
3131
<string name="cat_button_label_enabled">Enabled</string>
3232
<string name="cat_button_label_disabled">Disabled</string>
33+
<string name="cat_button_optical_center" translatable="false">Optical Center</string>
3334

3435
<string name="cat_label_buttons_text"
3536
description="Title for a section that shows label buttons. [CHAR LIMIT=NONE]">Label Buttons</string>

‎docs/components/Button.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ and make choices, with a single tap.
2626
* [Button groups](#button-groups)
2727
* [Toggle button group](#toggle-button-groups)
2828
* [Icon button](#icon-button)
29+
* [Optical centering](#optical-centering)
2930
* [Theming](#theming-buttons)
3031

3132
## Design and API Documentation
@@ -1216,6 +1217,19 @@ See the full list of
12161217
and
12171218
[attrs](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/attrs.xml).
12181219

1220+
## Optical Centering
1221+
1222+
Optical centering means to offset the `MaterialButton`’s contents (icon and/or
1223+
label) when the shape is asymmetric. Before optical centering, we only provided
1224+
centering with horizontally asymmetrical shapes.
1225+
1226+
To turn on optical centering for a given button, use
1227+
`setOpticalCenterEnabled(true)`. Optical centering is disabled by default. When
1228+
enabled, the shift amount of the icon and/or text is calculated as a value with
1229+
the fixed ratio to the difference between left corner size in dp and right
1230+
corner size in dp. The shift amount is applied to the padding start and padding
1231+
end.
1232+
12191233
## Theming buttons
12201234

12211235
Buttons support

0 commit comments

Comments
 (0)