How to create a more natural CardView alpha animation?

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?

2 answers

  • answered 2019-06-25 04:30 Zachary

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

  • answered 2019-06-25 04:48 HB.

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