Ripple Effect on Android Lollipop Cardview

Ripple effect on Android Lollipop CardView

You should add following to CardView:

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

Ripple Effect on androidx.cardview.widget.CardView

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>

Setting Ripple effect to RecyclerView CardView item without having to double tap for an item action

I solved this by totally removing android:focusableInTouchMode = "true" & android:foreground from the CardView, and adding the ripple effect to the root item within the CardView with android:background="?android:attr/selectableItemBackground"

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/margin_8dp"
    app:cardBackgroundColor="@color/cyan"
    app:cardCornerRadius="20dp"
    app:cardElevation="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground"
        android:padding="@dimen/margin_8dp">

            <!-- Underlying views-->

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

Android material CardView ripple effect changes content color

I think this is happening because of the ripple color applying to the foreground instead of background. So yeah this is intended and i don't think you can change that.

Have a look at the source code : MaterialCardViewHelper.java

Note : This does not happen in buttons bcoz buttons applies ripple to the background instead of foreground.

Source code for button : MaterialButtonHelper.java

Native Round Ripple Effect For ImageView

You should use

android:background="?attr/selectableItemBackgroundBorderless"

---

Related Topics