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 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> 

Answer 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.

Answer 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>