Crossfading Animation in Android Studio

Introduction

 
Right from the start, the animation is something that has interested me. In this article, we will create a simple animation.
 
Animation can add subtle visual clues that notify the users about what is going on in your app and improve their mental model of your app's interface. Animation can be of many types:
  • Crossfading two views
  • Using view pager for screen slides
  • Displaying card flip animations
  • Zooming a view
  • Animating layout changes
In this article, we will look at "Crossfading two views". In this type of animation, an object will appear and then will fade away according to the fading time specified by you. This type of animation can be used to occupy the user while something is being loaded.
 
Step 1
 
I am using images for this purpose. You can use any other element (like a Progress Bar, text etcetera).
 
Copy all the images you want to use to the clipboard and paste them on "drawable".
 
I am using 3 images, namely scene1, scene2, and scene3.
 
Step 2
 
Open the layout file, in other words, "activity_main" and make the following changes in it:
  1. <ImageView  
  2.        android:layout_width="700dp"  
  3.        android:layout_height="600dp"  
  4.        android:id="@+id/im"  
  5.         /> 
The layout looks like:
 
im1.jpg
 
Step 3
 
Open "MainActivity.java" and add the following code to it:
  1. package com.animation2;  
  2.    
  3. import android.content.Context;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. import android.app.Activity;  
  7. import android.os.Handler;  
  8. import android.view.Menu;  
  9. import android.view.View;  
  10. import android.view.animation.*;  
  11. import android.widget.ImageView;  
  12.    
  13. public class MainActivity extends Activity {  
  14.     ImageView im;  
  15.     Animation fadeIn;  
  16.     Animation fadeOut;  
  17.     int fadeOutTime=5000;  
  18.     int timeBetween=3000;  
  19.     int images[]={R.drawable.scene1,R.drawable.scene2,R.drawable.scene3};  
  20.     static  int index=0;  
  21.     private AnimationSet animation;  
  22.     private Handler mHandler;  
  23.     final Context context=this;  
  24.    
  25.     private Runnable mCountUpdater = new Runnable() {  
  26.         private int mCount = 0;  
  27.    
  28.         @Override  
  29.         public void run() {  
  30.             if(mCount>2)  
  31.               return;  
  32.             else  
  33.             {  
  34.              func();  
  35.                 mCount++;  
  36.             mHandler.postDelayed(this9000);  
  37.             }  
  38.         }  
  39.     };  
  40.     @Override  
  41.     protected void onCreate(Bundle savedInstanceState) {  
  42.         super.onCreate(savedInstanceState);  
  43.         setContentView(R.layout.activity_main);  
  44.         mHandler = new Handler();  
  45.         mHandler.post(mCountUpdater);  
  46.    
  47.     }  
  48.     public void func()  
  49.     {  
  50.    
  51.         if(index<=2)  
  52.         {  
  53.    
  54.         im=(ImageView)findViewById(R.id.im);  
  55.    
  56.         im.setImageResource(images[index]);  
  57.    
  58.         fadeIn = new AlphaAnimation(0.00f, 1);  
  59.         fadeIn.setInterpolator(new LinearInterpolator()); // add this  
  60.         fadeIn.setDuration(500);  
  61.    
  62.         fadeOut = new AlphaAnimation(1, 0f);  
  63.         fadeOut.setInterpolator(new AccelerateInterpolator()); // and this  
  64.         fadeOut.setStartOffset(timeBetween);  
  65.         fadeOut.setDuration(fadeOutTime);  
  66.    
  67.         animation = new AnimationSet(false); // change to false  
  68.         animation.addAnimation(fadeIn);  
  69.         animation.addAnimation(fadeOut);  
  70.         animation.setRepeatCount(1);  
  71.         animation.setFillAfter(true);  
  72.         im.setAnimation(animation);  
  73.         index=index+1;  
  74.    
  75.         animation.setAnimationListener(new Animation.AnimationListener() {  
  76.             @Override  
  77.             public void onAnimationStart(Animation animation) {  
  78.    
  79.             }  
  80.    
  81.             @Override  
  82.             public void onAnimationEnd(Animation animation) {  
  83.    
  84.                 if(index==3)  
  85.                 {  
  86.                     Intent i=new Intent(context,Second.class);  
  87.                     startActivity(i);  
  88.                 }  
  89.    
  90.             }  
  91.    
  92.             @Override  
  93.             public void onAnimationRepeat(Animation animation) {  
  94.    
  95.             }  
  96.         });  
  97.         }  
  98.    
  99.        }  
  100.    
  101.     @Override  
  102.     public boolean onCreateOptionsMenu(Menu menu) {  
  103.         // Inflate the menu; this adds items to the action bar if it is present.  
  104.         getMenuInflater().inflate(R.menu.main, menu);  
  105.         return true;  
  106.     }  
  107.    
In the code above, the alpha value is the opacity value of an object. If the alpha is 1 then the object is fully opaque. If the alpha is 0 then the object is fully transparent. If you skip "animation.setFillAfter(true)" then you will observe that the image appears again after fadding out. A handler has been used in the code above to introduce a delay between the animations of various images.
 
Step 4
 
Let us design the layout of the second screen we require. "Layout" -> "New" -> "Layout Resource file". Name this file as "second_layout" and add the following code to it:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.               android:orientation="vertical"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="#45454545">  
  6.   <TextView  
  7.       android:layout_width="fill_parent"  
  8.       android:layout_height="wrap_content"  
  9.       android:layout_marginTop="150dp"  
  10.       android:layout_marginLeft="70dp"  
  11.       android:text="Hello"  
  12.       android:textSize="30dp"/>  
  13.    
  14. </LinearLayout> 
The layout looks like
 
im2.jpg
 
Step 5
 
Click-right on the package of your main Java file then select "New" -> "Java class". Name this file "Second". Set the content view of this file to "second_layout".
package com.animation2;
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3.    
  4. public class Second extends Activity {  
  5.     @Override  
  6.     protected void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.second_layout);  
  9.     }  
  10. }  
Step 6
 
Add the name of the new activity to "AndroidManifest":
  1. <activity android:name=".Second"  
  2.                   android:label="Hello"/> 
The output snapshots follow.
 
The animation will look like:
 
chhavi.gif
 
The "Second" activity:
 
im9.jpg
 
Thank you.....Enjoy coding :)