Android-L CardView Visual Touch Feedback

Question

could anybody explain to me how to implement some of the visual touch feedback that was demonstrated at Google I/O 2014 within a CardView.

Here is how I am using the

Answer 1

To draw selection on pre-Lollipop and post-Lollipop correctly you can use the following approach (the idea is to use inset drawable of selector with rounded corners for pre-Lollipop - sample below uses custom colors, you can change them to default):

android:foreground="@drawable/card_foreground"

post-Lollipop

drawable-v21/card_foreground.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#20000000"
        android:drawable="@drawable/card_foreground_selector" />

drawable-v21/card_foreground_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#18000000"/>
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
        </shape>
    </item>
</selector>

pre-Lollipop

drawable/card_foreground.xml (you'll need to tweak inset values according to elevation of your card)

<inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/card_foreground_selector"
    android:insetLeft="2dp"
    android:insetRight="2dp"
    android:insetTop="4dp"
    android:insetBottom="4dp"/>

drawable/card_foreground_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#18000000"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
</selector>

Answer 2

This helped in my case

Background:

The CardView ignores android:background in favor of app:cardBackground which can only be color. The border and shadow are in fact part of the background so you cannot set your own.

Solution:

Make the layout inside the CardView clickable instead of the card itself. You already wrote both attributes needed for this layout:

android:clickable="true"
android:background="?android:selectableItemBackground"

Answer 3

API 11+:

Add android:foreground="?android:attr/selectableItemBackground" to your CardView element.

API 9+:

Add android:foreground="?selectableItemBackground" to your CardView element.

---

Edit: The ripple originating from the center and not from the touch point is a known bug, and has been fixed.

Answer 4

Here is my solution. It uses ripple for lollipop+ and static foreground for pre-lollipop devices.

<android.support.v7.widget.CardView
    ...
    android:foreground="?android:attr/selectableItemBackground">