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">
  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"/>
  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"/>
  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"/>
  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;
  10. public class CrossfadeActivity extends Activity implements AnimationListener {
  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() {
  31. @Override
  32. public void onClick(View v) {
  33. txtview2.setVisibility(View.VISIBLE);
  34. txtview2.startAnimation(FadeIn);
  35. txtview1.startAnimation(FadeOut);
  36. }
  37. });
  38. }
  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.