Skip to content

Commit 8ed0ac9

Browse files
drchendrchen
committed
[M3][Chip] Update M3 chip styles with spec
Adds elevation to selected & hovered state. Adds leading icon tint. PiperOrigin-RevId: 407397700
1 parent b2fbace commit 8ed0ac9

File tree

5 files changed

+137
-17
lines changed

5 files changed

+137
-17
lines changed

‎lib/java/com/google/android/material/chip/res/animator/m3_chip_state_list_anim.xml‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,33 +28,36 @@
2828
<!-- android:valueType="floatType"/>-->
2929
<!-- </item>-->
3030

31-
<!-- Hovered state -->
31+
<!-- Selected & hovered state -->
3232
<item
33-
android:state_enabled="true"
34-
android:state_hovered="true">
33+
android:state_enabled="true"
34+
android:state_selected="true"
35+
android:state_hovered="true">
3536
<objectAnimator
3637
android:duration="@integer/m3_chip_anim_duration"
3738
android:propertyName="translationZ"
38-
android:valueTo="@dimen/m3_chip_hovered_translation_z"
39+
android:valueTo="@dimen/m3_chip_checked_hovered_translation_z"
3940
android:valueType="floatType"/>
4041
</item>
4142

42-
<!-- Enabled state -->
43-
<item android:state_enabled="true">
43+
<!-- Checked & hovered state -->
44+
<item
45+
android:state_enabled="true"
46+
android:state_checked="true"
47+
android:state_hovered="true">
4448
<objectAnimator
45-
android:duration="@integer/m3_chip_anim_duration"
46-
android:propertyName="translationZ"
47-
android:valueTo="0"
48-
android:valueType="floatType"/>
49+
android:duration="@integer/m3_chip_anim_duration"
50+
android:propertyName="translationZ"
51+
android:valueTo="@dimen/m3_chip_checked_hovered_translation_z"
52+
android:valueType="floatType"/>
4953
</item>
5054

51-
<!-- Disabled state -->
55+
<!-- Other states -->
5256
<item>
5357
<objectAnimator
54-
android:duration="0"
58+
android:duration="@integer/m3_chip_anim_duration"
5559
android:propertyName="translationZ"
56-
android:valueTo="@dimen/m3_chip_disabled_translation_z"
60+
android:valueTo="0"
5761
android:valueType="floatType"/>
5862
</item>
59-
6063
</selector>

‎lib/java/com/google/android/material/chip/res/animator/m3_elevated_chip_state_list_anim.xml‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2021 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+
https://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+
18+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
19+
20+
<!-- TODO: Uncomment the below section when we implemented Dragged state -->
21+
<!-- <item-->
22+
<!-- android:state_enabled="true"-->
23+
<!-- app:state_dragged="true">-->
24+
<!-- <objectAnimator-->
25+
<!-- android:duration="@integer/m3_chip_anim_duration"-->
26+
<!-- android:propertyName="translationZ"-->
27+
<!-- android:valueTo="@dimen/m3_chip_dragged_translation_z"-->
28+
<!-- android:valueType="floatType"/>-->
29+
<!-- </item>-->
30+
31+
<!-- Hovered state -->
32+
<item
33+
android:state_enabled="true"
34+
android:state_hovered="true">
35+
<objectAnimator
36+
android:duration="@integer/m3_chip_anim_duration"
37+
android:propertyName="translationZ"
38+
android:valueTo="@dimen/m3_chip_hovered_translation_z"
39+
android:valueType="floatType"/>
40+
</item>
41+
42+
<!-- Enabled state -->
43+
<item android:state_enabled="true">
44+
<objectAnimator
45+
android:duration="@integer/m3_chip_anim_duration"
46+
android:propertyName="translationZ"
47+
android:valueTo="0"
48+
android:valueType="floatType"/>
49+
</item>
50+
51+
<!-- Disabled state -->
52+
<item>
53+
<objectAnimator
54+
android:duration="0"
55+
android:propertyName="translationZ"
56+
android:valueTo="@dimen/m3_chip_disabled_translation_z"
57+
android:valueType="floatType"/>
58+
</item>
59+
60+
</selector>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2021 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+
https://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+
18+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
19+
<!-- Disabled state -->
20+
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
21+
22+
<!-- Enabled state -->
23+
<item android:color="?attr/colorPrimary"/>
24+
</selector>

‎lib/java/com/google/android/material/chip/res/values/dimens.xml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
<dimen name="mtrl_chip_pressed_translation_z">3dp</dimen>
2020
<dimen name="mtrl_chip_text_size">14sp</dimen>
2121

