How to create a more natural CardView alpha animation?

user_5507158 0
Viewed 1159

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:

enter image description here

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

enter image description here

How can I achieve a similar effect?

android-cardview android-animation android
3 Answers

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

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>
user_49654700

fadein.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />

</set>

 Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_in);
        cardView.startAnimation(animFadein);
user_57730440
Related