Introduction

To make our application attractive, animation techniques may be helpful. Animation is the process of creating motion and shape changes. Animation in an Android is possible in many ways. In this blog, we are going to implement the slideshow animation in our Android Application. We are going to do this, using the Fade In and Fade Out effect. Let us create a simple Android app, which shows Fade In and Fade Out effects for the eight pictures (you can take any number of pictures).

Requirements

Step 1

Open Android Studio. Create your New Project. Give your desired app name.

Step 2

In app res, create New Directory named anim.

In app res anim , create new XML file, named fade_in and fade_out.



Fade_in consists of the code, given below.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <Alpha
  4. android:duration="2000"
  5. android:fromAlpha="0.0"
  6. android:toAlpha="1.0"
  7. android:interpolator="@android:anim/accelerate_interpolator" />
  8. </set>
Complete code of Fade_out consist.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <Alpha
  4. android:duration="2000"
  5. android:fromAlpha="1.0"
  6. android:toAlpha="0.0"
  7. android:interpolator="@android:anim/accelerate_interpolator" />
  8. </set>
In Fade_in and Fade_out code, given below, Android:duration indicates the time interval for which one picture will slide.

Step 3

Now, copy the eight pictures, which you want to slide in your app from your PC and paste into app res drawable.



Step 4

Activity_main.xml should consist of a code, given below.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. tools:context="com.sheravision.myapplication.MainActivity"
  7. android:background="#7986cb">
  10. <LinearLayout
  11. android:layout_width="fill_parent"
  12. android:layout_height="fill_parent">
  14. <ViewFlipper
  15. android:id="@+id/bckgrndViewFlipper1"
  16. android:layout_marginTop="30dp"
  17. android:layout_width="fill_parent"
  18. android:layout_height="fill_parent">
  20. <ImageView
  21. android:id="@+id/bckgrndImageView2"
  22. android:layout_width="fill_parent"
  23. android:layout_height="fill_parent"
  24. android:scaleType="fitCenter"
  26. android:src="@drawable/picture7" />
  28. <ImageView
  29. android:id="@+id/bckgrndImageView1"
  30. android:layout_width="fill_parent"
  31. android:layout_height="fill_parent"
  32. android:scaleType="fitCenter"
  34. android:src="@drawable/picture8" />
  36. <ImageView
  37. android:id="@+id/bckgrndImageView8"
  38. android:layout_width="fill_parent"
  39. android:layout_height="fill_parent"
  40. android:scaleType="fitCenter"
  42. android:src="@drawable/picture1" />
  44. <ImageView
  45. android:id="@+id/bckgrndImageView7"
  46. android:layout_width="fill_parent"
  47. android:layout_height="fill_parent"
  48. android:scaleType="fitCenter"
  50. android:src="@drawable/picture2" />
  52. <ImageView
  53. android:id="@+id/bckgrndImageView6"
  54. android:layout_width="fill_parent"
  55. android:layout_height="fill_parent"
  56. android:scaleType="fitCenter"
  58. android:src="@drawable/picture3"
  60. android:layout_marginTop="0dp" />
  62. <ImageView
  63. android:id="@+id/bckgrndImageView5"
  64. android:layout_width="fill_parent"
  65. android:layout_height="fill_parent"
  66. android:scaleType="fitCenter"
  68. android:src="@drawable/picture4" />
  70. <ImageView
  71. android:id="@+id/bckgrndImageView4"
  72. android:layout_width="fill_parent"
  73. android:layout_height="fill_parent"
  74. android:scaleType="fitCenter"
  76. android:src="@drawable/picture5" />
  78. <ImageView
  79. android:id="@+id/bckgrndImageView3"
  80. android:layout_width="fill_parent"
  81. android:layout_height="fill_parent"
  82. android:scaleType="fitCenter"
  84. android:src="@drawable/picture6" />
  86. </ViewFlipper>
  87. </LinearLayout>
  90. </RelativeLayout>
ViewFlipper is an extension class of ViewAnimator, which animates between two or more views that have been added to it. ImageView is used for the adjustments of the picture i.e adjusting the width, height, scale etc. of an individual picture. Since we have eight pictures, we should write eight Imageview with its properties.

Step 5

Now, the last task remaining is to code for MainActivity.java. The code, given below completes the MainActivity.java.
  1. package com.sheravision.myapplication;
  3. import android.os.Bundle;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.view.animation.Animation;
  6. import android.view.animation.AnimationUtils;
  7. import android.widget.ViewFlipper;
  8. public class MainActivity extends AppCompatActivity {
  9. Animation fade_in, fade_out;
  10. ViewFlipper viewFlipper;
  11. @Override
  12. protected void onCreate(Bundle savedInstanceState) {
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.activity_main);
  15. viewFlipper = (ViewFlipper) this.findViewById(R.id.bckgrndViewFlipper1);
  16. fade_in = AnimationUtils.loadAnimation(this,
  17. android.R.anim.fade_in);
  18. fade_out = AnimationUtils.loadAnimation(this,
  19. android.R.anim.fade_out);
  20. viewFlipper.setInAnimation(fade_in);
  21. viewFlipper.setOutAnimation(fade_out);
  22. //sets auto flipping
  23. viewFlipper.setAutoStart(true);
  24. viewFlipper.setFlipInterval(5000);
  25. viewFlipper.startFlipping();
  26. }
  27. }
In order to perform the animation in Android, we are going to call a static function loadAnimation() of the class AnimationUtils. We are going to receive the result in an instance of animation object.

This completes the Slideshow animation with Fade_In and Fade_Out effects. Now, run the Emulator for the output of your Application.