Cardview ripple effect doesn't work

Question

Min SDK is 21. When I click on a cardview in my recycler adapter, the ripple effect doesn't happen and just goes to the next screen. The recyclerview is inside a fragment.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/entire_card"
        android:layout_width="match_parent"
        android:layout_height="265dp"
        android:layout_margin="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="2dp"
        >


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ProgressBar
                android:id="@+id/progressbar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_centerHorizontal="true"
                android:paddingTop="120dp"
                android:visibility="visible"/>


            <ImageView
                android:id="@+id/pet_image"
                android:layout_width="match_parent"
                android:layout_height="210dp"
                android:layout_alignParentTop="true"
                android:scaleType="centerCrop"
                android:src="@drawable/placeholder"
                android:visibility="gone"
                 />

            <TextView
                android:id="@+id/pet_description"
                android:layout_width="fill_parent"
                android:layout_height="55dp"
                android:layout_below="@+id/pet_image"
                android:padding="10dp"
                android:textColor="#FFFFFF"
                android:visibility="gone"
                android:textSize="20sp"
                android:background="@color/primaryColour"
                />

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

</LinearLayout>

Adapter code where I have my onClick for each item.

public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView petInfo;
        public ImageView imgURL;
        public ProgressBar progressBar;

        private Context itemContext;
        public ViewHolder(View v){
            super(v);
            imgURL = (ImageView) v.findViewById(R.id.pet_image);
            petInfo = (TextView) v.findViewById(R.id.pet_description);
            progressBar = (ProgressBar) v.findViewById(R.id.progressbar);

            itemContext = v.getContext();

            v.setOnClickListener(this);
        }

        @Override
        public void onClick(View v){

            Intent intent= new Intent(itemContext, DetailCardLayout.class);
            Integer position = getAdapterPosition();
            intent.putExtra("CARDVIEW_POSITION", position);
            v.getContext().startActivity(intent);

        }
    }

That helps! However the ripple effect only works for two clicks. i.e. click a cardview, goes to the next screen and press back. repeat. then when you click a third time no more ripple effect — DessertsAndStuff, Feb 18 '17 at 17:43
https://stackoverflow.com/questions/26942434/ripple-effect-on-android-lollipop-cardview — Ram, Aug 13 '21 at 12:33

score 11 · Answer 1 · answered Oct 05 '17 at 07:12

Your card view contains relative layout which covers the card view surface, so write ripple effect in relative layout.

<android.support.v7.widget.CardView 
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardPreventCornerOverlap="false"
    app:cardElevation="2dp"
    app:cardUseCompatPadding="false"
    app:cardCornerRadius="2dp"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginLeft="8dp"
    >
    <RelativeLayout
        android:id="@+id/rl_bookmark"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"> ...

score 2 · Answer 2 · answered Feb 18 '17 at 17:59

2

Try to Add

android:clickable="true"

to your card view xml

answered Feb 18 '17 at 17:59

Atef Hares

4,715
3
29
61

That seems to help. However, when I scroll to see more (2 cards take up a screen) the ripple effect doesn't seem to work after the first two cards. – DessertsAndStuff Feb 18 '17 at 18:04

score 0 · Answer 3 · answered Mar 14 '17 at 00:12

Try wrapping your image in a FrameLayout with a foreground attribute of: android:foreground="?attr/selectableItemBackground"

E.g.

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:foreground="?attr/selectableItemBackground"
        >

        <ImageView
            android:id="@+id/pet_image"
            android:layout_width="match_parent"
            android:layout_height="210dp"
            android:layout_alignParentTop="true"
            android:scaleType="centerCrop"
            android:src="@drawable/placeholder"
            android:visibility="gone"
             />

    </FrameLayout>

score 0 · Answer 4 · answered May 27 '20 at 01:19

Another way to solve this: Using a Button Style

Add the Borderless Button Style to the root element of your layout. There's no need for focusable or clickable attributes, the default styling encapsulates all that for you.

<androidx.constraintlayout.widget.ConstraintLayout
    style="@android:style/Widget.Material.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

NOTE: Add the style to the ViewGroup in your CardView that houses other views

score 0 · Answer 5 · answered Nov 05 '20 at 06:04

Just add background to your child view inside MaterialCardView.

android:background="?attr/selectableItemBackground"

<com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:background="@color/white">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/item_view"
            android:layout_width="match_parent"
            android:background="?attr/selectableItemBackground"
            android:layout_height="wrap_content" >

    // -> rest of your design

  </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView

Cardview ripple effect doesn't work

5 Answers5

Another way to solve this: Using a Button Style

Linked