CrossFading Animation in Android Using Android Studio

Introduction

 
This article explains cross fade animation in Android using Android Studio. In this you will first use two Textviews and a Button inside a relative layout in your XML file. On a button click you need to perform the cross_fade animation.
 
To perform cross fade animation you need to create two XML files inside the res folder, fade_in and fade_out.
 
Inside the fade_out folder you will write alpha animation because you need to fade_out one TextView as in the following:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:fillAfter="true" >   
  4.     <alpha  
  5.         android:duration="1000"  
  6.         android:fromAlpha="1.0"  
  7.         android:interpolator="@android:anim/accelerate_interpolator"  
  8.         android:toAlpha="0.0" />   
  9. </set> 
Inside the fade_In folder you will write alpha animation because you need to fade_in one TextView as in the following:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:fillAfter="true" >  
  4.     <alpha  
  5.         android:duration="1000"  
  6.         android:fromAlpha="0.0"  
  7.         android:interpolator="@android:anim/accelerate_interpolator"  
  8.         android:toAlpha="1.0" />  
  9. </set> 
In the Java Class file, you will first create the two Animation objects, FadeIn and FadeOut. In these objects, you will load the animations fade_in and fade_out by calling the loadAnimation() method of the AniamtionUtills class.
  1. FadeIn = AnimationUtils.loadAnimation(getApplicationContext()R.anim.fade_in);  
  2. FadeOut = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out); 
Step 1
 
Create an XML file and write this:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.         android:background="#ff8769">  
  7.      
  8.     <TextView android:id="@+id/txtView1"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:text="Fade In Text"  
  12.         android:layout_centerInParent="true"  
  13.         android:textSize="25dp"  
  14.             android:textStyle="italic"/>  
  15.          
  16.     <TextView android:id="@+id/txtView2"  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:text="Fade Out Text"  
  20.         android:layout_centerInParent="true"  
  21.         android:textSize="25dp"  
  22.         android:visibility="gone"  
  23.             android:textStyle="italic"/>  
  24.          
  25.     <Button android:id="@+id/btnAnimation"  
  26.         android:layout_width="wrap_content"  
  27.         android:layout_height="wrap_content"  
  28.         android:text="Start Animation"  
  29.         android:layout_marginTop="30dp"  
  30.         android:layout_alignParentBottom="true"  
  31.         android:layout_centerHorizontal="true"  
  32.         android:layout_marginBottom="20dp"/>  
  33.    
  34. </RelativeLayout> 
Step 2
 
Fade_in XML file:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:fillAfter="true" >   
  4.     <alpha  
  5.         android:duration="1000"  
  6.         android:fromAlpha="0.0"  
  7.         android:interpolator="@android:anim/accelerate_interpolator"  
  8.         android:toAlpha="1.0" />  
  9. </set> 
Step 3
 
Fade_out XML file:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:fillAfter="true" >  
  4.  <alpha  
  5.         android:duration="1000"  
  6.         android:fromAlpha="1.0"  
  7.         android:interpolator="@android:anim/accelerate_interpolator"  
  8.         android:toAlpha="0.0" />  
  9.  </set> 
Step 4
 
Create a Java file and write this:
 
In the Java Class file, you will first create the two Animation objects FadeIn and FadeOut. In these objects, you will load the animations fade_in and fade_out by calling the loadAnimation() method of the AniamtionUtills class. Set the animation on its listener.
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.View;  
  4. import android.view.animation.Animation;  
  5. import android.view.animation.Animation.AnimationListener;  
  6. import android.view.animation.AnimationUtils;  
  7. import android.widget.Button;  
  8. import android.widget.TextView;  
  9.    
  10. public class CrossfadeActivity extends Activity implements AnimationListener {  
  11.    
  12.        TextView txtview1, txtview2;  
  13.        Button btnAnimation;   
  14.        Animation FadeIn, FadeOut;  
  15.        @Override  
  16.        protected void onCreate(Bundle savedInstanceState) {  
  17.               // TODO Auto-generated method stub  
  18.               super.onCreate(savedInstanceState);  
  19.               setContentView(R.layout.activity_crossfade);  
  20.               txtview1 = (TextView) findViewById(R.id.txtView1);  
  21.               txtview2 = (TextView) findViewById(R.id.txtView2);  
  22.               btnAnimation = (Button) findViewById(R.id.btnAnimation);  
  23.                      FadeIn = AnimationUtils.loadAnimation(getApplicationContext(),  
  24.                            R.anim.fade_in);  
  25.               FadeOut = AnimationUtils.loadAnimation(getApplicationContext(),  
  26.                            R.anim.fade_out);  
  27.               FadeIn.setAnimationListener(this);  
  28.               FadeOut.setAnimationListener(this);  
  29.               btnAnimation.setOnClickListener(new View.OnClickListener() {  
  30.    
  31.                      @Override  
  32.                      public void onClick(View v) {  
  33.                             txtview2.setVisibility(View.VISIBLE);  
  34.                            txtview2.startAnimation(FadeIn);  
  35.                            txtview1.startAnimation(FadeOut);  
  36.                      }  
  37.               });  
  38.        }  
  39.    
  40.        @Override  
  41.        public void onAnimationEnd(Animation animation) {  
  42.               if (animation == FadeOut) {  
  43.                      txtview1.setVisibility(View.GONE);  
  44.               }  
  45.               if(animation == FadeIn){  
  46.                                          txtview2.setVisibility(View.VISIBLE);  
  47.               }  
  48.        }  
  49.        @Override  
  50.        public void onAnimationRepeat(Animation animation) {  
  51.        }  
  52.        @Override  
  53.        public void onAnimationStart(Animation animation) {  
  54.                            }  
  55.  
Step 5
 
When you run your project:
 
Clipboard02.jpg
 
Image 2
 
Clipboard03.jpg
 
Image 3
 
Clipboard04.jpg
 
When you run this project on your emulator or device then you will see the animation.