TextView animation - fade in, wait, fade out

Question

I am making a picture gallery app. I current have a imageview with a text view at the bottom. Currently it is just semitransparent. I want to make it fade in, wait 3 second, then fade out 90%. Bringing focus to it or loading a new pic will make it repeat the cycle. I have read thru a dozen pages and have tried a few things, no success. All I get is a fade in and instant fade out

score 63 · Answer 1 · edited Jan 16 '13 at 10:50

protected AlphaAnimation fadeIn = new AlphaAnimation(0.0f , 1.0f ) ; 
protected AlphaAnimation fadeOut = new AlphaAnimation( 1.0f , 0.0f ) ; 
txtView.startAnimation(fadeIn);
txtView.startAnimation(fadeOut);
fadeIn.setDuration(1200);
fadeIn.setFillAfter(true);
fadeOut.setDuration(1200);
fadeOut.setFillAfter(true);
fadeOut.setStartOffset(4200+fadeIn.getStartOffset());

Works perfectly for white backgrounds. Otherwise, you need to switch values when you instantiate AlphaAnimation class. Like this:

AlphaAnimation fadeIn = new AlphaAnimation( 1.0f , 0.0f ); 
AlphaAnimation fadeOut = new AlphaAnimation(0.0f , 1.0f );

This works with black background and white text color.

score 13 · Answer 2 · answered Jun 16 '19 at 23:52

Kotlin Extension functions for Guy Cothal's answer:

inline fun View.fadeIn(durationMillis: Long = 250) {
    this.startAnimation(AlphaAnimation(0F, 1F).apply {
        duration = durationMillis
        fillAfter = true
    })
}

inline fun View.fadeOut(durationMillis: Long = 250) {
    this.startAnimation(AlphaAnimation(1F, 0F).apply {
        duration = durationMillis
        fillAfter = true
    })
}

score 9 · Answer 3 · answered May 26 '17 at 09:41

That's the solution that I've used in my project for looping fade-in/fade-out animation on TextViews:

private void setUpFadeAnimation(final TextView textView) {
    // Start from 0.1f if you desire 90% fade animation
    final Animation fadeIn = new AlphaAnimation(0.0f, 1.0f);
    fadeIn.setDuration(1000);
    fadeIn.setStartOffset(3000);
    // End to 0.1f if you desire 90% fade animation
    final Animation fadeOut = new AlphaAnimation(1.0f, 0.0f);
    fadeOut.setDuration(1000);
    fadeOut.setStartOffset(3000);

    fadeIn.setAnimationListener(new Animation.AnimationListener(){
        @Override
        public void onAnimationEnd(Animation arg0) {
            // start fadeOut when fadeIn ends (continue)
            textView.startAnimation(fadeOut);
        }

        @Override
        public void onAnimationRepeat(Animation arg0) {
        }

        @Override
        public void onAnimationStart(Animation arg0) {
        }
    });

    fadeOut.setAnimationListener(new Animation.AnimationListener(){
        @Override
        public void onAnimationEnd(Animation arg0) {
            // start fadeIn when fadeOut ends (repeat)
            textView.startAnimation(fadeIn);
        }

        @Override
        public void onAnimationRepeat(Animation arg0) {
        }

        @Override
        public void onAnimationStart(Animation arg0) {
        }
    });

    textView.startAnimation(fadeOut);
}

Hope this could help!

If you wanted to animate fade-in fade-out texts from String array, where would you set the text here? — karthik prasad, Dec 08 '18 at 22:12

score 4 · Accepted Answer · answered Apr 05 '14 at 23:46

You can use an extra animation object (which doesn't modify its alpha) to prevent the instant fade out, set animationListener for your fade-in effect and start the extra animation object in the on animationEnd of the fade-in, then you start fade-out on animation end of the extra animation object, try the link below, it'll help..

Auto fade-effect for textview

galloper · Answer 5 · 2020-03-24T08:47:20.380

I was searching for a solution to similar problem (TextView fade in/wait/fade out) and came up with this one (in fact, the official docs point to this too). You can obviously improve this by adding more params.

public void showFadingText(String text){
    txtView.setText(text);
    Runnable endAction;
    txtView.animate().alpha(1f).setDuration(1000).setStartDelay(0).withEndAction(
            endAction = new Runnable() {
                public void run() {
                    txtView.animate().alpha(0f).setDuration(1000).setStartDelay(2000);
                }
            }
    );
}

Provided you have txtView declared somewhere else with alpha starting at zero.

TextView animation - fade in, wait, fade out

5 Answers5

Linked