Fade In Fade Out Android Animation in Java

Question

I want to have a 2 second animation of an ImageView that spends 1000ms fading in and then 1000ms fading out.

Here's what I have so far in my ImageView constructor:

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setDuration(1000);

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);

AnimationSet animation = new AnimationSet(true);
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
this.setAnimation(animation);

When I run that animation, nothing shows up. However, when I remove one of the alpha animations, the behavior works as expected.

Things I have already tried:

Every conceivable combination of setFillBefore, setFillAfter, and setFillEnabled.
Adding a LinearInterpolator to the AnimationSet.

Yes you can fade images in and out! This tutorial should do the trick. sankarganesh-info-exchange.blogspot.com/2011/04/… — Adam Storm
– Adam Storm, Commented Jul 22, 2011 at 22:40
That tutorial describes a method using XML. Do you know how to achieve the same thing using Java? — plowman
– plowman, Commented Jul 23, 2011 at 0:30
Well, Im not next to my programming computer so I cant test this code, but you can set xml attributes in java. this is the original code: android:interpolator="@android:anim/accelerate_interpolator" android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" /> \n so you can probably MyTween.setDurationg(300) MyTween.fromAlpha(0.0) MyTween(1.0) — Adam Storm
– Adam Storm, Commented Jul 23, 2011 at 17:27

Leonardo Sibela · Accepted Answer · 2019-02-27 05:01:31Z

290

Figured out my own problem. The solution ended up being based in interpolators.

Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);

Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);

AnimationSet animation = new AnimationSet(false); //change to false
animation.addAnimation(fadeIn);
animation.addAnimation(fadeOut);
this.setAnimation(animation);

If you are using Kotlin

val fadeIn = AlphaAnimation(0f, 1f)
fadeIn.interpolator = DecelerateInterpolator() //add this
fadeIn.duration = 1000

val fadeOut = AlphaAnimation(1f, 0f)
fadeOut.interpolator = AccelerateInterpolator() //and this
fadeOut.startOffset = 1000
fadeOut.duration = 1000

val animation = AnimationSet(false) //change to false
animation.addAnimation(fadeIn)
animation.addAnimation(fadeOut)
this.setAnimation(animation)

edited Feb 27, 2019 at 5:01

Leonardo Sibela

2,2391 gold badge26 silver badges60 bronze badges

answered Jul 25, 2011 at 20:43

plowman

13.7k8 gold badges58 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chayy Over a year ago

What if you want to do 5 or 6 fading in/out, with really small delays like 100 for each, could you use something like this ? I tried but it's not really fluid. The aim was to simulate for example a bulb that would not work properly, and twinkle.

Jono Over a year ago

try and call this.setAnimation in a loop

macio.Jun Over a year ago

I was thinking I fade out last bg img and fad in the current one, but this answer inspires me that I only need to fade in the current bg img and fade out the current one, cause AlphaAnimation can't fadein/out two different imgs.

RoundSparrow hilltx Over a year ago

I don't think you need to have two independent animations... I think you could have a single animation and set the parameter: fadeInOut.setRepeatMode(Animation.REVERSE);

RoundSparrow hilltx Over a year ago

Second: if you wanted to repeat, no need to call in a loop like @jonney said. use fadeInOut.setRepeatCount(6) - change 6 to be how many you wish it to repeat. Much less overhead to let the native C++ code in Android do all this instead of calling in a Java loop.

|

Blue Bot · Accepted Answer · 2017-12-03 14:03:56Z

166

I know that this already has been answered but.....

<?xml version="1.0" encoding="utf-8"?> 
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0" 
    android:toAlpha="0.0" 
    android:duration="1000"    
    android:repeatCount="infinite" 
    android:repeatMode="reverse"
    />

Quick and easy way to quickly do a fade in and out with a self repeat. Enjoy

EDIT : In your activity add this:

yourView.startAnimation(AnimationUtils.loadAnimation(co‌ntext, R.anim.yourAnimation));

edited Dec 3, 2017 at 14:03

Blue Bot

2,4585 gold badges27 silver badges34 bronze badges

answered Aug 30, 2012 at 19:08

Konrad Winkowski

2,0421 gold badge13 silver badges15 bronze badges

5 Comments

ElYeante Over a year ago

+1 Because with this answer I could make a secuence of fade in, fade out and fade in (just setting repeatCount="2"). I couldn't concatenating animations as the accepted answer proposes.

zozelfelfo Over a year ago

After declaring this alpha resource how can I use it?. Thanks

Konrad Winkowski Over a year ago

zozelfelfo it is just a animation xml so load it into code and then call startAnimation on whatever view you want it to affect.

Ahmad Vatani Over a year ago

@KonradWinkowski startAnimation method requires Animation object as argument! what should i pass to it?

Chris Knight Over a year ago

