How to make text fade and fade in Android?

Question

I have a paragraph of text, and when the button is pressed, I want the text to disappear, change to some other text, and then disappear. I have a code, but it doesn’t make the animation fade out.

final TextView mSwitcher = (TextView) findViewById(R.id.bookContent); mSwitcher.setText("old text"); final Animation in = new AlphaAnimation(0.0f, 1.0f); in.setDuration(3000); final Animation out = new AlphaAnimation(1.0f, 0.0f); out.setDuration(3000); Button moveOn = (Button) findViewById(R.id.moveOn); moveOn.setOnClickListener( new OnClickListener() { public void onClick(View v) { mSwitcher.startAnimation(out); mSwitcher.setText("new text"); mSwitcher.startAnimation(in); } }); 

Answer 1

It seems you are setting up the animation right after you turned it off. This only does the in animation.

To start the second animation immediately 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 an 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 running out run as .

Hope this helps!

Answer 2

If you want to use Animation , you can use AnimatorListener to listen when the first animation is executed, and then start the second animation. This will be onAnimationEnd() .

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

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

Answer 3

You should use something like TextSwitcher . The Android documentation has a document on TextSwitcher . What I would recommend best is to look at the Demos API, there is a large and easy to use one of TextSwitcher s. Download the Demos API and check them out yourself or see here .

Answer 4

to add an answer to eboix ... this is how I disappear in the text and the text disappears, with a delay between each disappearance and until the disappearance, (immediately after fading).

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> 

You use these variables in your activity / fragment / dialog fragment, the following variables that I used in my ...

 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 initialized, they are used like this, I used this for my fragment of the dialogue 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 5

When I have the number of texts for FadeIn / FadeOut, I prefer to use a function for 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 } }); }