RecyclerView + CardView + Touch feedback

Question

Has anybody solved the mystery of the CardView without touch feedback when it\'s inside a RecyclerView?

I have a RecyclerView with a bu

Answer 1

Solution 1

As @Eugen proposed, you can make the layout inside CardView clickable, so then you can use android:background:

<android.support.v7.widget.CardView
    ...
    android:clickable="true"
    android:background="?attr/selectableItemBackground">

Solution 2

If you don't want to lose the item click listener by making the layout inside CardView clickable, you can use android:foreground:

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

---

Extra: you can use "?attr/selectableItemBackgroundBorderless" instead of "?attr/selectableItemBackground" if you don't want the rectangle mask.

Answer 2

create selector "drawable/card_foreground_selector"

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

and create "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="3dp"
android:insetBottom="3dp"/>

modify your item (item.xml)

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:contentPadding="8dp"
    android:foreground="@drawable/card_foreground">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    // ..

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

you can view original post here

Answer 3

Both Approach should work the same way.

1) If you want cardview to respond to touch feedback then use this one in cardview.

 android:foreground="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"

---

but if above approach is not working then you can set this property on child view group (Linear/Relative etc) of cardview.

   android:background="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"

But then itemView of ViewHolder will not respond to the touch event. since its been consumed by child view so you have to set clicklistener on childview to work on further with listener in recyclerview adapter, this way we can enable touch as well as click events on row items of recyclerview in our adapter.

if you have hard time following the touch and click on views in cardview with ripple then this might be helpful. Touch Feedback Problem

2.) The second approach is to use the traditional way of using custom touch selector drawable and set as background.

    <?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your ripple color">
    <item>
    <selector>
        <item android:state_selected="true">
            <color android:color="your selected color" />
        </item>
        <item android:state_activated="true">
            <color android:color="your selected color" />
        </item>
        <item>
            <color android:color="your normal color" />
        </item>
    </selector>
    </item>
</ripple>

Docs Ripple Drawable

Answer 4

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 5

Add foreground attribute:

android:foreground="?android:attr/selectableItemBackground"