For those looking for a more complete answer: viewToAnimate.startAnimation(AnimationUtils.loadAnimation(context, R.anim.fade_in_out), where there is a fade_in_out.xml file in the anim folder under res.

Vitaly Zinchenko · Accepted Answer · 2015-10-07 18:06:36Z

39

viewToAnimate.animate().alpha(1).setDuration(1000).setInterpolator(new DecelerateInterpolator()).withEndAction(new Runnable() {
    @Override
    public void run() {
        viewToAnimate.animate().alpha(0).setDuration(1000).setInterpolator(new AccelerateInterpolator()).start();
    }
}).start();

answered Oct 7, 2015 at 18:06

Vitaly Zinchenko

4,9315 gold badges38 silver badges54 bronze badges

2 Comments

Eddie Over a year ago

Elegante for Marshmallow!

zkon Over a year ago

An important point to note is that you need to reset the setStartDelay() to 0 in the first animation if you are using it in the second animation to delay its start. Else it remembers that delay for any subsequent animation.

TWilly · Accepted Answer · 2014-08-27 20:02:01Z

28

Here is my solution using AnimatorSet which seems to be a bit more reliable than AnimationSet.

// Custom animation on image
ImageView myView = (ImageView)splashDialog.findViewById(R.id.splashscreenImage);

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(myView, "alpha",  1f, .3f);
fadeOut.setDuration(2000);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(myView, "alpha", .3f, 1f);
fadeIn.setDuration(2000);

final AnimatorSet mAnimationSet = new AnimatorSet();

mAnimationSet.play(fadeIn).after(fadeOut);

mAnimationSet.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        mAnimationSet.start();
    }
});
mAnimationSet.start();

answered Aug 27, 2014 at 20:02

TWilly

4,9533 gold badges47 silver badges75 bronze badges

3 Comments

Andrew Orobator Over a year ago

I had to use an ObjectAnimator instead of an Animation to get a working solution because for some reason, whenever I started an AlphaAnimation, it ran twice and did some weird flickering.

Vlad Over a year ago

elegant solution

Bhavesh Moradiya Over a year ago

Well, its too late but I think this might be help some, kindly clear animation before use it again on same view..

MarsPeople · Accepted Answer · 2016-12-23 18:18:26Z

Another alternative:

No need to define 2 animation for fadeIn and fadeOut. fadeOut is reverse of fadeIn.

So you can do this with Animation.REVERSE like this:

AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setDuration(1000);
alphaAnimation.setRepeatCount(1);
alphaAnimation.setRepeatMode(Animation.REVERSE);
view.findViewById(R.id.imageview_logo).startAnimation(alphaAnimation);

then onAnimationEnd:

alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
        public void onAnimationStart(Animation animation) {
            //TODO: Run when animation start
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            //TODO: Run when animation end
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            //TODO: Run when animation repeat
        }
    });

DarkCygnus · Accepted Answer · 2018-04-26 06:12:37Z

17

As I believe in the power of XML (for layouts), this is the equivalent for the accepted answer, but purely as an animation resource:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:fillAfter="true">
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="1000" />
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="1000"
        android:startOffset="1000"/>
</set>

The fillAfter is for the fade to remain after completing the animation. The interpolator handles interpolation of the animations, as you can guess. You can also use other types of interpolators, like Linear or Overshoot.

Be sure to start your animation on your view:

yourView.startAnimation(AnimationUtils.loadAnimation(co‌ntext, R.anim.fade));

edited Apr 26, 2018 at 6:12

answered Apr 26, 2018 at 6:05

DarkCygnus

7,8884 gold badges39 silver badges63 bronze badges

2 Comments

DarkCygnus Over a year ago

@KGCybeX no problem, glad I could help :)

Fernando Barbosa Over a year ago

Very helpful and clean. Works perfectly for me.

Cristhian Escobar · Accepted Answer · 2015-10-21 17:19:09Z

Here is what I used to fade in/out Views, hope this helps someone.

private void crossFadeAnimation(final View fadeInTarget, final View fadeOutTarget, long duration){
    AnimatorSet mAnimationSet = new AnimatorSet();
    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(fadeOutTarget, View.ALPHA,  1f, 0f);
    fadeOut.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            fadeOutTarget.setVisibility(View.GONE);
        }

        @Override
        public void onAnimationCancel(Animator animation) {
        }

        @Override
        public void onAnimationRepeat(Animator animation) {
        }
    });
    fadeOut.setInterpolator(new LinearInterpolator());

    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(fadeInTarget, View.ALPHA, 0f, 1f);
    fadeIn.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            fadeInTarget.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {}

        @Override
        public void onAnimationCancel(Animator animation) {}

        @Override
        public void onAnimationRepeat(Animator animation) {}
    });
    fadeIn.setInterpolator(new LinearInterpolator());
    mAnimationSet.setDuration(duration);
    mAnimationSet.playTogether(fadeOut, fadeIn);
    mAnimationSet.start();
}

