How to make text fade in and out in Android?

Question

I have a paragraph of text and when a button is clicked I want that text to fade out, change to some other text, then fade back in. I have some code but it doesn\'t do the fade

Answer 1

If you want to use Animation, you can use an AnimatorListener to listen for when the first animation is done, and then start the second animation. That would be onAnimationEnd().

More information available here: http://developer.android.com/reference/android/animation/Animator.AnimatorListener.html

There might be a better way to do it with AnimationSet, but this works for sure.

Answer 2

When I have an amount of texts to FadeIn / FadeOut , I prefere use a function to do this:

protected void onCreate(Bundle savedInstanceState) {
{
...
//Declare the array of texts:
String aSentences[]={"Sentence 1", "Sentence 2", "<b><i>Sentence 3</i></b>"};
TextView tView = (TextView)findViewById(R.id.Name_TextView_Object);

//call the function:
animateText(tView,aSentences,0,false);
}

private void animateText(final TextView textView, final String texts[], final int textIndex, final boolean forever) {
        //textView <-- The View which displays the texts
        //texts[] <-- Holds R references to the texts to display
        //textIndex <-- index of the first text to show in texts[]
        //forever <-- If equals true then after the last text it starts all over again with the first text resulting in an infinite loop. You have been warned.

        int fadeInDuration = 1000; // Configure time values here
        int timeBetween = 5000;
        int fadeOutDuration = 2000;

        textView.setVisibility(View.INVISIBLE);    //Visible or invisible by default - this will apply when the animation ends
        textView.setText(Html.fromHtml(texts[textIndex]));

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

        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator()); // and this
        fadeOut.setStartOffset(fadeInDuration + timeBetween);
        fadeOut.setDuration(fadeOutDuration);

        AnimationSet animation = new AnimationSet(false); // change to false
        animation.addAnimation(fadeIn);
        if((texts.length-1) != textIndex) animation.addAnimation(fadeOut);
        animation.setRepeatCount(1);
        textView.setAnimation(animation);

        animation.setAnimationListener(new Animation.AnimationListener() {
            public void onAnimationEnd(Animation animation) {
                if (texts.length -1 > textIndex) {
                    animateText(textView, texts, textIndex + 1,forever); //Calls itself until it gets to the end of the array
                }
                else {
                    textView.setVisibility(View.VISIBLE);
                    if (forever == true){
                        animateText(textView, texts, 0,forever);  //Calls itself to start the animation all over again in a loop if forever = true
                    }
                    else
                        {//do something when the end is reached}
                }
            }
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
            }
            public void onAnimationStart(Animation animation) {
                // TODO Auto-generated method stub
            }
        });
    }

Answer 3

You seem to be setting the animation to in right after you had set it to out. This makes only the "in" animation work.

To make the second animation start right after the first, you can add a listener to your first animation:

out.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationEnd(Animation animation) {
        mSwitcher.setText("New Text");
        mSwitcher.startAnimation(in);

    }
});

Then, in your onClick() method:

public void onClick(View v) {

    mSwitcher.startAnimation(out);

}

That should do the trick.

---

Another approach is to use AnimationSet.

final Animation in = new AlphaAnimation(0.0f, 1.0f);
in.setDuration(3000);

final Animation out = new AlphaAnimation(1.0f, 0.0f);
out.setDuration(3000);

AnimationSet as = new AnimationSet(true);
as.addAnimation(out);
in.setStartOffset(3000);
as.addAnimation(in);

Then, instead of starting out, start as.

I hope this helps!

Answer 4

There is a better way to make the same effect.

You should configure the animation to repeat in the inverse mode.

Here is an example:

    final Animation out = new AlphaAnimation(1.0f, 0.0f);
    out.setRepeatCount(Animation.INFINITE);
    out.setRepeatMode(Animation.REVERSE);
    out.setDuration(3000);
    mSwitcher.startAnimation(out);

Answer 5

to add to eboix answer... this is how I fade in text and fade out text, with delay between each fade and before fade out, (i.e right after fade in).

My XML looks like this.

    <TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal"
     android:gravity="center"
     android:text="Retrieving Result"
     android:textColor="@color/general_app_colour"
     android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
     android:id="@+id/blobText"
     android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:text="Please Wait" />

</LinearLayout>

The you use this variables in in your activity/fragment/dialogfragment, the following are the variables I used in mine...

public class Loading_Dialog extends DialogFragment {
    public String[] text = new String[]{""};
    TextView blobText;
    Animation inAnimation;
    Animation displayLength;
    Animation delayAnimation;
    Animation outAnimation;
    //duration for fade effects
    int fadeEffectDuration = 700;
    //duration for delay between fadeout and fadein
    int delayDuration = 1000;
    int displayFor = 2000;
    public String[] text = new String[]{""};

Now the objects and variables are innitialized are used like this, I used this for my dialog fragment, in the oncreateDialog method..

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    final Dialog dialog = new Dialog(getActivity(),R.style.LoadingDialogAnimation);
dialog.getWindow().setContentView(R.layout.dialog_loading);
blobText = (TextView) dialog.findViewById(R.id.blobText);
    inAnimation = new AlphaAnimation(0f, 1f);
    inAnimation.setDuration(fadeEffectDuration);        
    displayLength = new AlphaAnimation(1f, 1f);
    displayLength.setDuration(displayFor);
    delayAnimation = new AlphaAnimation(0f, 0f);
    delayAnimation.setDuration(delayDuration);
    outAnimation = new AlphaAnimation(1f, 0f);
    outAnimation.setDuration(fadeEffectDuration);
    inAnimation.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        position++;
    if(position>=text.length)
    {
        position = 0;
    }
    blobText.setText(text[position]);
}           
@Override
public void onAnimationRepeat(Animation animation) {}           
@Override
public void onAnimationEnd(Animation animation) {
    blobText.startAnimation(displayLength);
}
});

displayLength.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
    // TODO Auto-generated method stub

 }

@Override
public void onAnimationRepeat(Animation animation) {
   // TODO Auto-generated method stub

 }

@Override
public void onAnimationEnd(Animation animation) {
    // TODO Auto-generated method stub
    blobText.startAnimation(outAnimation);  
}
});

    outAnimation.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // TODO Auto-generated method stub
        blobText.startAnimation(delayAnimation);    
    }
    });
    delayAnimation.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) {
    // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    // TODO Auto-generated method stub

    }

@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
    blobText.startAnimation(inAnimation);
}
});

blobText.startAnimation(outAnimation);

Answer 6

You should consider using something like a TextSwitcher. There is a brief document on TextSwitcher in the Android documentation. What I would recommend best though is to look at the API Demos, there is a great and simple to use one of TextSwitchers. Download the API Demos and check them out for yourself, or see here.