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()

Answer 2

Just to share a different approach. I hope it may help others.

I have created an animation that changes alpha and elevation sequentially, to avoid showing the shadow while animating alpha.

For fade in I use:

<set android:ordering="sequentially">
        <objectAnimator
            android:duration="300"
            android:propertyName="alpha"
            android:valueTo="1"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="300"
            android:propertyName="cardElevation"
            android:valueTo="12dp"
            android:valueType="floatType" />
    </set>

For fade out I use:

<set android:ordering="sequentially">
        <objectAnimator
            android:duration="300"
            android:propertyName="cardElevation"
            android:valueTo="0dp"
            android:valueType="floatType" />
        <objectAnimator
            android:duration="300"
            android:propertyName="alpha"
            android:valueTo="0"
            android:valueType="floatType" />
    </set>