How to create a more natural CardView alpha animation?

Question

I have a normal CardView:

<androidx.cardview.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="256dp"
    android:layout_height="64dp"
    app:cardElevation="4dp" />

Then I animate its alpha:

cardView.animate().alpha(1f).setDuration(3000).start()

I get:

The card background first turns grey then white. If time is short, this look like a blink. It seems this only happens on a white background.

This is what I want (I create it in the Adobe XD):

How can I achieve a similar effect?

Answer 1

The grey you are seeing is the shadow of your CardView.

You can add the CardView inside another view and animate that view instead, for example:

<RelativeLayout
    android:id="@+id/animateThis"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="256dp"
        android:layout_height="64dp"
        app:cardElevation="4dp" />

</RelativeLayout>

Then animate the RelativeLayout instead:

animateThis.animate().alpha(1f).setDuration(3000).start()