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?

It's because your animation is slow. You will get the exact same in Adobe XD when you reduce the speed of the animation. If you think about it, white with an opacity of 50% = grey... — HB., Jun 25 '19 at 04:08
@HB. I can't get the exact same in Adobe XD even if I change animation duration to 0.1s. How do you do it? I don't think 50% opacity white == grey. They're two different colors. — Dewey Reed, Jun 25 '19 at 04:23

score 3 · Accepted Answer · edited Jun 25 '19 at 06:14

3

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

edited Jun 25 '19 at 06:14

Dewey Reed

4,353
2
27
41

answered Jun 25 '19 at 04:48

HB.

4,116
4
29
53

This works! But we get another problem like this question: https://stackoverflow.com/questions/54646927/strange-shadow-behavior-during-alpha-animation but that seems CardView's problem. – Dewey Reed Jun 25 '19 at 05:25
1

@DeweyReed looking at the issue tracker, it seems to be an issue with `CardView`. You can star that post to get the issue resolved quicker. – HB. Jun 25 '19 at 05:30

score 2 · Answer 2 · answered Jul 12 '21 at 15:28

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>

score 0 · Answer 3 · answered Jun 25 '19 at 04:30

0

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 Jun 25 '19 at 04:30

Anupam

2,845
2
16
30

Try this. I have just tested it. It works the way you wanted. You can change android:fromAlpha based on your requirement. 0.0f to 1.0f – Anupam Jun 25 '19 at 04:34
I can't make it work with this solution and still get the grey at the beginning. How did you do it? – Dewey Reed Jun 25 '19 at 05:16
There is a difference here. It is android:interpolator="@android:anim/accelerate_interpolator" which makes it smooth. You have to make Card elevation and translation to 0dp. – Anupam Jun 25 '19 at 05:17
I get you but I need the elevation. That's why I use a CardView. As long as I add 1dp elevation, the grey is shown. – Dewey Reed Jun 25 '19 at 05:23
Try using translationZ instead of elevation – Anupam Jun 25 '19 at 05:41
translationZ still doesn't help. BTW, the accepted answer works. – Dewey Reed Jun 25 '19 at 06:08

How to create a more natural CardView alpha animation?

3 Answers3