Kumite01 Card animation - mitchwongho/GDS-Material-Kata GitHub Wiki

Introduction

Animations in material design gives users feedback on their actions. The material theme provides some default animations on Android 5.0 (API level 21) and above. Reference

Goal

The goal of this kumite is to apply a transition to a CardView on the touch event. [Source reference]

Exercise

Create an animation resource in res/anim:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="6dp"
                android:valueType="floatType"/>
        </set>
    </item>
    <item>
        <set>
            <objectAnimator android:propertyName="translationZ"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="0"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

Next, apply the animation to your CardView (res/layout/simple_cardview.xml) using the attribute android:stateListAnimator:

<android.support.v7.widget.CardView
    ...
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground"
    android:stateListAnimator="@anim/anim_card_lift">
        <TextView
            android:id="@+id/card_title"
            ...
            tools:text="Title text"/>
</android.support.v7.widget.CardView>
⚠️ **GitHub.com Fallback** ⚠️