How to remove ripple effect from MaterialCardVew?

Question

How can I disable touch ripple effect of MaterialCardView? Setting clickable attribute to false or playing with foreground and background attributes had no effect.

I'm using material support library version 1.1.0-alpha02.

Analogous

Possible duplicate of No ripples for MaterialCardView – Clincher

@MartinZeitler This question is opposite! I've asked how to remove the ripple effect. – Analogous

Answer 1

Only the rippleColor is a styleable:

<com.google.android.material.card.MaterialCardView
    style="@style/Widget.MaterialComponents.CardView"
    app:rippleColor="@android:color/transparent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

Note: It doesn't remove the ripple effect from <androidx.cardview.widget.CardView though.

Clincher

In MaterialCardView there is no rippleColor attribute. So how are you remove it? can you please explain? – Quail

@vikassingh there is. Maybe your dependency is old? try 1.1.0-beta07 – Mulholland

doesnt work on android 13 – Entirely

Answer 2

Just use this attribute in xml:
app:rippleColor="@android:color/transparent"

Or programatically in Kotlin:
cardView.rippleColor = ColorStateList.valueOf(Color.TRANSPARENT)

Sourpuss

Answer 3

You also need clickable and focusable to false to remove the ripple effect

<com.google.android.material.card.MaterialCardView
        style="@style/Widget.MaterialComponents.CardView"
        app:rippleColor="@android:color/transparent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:focusable="false">
</com.google.android.material.card.MaterialCardView>

Standice

Answer 4

You can do just using CSS like that:

.mdc-card__primary-action.card__primary-action.mdc-ripple-upgraded {
  &:hover,
  &:focus,
  &:active {
    &.mdc-card__primary-action::before,
    &.mdc-card__primary-action::after {
      background-color: rgba(255, 255, 255, 0) !important;
      opacity: 0 !important;
    }
  }
}

Zonda

This question is about android – Quaint