Skip to content

Commit

Permalink
[M3][Card] Update M3 card elevation according to the spec
Browse files Browse the repository at this point in the history 
Spec: https://m3.material.io/components/cards/specs
PiperOrigin-RevId: 412921858
  • Loading branch information
@drchen @paulfthomas
drchen authored and paulfthomas committed Nov 29, 2021
1 parent a487c89 commit bb23e2d
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 53 deletions.
54 changes: 28 additions & 26 deletions lib/java/com/google/android/material/card/res/animator/m3_card_elevated_state_list_anim.xml
View file
Expand Up @@ -20,34 +20,28 @@
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<!-- Pressed state -->
<item
android:state_enabled="true"
android:state_pressed="true">
<set>
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
android:propertyName="translationZ"
android:startDelay="@integer/m3_card_anim_delay_ms"
android:valueTo="@dimen/m3_card_elevated_dragged_pressed_z"
android:valueType="floatType"
tools:targetApi="kitkat"/>
</set>
<!-- Hovered state -->
<item android:state_enabled="true" android:state_hovered="true">
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
android:propertyName="translationZ"
android:startDelay="@integer/m3_card_anim_delay_ms"
android:valueTo="@dimen/m3_card_elevated_hovered_z"
android:valueType="floatType"
tools:targetApi="kitkat"/>
</item>

<!-- Dragged state don't animate -->
<item
android:state_enabled="true"
app:state_dragged="true">
<set>
<objectAnimator
android:duration="0"
android:interpolator="@anim/mtrl_card_lowers_interpolator"
android:propertyName="translationZ"
android:valueTo="@dimen/m3_card_elevated_dragged_pressed_z"
android:valueType="floatType"/>
</set>
<!-- Dragged state -->
<item android:state_enabled="true" app:state_dragged="true">
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
android:propertyName="translationZ"
android:startDelay="@integer/m3_card_anim_delay_ms"
android:valueTo="@dimen/m3_card_elevated_dragged_z"
android:valueType="floatType"
tools:targetApi="kitkat"/>
</item>

<!-- Base state -->
Expand All @@ -62,4 +56,12 @@
</set>
</item>

<!-- Disabled state -->
<item>
<objectAnimator
android:duration="0"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType"/>
</item>
</selector>
62 changes: 39 additions & 23 deletions lib/java/com/google/android/material/card/res/animator/m3_card_state_list_anim.xml
View file
Expand Up @@ -16,34 +16,50 @@
-->

<selector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<!-- Hovered state -->
<item android:state_enabled="true" android:state_hovered="true">
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:propertyName="translationZ"
android:valueTo="@dimen/m3_card_hovered_z"
android:startDelay="@integer/m3_card_anim_delay_ms"
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
android:valueType="floatType"
tools:targetApi="kitkat"/>
</item>

<!-- Dragged state -->
<item
android:state_enabled="true"
app:state_dragged="true">
<set>
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:propertyName="translationZ"
android:valueTo="@dimen/m3_card_dragged_z"
android:startDelay="@integer/m3_card_anim_delay_ms"
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
android:valueType="floatType"/>
</set>
<item android:state_enabled="true" app:state_dragged="true">
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:propertyName="translationZ"
android:valueTo="@dimen/m3_card_dragged_z"
android:startDelay="@integer/m3_card_anim_delay_ms"
android:interpolator="@interpolator/mtrl_fast_out_slow_in"
android:valueType="floatType"
tools:targetApi="kitkat"/>
</item>

<!-- Base state (enabled, not Dragged) -->
<!-- Base state -->
<item android:state_enabled="true">
<set>
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:propertyName="translationZ"
android:valueTo="0dp"
android:interpolator="@anim/mtrl_card_lowers_interpolator"
android:valueType="floatType"/>
</set>
<objectAnimator
android:duration="@integer/m3_card_anim_duration_ms"
android:propertyName="translationZ"
android:valueTo="0dp"
android:interpolator="@anim/mtrl_card_lowers_interpolator"
android:valueType="floatType"/>
</item>

<!-- Disabled state -->
<item>
<objectAnimator
android:duration="0"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType"/>
</item>
</selector>
7 changes: 4 additions & 3 deletions lib/java/com/google/android/material/card/res/values/dimens.xml
View file
Expand Up @@ -31,11 +31,12 @@
<!-- TranslationZ for card when it's on dragged state. -->
<dimen name="mtrl_card_dragged_z">5dp</dimen>

<dimen name="m3_card_corner_radius">8dp</dimen>
<dimen name="m3_card_elevation">@dimen/m3_sys_elevation_level0</dimen>
<dimen name="m3_card_dragged_z">8dp</dimen>
<dimen name="m3_card_hovered_z">@dimen/m3_sys_elevation_level1</dimen>
<dimen name="m3_card_dragged_z">@dimen/m3_sys_elevation_level3</dimen>
<dimen name="m3_card_stroke_width">1dp</dimen>

<dimen name="m3_card_elevated_elevation">@dimen/m3_sys_elevation_level1</dimen>
<dimen name="m3_card_elevated_dragged_pressed_z">2dp</dimen>
<dimen name="m3_card_elevated_hovered_z">2dp</dimen> <!-- level1 -> level2 -->
<dimen name="m3_card_elevated_dragged_z">7dp</dimen> <!-- level1 -> level4 -->
</resources>
2 changes: 1 addition & 1 deletion lib/java/com/google/android/material/card/res/values/styles.xml
View file
Expand Up @@ -38,10 +38,10 @@

<!-- Style for the M3 card. -->
<style name="Base.Widget.Material3.CardView" parent="Widget.MaterialComponents.CardView">
<item name="enforceMaterialTheme">true</item>
<item name="android:stateListAnimator" tools:ignore="NewApi">
@animator/m3_card_state_list_anim
</item>
<item name="cardCornerRadius">@dimen/m3_card_corner_radius</item>
<item name="cardElevation">@dimen/m3_card_elevation</item>
<item name="cardForegroundColor">@color/m3_card_foreground_color</item>
<item name="rippleColor">@color/m3_card_ripple_color</item>
Expand Down

0 comments on commit bb23e2d

Please sign in to comment.