markdown CardView高程和波纹

Posted 2021-05-06

# CardView elevation and ripple

[SOURCE](https://stackoverflow.com/a/24475228/1602807), [SOURCE](https://stackoverflow.com/a/45977707/1602807), [SOURCE](https://vickychijwani.me/cardview-material-response/),

*EXTRA*: customize ripple color [SOURCE](https://stackoverflow.com/a/33085033/1602807)

```xml
<android.support.v7.widget.CardView
        android:id="@+id/fcs_child_container"
        android:layout_width="325dp"
        android:layout_height="120dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="4dp"
        app:cardBackgroundColor="@color/main_blue"
        android:foreground="?android:attr/selectableItemBackground" //ripple effect for API 11+, see first link for more detail
        android:clickable="true" //Not necessary if setOnClickListener
        android:stateListAnimator="@anim/lift_on_touch" //for the lift effect
        app:layout_constraintTop_toBottomOf="@id/fcs_welcome_description_tv"
        app:layout_constraintStart_toEndOf="@id/fcs_start_vertical_guideline"
        app:layout_constraintEnd_toStartOf="@id/fcs_end_vertical_guideline">
        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/child_chat_image"
            android:layout_gravity="start"/>
        <TextView
            style="@style/BoldTextStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textSize="24sp"
            android:textColor="@color/basic_white"
            android:text="@string/txt_child"/>
    </android.support.v7.widget.CardView>
```

`res/anim-v21/lift_on_touch.xml`

```xml
<set xmlns:android="http://schemas.android.com/apk/res/android"> //need to add this, see second link for detail
    <selector>
        <item
            android:state_enabled="true"
            android:state_pressed="true">
            <set>
                <objectAnimator
                    android:duration="@android:integer/config_shortAnimTime"
                    android:propertyName="translationZ"
                    android:valueTo="12dp"
                    android:valueType="floatType"/>
            </set>
        </item>
        <item>
            <set>
                <objectAnimator
                    android:duration="@android:integer/config_shortAnimTime"
                    android:propertyName="translationZ"
                    android:valueTo="0"
                    android:valueType="floatType"/>
            </set>
        </item>
    </selector>
</set>
```