Ripple Effect on androidx.cardview.widget.CardView

Question

I am trying to add ripple effect on click of card view strangely it is not coming up?

What could be wrong here?

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="6dp"
    card_view:contentPadding="5dp"
    card_view:cardElevation="4dp"
    card_view:cardMaxElevation="6dp"
    app:ignore="NamespaceTypo"> 


</androidx.cardview.widget.CardView>

// I have a linear layout with three textview inside the cardview.

RecyclerView:

<LinearLayout
        android:id="@+id/cardViewLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:visibility="gone">

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/cardList"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    </LinearLayout>

Thanks!

Answer 1

Don't use any background/foreground in CardView. If you use any background color then, then just add app:cardBackgroundColor="@color/cardBackgroundColor. Remove any padding from the CardView. Use margin for space between items.

Now, for the ripple effect in CardView, just add an immediate child layout in your CardView. Set android:background="?attr/selectableItemBackground" in the child layout. Add any necessary padding/margin in the child if you need.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    card_view:cardCornerRadius="6dp"
    card_view:cardElevation="4dp"
    card_view:cardMaxElevation="6dp"
    app:ignore="NamespaceTypo"> 

        <!-- Child Layout -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="?attr/selectableItemBackground"
            android:orientation="vertical">

            <!-- Your content here -->
        </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>