Not getting Ripple effect on Android Lollipop CardView

Question

I'm trying to get the ripple effect in card view, I implemented it by adding the android:background attribute as described in the Android Developers page https://developer.android.com/training/material/animations.html but I did not get the ripple effect, then I changed the attribute to android:foreground as given in https://stackoverflow.com/a/26975714/6866139 still I am not getting the ripple effect here is my XML code

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/cardview_light_background"
        card_view:cardElevation="3dp"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:id="@+id/card_view"
        android:clickable="true"
        android:background="?android:attr/selectableItemBackground"
        android:layout_margin="@dimen/password_list_item_card_view_layout_margin">


            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="70dp">

                <TextView
                    android:layout_width="48dp"
                    android:layout_height="48dp"
                    android:id="@+id/logo_text_holder"
                    android:layout_marginTop="12dp"
                    android:layout_marginStart="12dp"
                    android:textColor="@color/colorPrimaryDark"
                    android:background="@drawable/circle"
                    android:paddingTop="8dp"
                    android:textSize="24sp"
                    android:textAlignment="center" />

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="8dp">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/name_holder"
                        android:textColor="@color/colorPrimaryDark"
                        android:textSize="24sp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/email_holder"
                        android:textColor="@color/colorPrimaryDark"
                        android:textSize="14sp"/>
                </LinearLayout>
            </LinearLayout>
    </android.support.v7.widget.CardView>

Is there any way to implement it, please help me Thanks in Advance

Instead of android:background="?android:attr/selectableItemBackground" use this android:foreground="?android:attr/selectableItemBackground". — Surender Kumar, Feb 18 '17 at 17:48
I tried using both android:foreground and android:background attributes, but still not working — Siddharth Eswaramoorthy, Feb 18 '17 at 17:53

score 0 · Answer 1 · answered Jul 31 '17 at 12:02

I had the same issue, inside the childView of CardView, instead of the android:layout_width="match_parent" use android:layout_width="wrap_content"

as in the below code:

<android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@color/green"
            android:foreground="?attr/selectableItemBackground"
            android:background="?attr/selectableItemBackground"
            android:stateListAnimator="@animator/lift_on_touch"
            android:focusable="true"
            android:clickable="true"
            app:cardPreventCornerOverlap="false"
            app:cardUseCompatPadding="true">
        <TextView
            android:id="@+id/notification_details_med_close"
            android:layout_width="wrap_content"
            android:padding="10dp"
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:background="@color/green"
            android:text="CARDVIEW"
            android:textAppearance="?android:textAppearanceLarge"
            android:textColor="@android:color/white" />
        </android.support.v7.widget.CardView>

for lift animation on touch, create a animator resource file lift_on_touch in animator-v21 folder

    <?xml version="1.0" encoding="utf-8"?>
<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="16dp"
                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>

This will help with the material design effect on CardView.

Note: android:stateListAnimator works with API 21 and above.

Not getting Ripple effect on Android Lollipop CardView

1 Answers1