23

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.

Mahozad
  • 18,032
  • 13
  • 118
  • 133
  • Possible duplicate of [No ripples for MaterialCardView](https://stackoverflow.com/questions/50675934/no-ripples-for-materialcardview) – Martin Zeitler Jan 10 '19 at 21:02
  • 1
    @MartinZeitler This question is opposite! I've asked how to **remove** the ripple effect. – Mahozad Jan 11 '19 at 17:39

4 Answers4

42

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.

Dr.jacky
  • 3,341
  • 6
  • 53
  • 91
Martin Zeitler
  • 1
  • 19
  • 155
  • 216
2

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

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

Abdulmajeed Alyafei
  • 558
  • 1
  • 4
  • 8
1

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>
Divyesh Tarsariya
  • 61
  • 4
-3

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;
    }
  }
}
Manager DMT
  • 1
  • 1