CODEWITHSUNDEEP
androidmaterial-designmaterial-components-android
Oliver Adam
Oliver Adam

Reputation: 303

Android material CardView ripple effect changes content color

I recently moved from using custom card components to material design 3 cards. To my surprise, the ripple color, when pressing on the card, changes the content color. I tried this on the catalog project of the material-design-components repository and the card behaves the same way. My current code for changing the ripple color and the card background:

<style name="Widget.App.Card.Filled" parent="Widget.Material3.CardView.Filled">
   <item name="rippleColor">#4D4D4D</item>
   <item name="cardBackgroundColor">@android:color/transparent</item>
</style>

I also got a demo showing this behavior: https://i.imgur.com/t4WW4CY.mp4. The font color changes to a light gray based on the ripple effect. I am also using material buttons but there the ripple effect is not affecting the content. I am using the version 1.5.0-rc01.

Does anyone have an idea if that is intended and how I can only change the background color on press using the attributes given by the material design components.

Update:

My card view XML (its the one from the material-components github + custom style):

<com.google.android.material.card.MaterialCardView
      style="@style/Widget.App.Card.Filled"
      android:id="@+id/card"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="0.4"
      android:layout_margin="16dp"
      android:clickable="true"
      android:focusable="true"
      app:contentPadding="@dimen/cat_card_content_padding">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/cat_card_states_card_content"
        android:textAppearance="?attr/textAppearanceBody1"/>
  </com.google.android.material.card.MaterialCardView>

Upvotes: 0

Views: 986

Answers (1)

DrHowdyDoo
DrHowdyDoo

Reputation: 2797

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

Upvotes: 1

Related Questions