Android TextView Text Fade Animation : Automatic Fade-in, Fade-out of lines from an array of strings

Continuing from the last post about creating fade in fade out animations for textviews in Android, this post will focus on creating an Animator class that can be reused easily from any part of your code for sleekly animating textviews.



First, Create your Custom Textview Animator class, here I call mine "KunmiViewFade_Animator";

1:  public class KunmiViewFade_Animator   
2:  {  
3:  }  

Next, declare your needed variables, which in this case are,

• A textview, that will hold the reference to the textview object you wish to animate.
• A collection of texts you want to fade into and out of each other, in this example a string array
• 4 Animation objects (need for them will be explained later).
• The duration of animation for the three animation object.

      TextView blobText;  
      public String[] text = new String[] { "" };  
      public int position = 0;  
      Animation fadeiInAnimationObject;  
      Animation textDisplayAnimationObject;  
      Animation delayBetweenAnimations;  
      Animation fadeOutAnimationObject;  
      int fadeEffectDuration;  
      int delayDuration;  
      int displayFor;  

as shown above, the four animation objects are needed to provide the fade-in animation, fade-out animation, a place holder to delay next animation, and another to to keep the text displayed for the duration before fade-out animation kicks in.

Next we build it's constructors, passing all necessary initialization parameters to it;

     
public KunmiViewFade_Animator(TextView textV, String[] textList)  
      {  
           this(textV,700,1000,2000, textList);  
      }  
      public KunmiViewFade_Animator(TextView textView, 
        int fadeEffectDuration, 
        int delayDuration, 
        int displayLength, 
        String[] textList )  
      {  
           blobText = textView;  
           text = textList;  
           this.fadeEffectDuration = fadeEffectDuration;  
           this.delayDuration = delayDuration;  
           this.displayFor = displayLength;  
           InnitializeAnimation();  
      }  

As shown above our variables have all been initialized, the InnitializeAnimation method is where all the work is done, in here we'll initialize our animation objects and use their animation listeners to string up the animation for a sleek looking text animation;

      private void InnitializeAnimation()  
      {  
           fadeiInAnimationObject = new AlphaAnimation(0f, 1f);  
           fadeiInAnimationObject.setDuration(fadeEffectDuration);            
           textDisplayAnimationObject = new AlphaAnimation(1f, 1f);  
           textDisplayAnimationObject.setDuration(displayFor);  
           delayBetweenAnimations = new AlphaAnimation(0f, 0f);  
           delayBetweenAnimations.setDuration(delayDuration);  
           fadeOutAnimationObject = new AlphaAnimation(1f, 0f);  
           fadeOutAnimationObject.setDuration(fadeEffectDuration);  
           fadeiInAnimationObject.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(textDisplayAnimationObject);  
                }  
           });  
           textDisplayAnimationObject.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(fadeOutAnimationObject);       
                }  
           });  
           fadeOutAnimationObject.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(delayBetweenAnimations);       
                }  
           });  
           delayBetweenAnimations.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(fadeiInAnimationObject);  
                }  
           });  
      }  

From the method above, it can be seen that the animation objects are all linked together, the new line to b faded in is changed in the "onAnimationStart" of the "fadeinAnimationObject". 

Next we create a method to kick-start the animation, sample of such is outlined below;

      public void startAnimation()  
      {  
           blobText.startAnimation(fadeOutAnimationObject);       
      }  

As seen, the first animation object started of the lot is the fadeout animation, this to enable the initial text of the textview to fadeoff, before the ones in our string array source are called;

To use this class, just pass a text view to it from your activity/fragments class, and call the startAnimation method as outlined below;

     TextView introText = (TextView) loginDialog.findViewById(R.id.blobText);  
      KunmiViewFade_Animator animator = new KunmiViewFade_Animator(introText, new String[]{  
                          "Hello user!",  
                          "Have a NijaSpoon account?",  
                          "You can log in with your NijaSpoon Account",  
                          "or sign up using Facebook",  
                          "NijaSpoon",  
                          "Real Food, in Real Time"});  
     animator.startAnimation();  

so, there it is, give it a pop.... :D