Somehow this is the only answer that includes setting visibility, nice

Linh · Accepted Answer · 2018-06-29 00:44:42Z

11

If you use Animator for make animation you can

anim (directory) -> fade_out.xml

<?xml version="1.0" encoding="UTF-8"?>
<objectAnimator
    android:propertyName="alpha"
    android:valueFrom="0"
    android:valueTo="1"
    xmlns:android="http://schemas.android.com/apk/res/android"/>

In java

Animator animator = AnimatorInflater.loadAnimator(context, R.animator.fade_out);
animator.setTarget(the_view_you_want_to_animation);
animator.setDuration(1000);
animator.start();

Other way to make animation fade out with only java code is

ObjectAnimator fadeOut = ObjectAnimator.ofFloat(the_view_you_want_to_animation, "alpha",  1f, 0);
fadeOut.setDuration(2000);
fadeOut.start();

edited Jun 29, 2018 at 0:44

answered Jun 8, 2017 at 1:32

Linh

61.3k25 gold badges274 silver badges298 bronze badges

3 Comments

LeTadas Over a year ago

in directory anim* not animator

Pat Lee Over a year ago

@LeTadas in directory animator, according to Android Studio

Pat Lee Over a year ago

android:duration="1000"

Richard · Accepted Answer · 2012-12-07 14:28:18Z

10

AnimationSets don't appear to work as expected at all. In the end I gave up and used the Handler class's postDelayed() to sequence animations.

answered Dec 7, 2012 at 14:28

Richard

1,86317 silver badges18 bronze badges

Comments

Ziem · Accepted Answer · 2015-05-01 18:18:27Z

4

You can also use animationListener, something like this:

fadeIn.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationEnd(Animation animation) {
        this.startAnimation(fadeout);
    }
});

edited May 1, 2015 at 18:18

Ziem

6,7078 gold badges57 silver badges86 bronze badges

answered Sep 25, 2013 at 20:49

Omid Aminiva

6675 silver badges14 bronze badges

Comments

Marc · Accepted Answer · 2020-06-25 22:53:06Z

4

I really like Vitaly Zinchenkos solution since it was short.

Here is an even briefer version in kotlin for a simple fade out

viewToAnimate?.alpha = 1f
viewToAnimate?.animate()
             ?.alpha(0f)
             ?.setDuration(1000)
             ?.setInterpolator(DecelerateInterpolator())
             ?.start()

answered Jun 25, 2020 at 22:53

Marc

1,1791 gold badge18 silver badges32 bronze badges

Comments

fixitfeliks · Accepted Answer · 2023-03-19 20:03:14Z

0

Here is another alternative in Kotlin

Done progamatically using ObjectAnimator

Uses only one animation

Does not muck with the animation listeners

private fun getFadeAnimation(v: View?): ObjectAnimator 
  return ObjectAnimator.ofFloat(v, "alpha", .3f, 1f).apply {
      repeatCount = ObjectAnimator.INFINITE
      repeatMode = ObjectAnimator.REVERSE
      duration = 1000
  }
}

Create only one instance in the activity and then use:

val animator = getFadeAnimator(myView)
animator.start()
animator.end()

edited Mar 19, 2023 at 20:03

answered Mar 19, 2023 at 20:02

fixitfeliks

11 bronze badge

Comments

Katherina Loren · Accepted Answer · 2023-09-15 17:14:36Z

0

Create an "anim" directory in it:

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="1000" >

Create an "anim" directory in it:

val fadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in)
    imageView.startAnimation(fadeIn)

answered Sep 15, 2023 at 17:14

Katherina Loren

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

President James K. Polk · Accepted Answer · 2025-07-03 23:55:28Z

0

class SplashActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_splash)

        val logo = findViewById\<ImageView\>(R.id.logoImage)

        val animation = AnimationUtils.loadAnimation(this, R.anim.fade_in)

        logo.startAnimation(animation)

        Handler(Looper.getMainLooper()).postDelayed({

            val intent = Intent(this, MainActivity::class.java)

            startActivity(intent)

            overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out)

            finish()

        }, 2000)

    }

}

edited Jul 3 at 23:55

President James K. Polk

42.3k34 gold badges113 silver badges149 bronze badges

answered Jul 3 at 8:21

Thanapoom

1

1 Comment

Nguyen Tien Dung Jul 3 at 10:22

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Fade In Fade Out Android Animation in Java

14 Answers 14

If you are using Kotlin

7 Comments

5 Comments

2 Comments

3 Comments

Comments

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

If you are using Kotlin

7 Comments

5 Comments

2 Comments

3 Comments

Comments

2 Comments

1 Comment

3 Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related