Skip to content

Commit 91f1f2e

Browse files
drchenjosefigueroa168
drchen
authored and
josefigueroa168
committed
[M3][Card] Update M3 card elevation according to the spec
Spec: https://m3.material.io/components/cards/specs PiperOrigin-RevId: 412921858 (cherry picked from commit bb23e2d)
1 parent 55a67a6 commit 91f1f2e

File tree

4 files changed

+72
-53
lines changed

4 files changed

+72
-53
lines changed

‎lib/java/com/google/android/material/card/res/animator/m3_card_elevated_state_list_anim.xml‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,28 @@
2020
xmlns:app="http://schemas.android.com/apk/res-auto"
2121
xmlns:tools="http://schemas.android.com/tools">
2222

23-
<!-- Pressed state -->
24-
<item
25-
android:state_enabled="true"
26-
android:state_pressed="true">
27-
<set>
28-
<objectAnimator
29-
android:duration="@integer/m3_card_anim_duration_ms"
30-
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
31-
android:propertyName="translationZ"
32-
android:startDelay="@integer/m3_card_anim_delay_ms"
33-
android:valueTo="@dimen/m3_card_elevated_dragged_pressed_z"
34-
android:valueType="floatType"
35-
tools:targetApi="kitkat"/>
36-
</set>
23+
<!-- Hovered state -->
24+
<item android:state_enabled="true" android:state_hovered="true">
25+
<objectAnimator
26+
android:duration="@integer/m3_card_anim_duration_ms"
27+
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
28+
android:propertyName="translationZ"
29+
android:startDelay="@integer/m3_card_anim_delay_ms"
30+
android:valueTo="@dimen/m3_card_elevated_hovered_z"
31+
android:valueType="floatType"
32+
tools:targetApi="kitkat"/>
3733
</item>
3834

39-
<!-- Dragged state don't animate -->
40-
<item
41-
android:state_enabled="true"
42-
app:state_dragged="true">
43-
<set>
44-
<objectAnimator
45-
android:duration="0"
46-
android:interpolator="@anim/mtrl_card_lowers_interpolator"
47-
android:propertyName="translationZ"
48-
android:valueTo="@dimen/m3_card_elevated_dragged_pressed_z"
49-
android:valueType="floatType"/>
50-
</set>
35+
<!-- Dragged state -->
36+
<item android:state_enabled="true" app:state_dragged="true">
37+
<objectAnimator
38+
android:duration="@integer/m3_card_anim_duration_ms"
39+
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
40+
android:propertyName="translationZ"
41+
android:startDelay="@integer/m3_card_anim_delay_ms"
42+
android:valueTo="@dimen/m3_card_elevated_dragged_z"
43+
android:valueType="floatType"
44+
tools:targetApi="kitkat"/>
5145
</item>
5246

5347
<!-- Base state -->
@@ -62,4 +56,12 @@
6256
</set>
6357
</item>
6458

59+
<!-- Disabled state -->
60+
<item>
61+
<objectAnimator
62+
android:duration="0"
63+
android:propertyName="translationZ"
64+
android:valueTo="0dp"
65+
android:valueType="floatType"/>
66+
</item>
6567
</selector>

‎lib/java/com/google/android/material/card/res/animator/m3_card_state_list_anim.xml‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,34 +16,50 @@
1616
-->
1717

1818
<selector
19-
xmlns:android="http://schemas.android.com/apk/res/android"
20-
xmlns:app="http://schemas.android.com/apk/res-auto">
19+
xmlns:android="http://schemas.android.com/apk/res/android"
20+
xmlns:app="http://schemas.android.com/apk/res-auto"
21+
xmlns:tools="http://schemas.android.com/tools">
22+
23+
<!-- Hovered state -->
24+
<item android:state_enabled="true" android:state_hovered="true">
25+
<objectAnimator
26+
android:duration="@integer/m3_card_anim_duration_ms"
27+
android:propertyName="translationZ"
28+
android:valueTo="@dimen/m3_card_hovered_z"
29+
android:startDelay="@integer/m3_card_anim_delay_ms"
30+
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
31+
android:valueType="floatType"
32+
tools:targetApi="kitkat"/>
33+
</item>
2134

