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!

Shamsul Arafin Mahtab · Accepted Answer · 2019-08-21T15:49:24.393

13

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>

edited Aug 21 '19 at 15:49

answered Aug 21 '19 at 06:54

Shamsul Arafin Mahtab

539
5
15

If I do this I don't get space between each item and I don't see the ripple effect too – Sanjana Nair Aug 21 '19 at 08:45
Sorry for my mistake. You can use `margin` in CardView for space between items. Check the updates. – Shamsul Arafin Mahtab Aug 21 '19 at 15:50
I really don't get why this is the solution ... yes it works, but feels like a hack. 1. system should automatically add ripple effect when clickable is defined, 2. ripple effect is defined by colorOnSurface https://material.io/components/cards/android#card 3. other mentions say set foreground .. https://stackoverflow.com/questions/24475150 which is the same bad hacky solution to me .. does anybody really UNDERSTAND why this is the solution and can explain it in manner of the material design and theme system? – childno͡.de Mar 10 '21 at 14:08
@childno͡.de ripples are a special kind of `Drawable` (`RippleDrawable`) that draw an effect when you touch them. They can either draw onto the bounds of their `View`, or they can be "borderless" which means they need to draw on the background of a View they're "inside" in the hierarchy. This empty layout just has a bounded ripple drawable for its background - `CardView`s have their own special background drawable (giving it the card edges) so you can't just swap that for a ripple drawable in XML. But if you set a click listener on the `CardView` it should add a ripple itself automatically – cactustictacs Jul 26 '21 at 14:12

score 2 · Answer 2 · answered Aug 03 '21 at 06:02

Existing CardView does not having ripple effect, use MaterialCardView it has ripple effect.

here is the sample code for MaterialCardView

<com.google.android.material.card.MaterialCardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="100dp"
        android:layout_height="115dp"
        app:cardCornerRadius="6dp"
        app:cardElevation="6dp"
        android:id="@+id/myCard"
        android:clickable="true"
        android:focusable="true">

<!-- Your child layout -->

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

score 0 · Answer 3 · answered Mar 18 '21 at 20:36

Please use com.google.android.material.card.MaterialCardView in favor of androidx.cardview.widget.CardView that will give that function out of the box.

Background: https://developer.android.com/jetpack/androidx/releases/cardview is the new base superseding https://developer.android.com/topic/libraries/support-library/packages#v7-cardview and Material Components https://developer.android.com/reference#other-libraries are build on top of androidx.cardview using foreground and rippleColor as defined per https://material.io/components/cards/android#card anatomy ... so check out if you customize your ?attr/colorSurface, ?attr/colorOnSurface or app:cardForegroundColor to set matching values each other for a visible change

But: sounds like there are new issues with that like https://github.com/material-components/material-components-android/issues/1095 ‍♂️ and the code documentation seems to be a bit weired anyway https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/card/MaterialCardView.java#L303

Ripple Effect on androidx.cardview.widget.CardView

3 Answers3

Linked