22+
<dimen name="m3_chip_checked_hovered_translation_z">1dp</dimen>
23+
2224
<dimen name="m3_chip_dragged_translation_z">7dp</dimen>
2325
<dimen name="m3_chip_hovered_translation_z">2dp</dimen>
2426
<dimen name="m3_chip_disabled_translation_z">-1dp</dimen>

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

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -152,13 +152,17 @@
152152
<item name="android:textAppearance">?attr/textAppearanceLabelLarge</item>
153153
<item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Material3.Chip</item>
154154
<item name="android:textColor">@color/m3_chip_text_color</item>
155+
<item name="chipIconTint">@color/m3_chip_text_color</item>
155156
<item name="closeIconTint">@color/m3_chip_text_color</item>
156157
<item name="chipStrokeColor">@color/m3_chip_stroke_color</item>
157158
<item name="chipSurfaceColor">?attr/colorSurface</item>
158159
<item name="chipBackgroundColor">@color/m3_chip_background_color</item>
159160
<item name="chipStrokeWidth">1dp</item>
160161
<item name="rippleColor">@color/m3_chip_ripple_color</item>
161162
<item name="checkedIcon">@drawable/ic_m3_chip_checked_circle</item>
163+
<item name="android:stateListAnimator" tools:ignore="NewApi">
164+
@animator/m3_chip_state_list_anim
165+
</item>
162166
</style>
163167

164168
<!-- Style for Input Chip: for user-entered information.
@@ -189,13 +193,39 @@
189193
<item name="chipEndPadding">4dp</item>
190194
</style>
191195

196+
<!-- Style for input Chip, to be used when placed against a background
197+
that needs protection, such as an image. -->
198+
<style name="Widget.Material3.Chip.Input.Elevated">
199+
<item name="android:elevation" tools:ignore="NewApi">
200+
@dimen/m3_chip_elevated_elevation
201+
</item>
202+
<item name="android:stateListAnimator" tools:ignore="NewApi">
203+
@animator/m3_elevated_chip_state_list_anim
204+
</item>
205+
<item name="chipStrokeColor">@android:color/transparent</item>
206+
<item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
207+
</style>
208+
192209
<!-- Style for input chips with system icons. For input chips with avatar
193210
style icons, use Widget.Material3.Chip.Input, instead. -->
194211
<style name="Widget.Material3.Chip.Input.Icon" parent="Widget.Material3.Chip.Input">
195212
<item name="chipIconSize">18dp</item>
196213
<item name="iconStartPadding">4dp</item>
197214
</style>
198215

216+
<!-- Style for Input Chip with system icons, to be used when placed against a
217+
background that needs protection, such as an image. -->
218+
<style name="Widget.Material3.Chip.Input.Icon.Elevated">
219+
<item name="android:elevation" tools:ignore="NewApi">
220+
@dimen/m3_chip_elevated_elevation
221+
</item>
222+
<item name="android:stateListAnimator" tools:ignore="NewApi">
223+
@animator/m3_elevated_chip_state_list_anim
224+
</item>
225+
<item name="chipStrokeColor">@android:color/transparent</item>
226+
<item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
227+
</style>
228+
199229
<!-- Style for Suggestion Chips: for suggested information.
200230
Suggestion Chips are used to help a user narrow their intent by
201231
presenting dynamically generated suggestions like possible responses or
@@ -237,7 +267,7 @@
237267
@dimen/m3_chip_elevated_elevation
238268
</item>
239269
<item name="android:stateListAnimator" tools:ignore="NewApi">
240-
@animator/m3_chip_state_list_anim
270+
@animator/m3_elevated_chip_state_list_anim
241271
</item>
242272
<item name="chipStrokeColor">@android:color/transparent</item>
243273
<item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
@@ -263,6 +293,7 @@
263293

264294
<item name="enforceTextAppearance">false</item>
265295
<item name="android:textColor">@color/m3_chip_assist_text_color</item>
296+
<item name="chipIconTint">@color/m3_assist_chip_icon_tint_color</item>
266297

267298
<item name="chipMinHeight">32dp</item>
268299

@@ -283,7 +314,7 @@
283314
@dimen/m3_chip_elevated_elevation
284315
</item>
285316
<item name="android:stateListAnimator" tools:ignore="NewApi">
286-
@animator/m3_chip_state_list_anim
317+
@animator/m3_elevated_chip_state_list_anim
287318
</item>
288319
<item name="chipStrokeColor">@android:color/transparent</item>
289320
<item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
@@ -318,7 +349,7 @@
318349
<item name="android:elevation" tools:ignore="NewApi">
319350
@dimen/m3_chip_elevated_elevation</item>
320351
<item name="android:stateListAnimator" tools:ignore="NewApi">
321-
@animator/m3_chip_state_list_anim
352+
@animator/m3_elevated_chip_state_list_anim
322353
</item>
323354
<item name="chipStrokeColor">@android:color/transparent</item>
324355
<item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>

0 commit comments

Comments
 (0)