2235
<!-- Dragged state -->
23-
<item
24-
android:state_enabled="true"
25-
app:state_dragged="true">
26-
<set>
27-
<objectAnimator
28-
android:duration="@integer/m3_card_anim_duration_ms"
29-
android:propertyName="translationZ"
30-
android:valueTo="@dimen/m3_card_dragged_z"
31-
android:startDelay="@integer/m3_card_anim_delay_ms"
32-
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
33-
android:valueType="floatType"/>
34-
</set>
36+
<item android:state_enabled="true" app:state_dragged="true">
37+
<objectAnimator
38+
android:duration="@integer/m3_card_anim_duration_ms"
39+
android:propertyName="translationZ"
40+
android:valueTo="@dimen/m3_card_dragged_z"
41+
android:startDelay="@integer/m3_card_anim_delay_ms"
42+
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
43+
android:valueType="floatType"
44+
tools:targetApi="kitkat"/>
3545
</item>
3646

37-
<!-- Base state (enabled, not Dragged) -->
47+
<!-- Base state -->
3848
<item android:state_enabled="true">
39-
<set>
40-
<objectAnimator
41-
android:duration="@integer/m3_card_anim_duration_ms"
42-
android:propertyName="translationZ"
43-
android:valueTo="0dp"
44-
android:interpolator="@anim/mtrl_card_lowers_interpolator"
45-
android:valueType="floatType"/>
46-
</set>
49+
<objectAnimator
50+
android:duration="@integer/m3_card_anim_duration_ms"
51+
android:propertyName="translationZ"
52+
android:valueTo="0dp"
53+
android:interpolator="@anim/mtrl_card_lowers_interpolator"
54+
android:valueType="floatType"/>
4755
</item>
4856

57+
<!-- Disabled state -->
58+
<item>
59+
<objectAnimator
60+
android:duration="0"
61+
android:propertyName="translationZ"
62+
android:valueTo="0dp"
63+
android:valueType="floatType"/>
64+
</item>
4965
</selector>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@
3131
<!-- TranslationZ for card when it's on dragged state. -->
3232
<dimen name="mtrl_card_dragged_z">5dp</dimen>
3333

34-
<dimen name="m3_card_corner_radius">8dp</dimen>
3534
<dimen name="m3_card_elevation">@dimen/m3_sys_elevation_level0</dimen>
36-
<dimen name="m3_card_dragged_z">8dp</dimen>
35+
<dimen name="m3_card_hovered_z">@dimen/m3_sys_elevation_level1</dimen>
36+
<dimen name="m3_card_dragged_z">@dimen/m3_sys_elevation_level3</dimen>
3737
<dimen name="m3_card_stroke_width">1dp</dimen>
3838

3939
<dimen name="m3_card_elevated_elevation">@dimen/m3_sys_elevation_level1</dimen>
40-
<dimen name="m3_card_elevated_dragged_pressed_z">2dp</dimen>
40+
<dimen name="m3_card_elevated_hovered_z">2dp</dimen> <!-- level1 -> level2 -->
41+
<dimen name="m3_card_elevated_dragged_z">7dp</dimen> <!-- level1 -> level4 -->
4142
</resources>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@
3838

3939
<!-- Style for the M3 card. -->
4040
<style name="Base.Widget.Material3.CardView" parent="Widget.MaterialComponents.CardView">
41+
<item name="enforceMaterialTheme">true</item>
4142
<item name="android:stateListAnimator" tools:ignore="NewApi">
4243
@animator/m3_card_state_list_anim
4344
</item>
44-
<item name="cardCornerRadius">@dimen/m3_card_corner_radius</item>
4545
<item name="cardElevation">@dimen/m3_card_elevation</item>
4646
<item name="cardForegroundColor">@color/m3_card_foreground_color</item>
4747
<item name="rippleColor">@color/m3_card_ripple_color</item>

0 commit comments

Comments
 (0)