Android-L CardView Visual Touch Feedback

问题

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 CardView in XML, there is probably something small that I am missing, so I just wondered if anyone could help me?.

<!-- A CardView -->
<android.support.v7.widget.CardView
    xmlns:card_view=\"http://schemas.android.com/apk/res-auto\"
    android:id=\"@+id/CardView_1\"
    android:layout_width=\"match_parent\"
    android:layout_height=\"wrap_content\"
    android:layout_marginLeft=\"10dp\"
    android:layout_marginRight=\"10dp\"
    android:layout_marginTop=\"10dp\" 
    card_view:cardCornerRadius=\"4dp\"
    android:elevation=\"2dp\">

    <LinearLayout
        android:id=\"@+id/LinearLayout_1\"
        android:layout_width=\"match_parent\"
        android:layout_height=\"wrap_content\"
        android:orientation=\"horizontal\"
        android:onClick=\"RunSomeMethod\"\">

    <!-- Main CardView Content In Here-->

    </LinearLayout> </android.support.v7.widget.CardView>

回答1:

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.

回答2:

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>

回答3:

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"

回答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">

来源：https://stackoverflow.com/questions/24475150/android-l-cardview-visual-touch-feedback