How to add ViewFlipper in android?

This article is about the implementation of ViewFipper in android. It is an extension of the ViewAnimator class which helps to animate between views added to it. ViewFlipper makes it easy to switch view. To control over flipping between views ViewFlipper provides two methods startFlipping() and stopFlipping(). To automatically switch between views, add the autoStart tag and set its value to true.To give more control to user, add views dynamically in the ViewFlipper. A ViewFlipper can be used in the gallery app to navigate between the images or videos.

Approach:

1. Create a new Android Resource Directory. Right-click on res folder and select Android Resource Directory. Make sure to select resource type as anim.
2. Now create a new slide_left.xml file in the anim directory and add the following code. This is the animation that will be used in switching views.
   
   slide_left.xml

   
   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
       <translate
           android:duration="@android:integer/config_mediumAnimTime"
           android:fromXDelta="0"
           android:toXDelta="-50%p" />
       <alpha
           android:duration="@android:integer/config_mediumAnimTime"
           android:fromAlpha="1.0"
           android:toAlpha="0.0" />
   </set>
3. Now create a new slide_right.xml file in the anim directory and add the following code. This is the animation that will be used be used in switching views.
   
   slide_right.xml

   
   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
       <translate
           android:duration="@android:integer/config_mediumAnimTime"
           android:fromXDelta="50%p"
           android:toXDelta="0" />
       <alpha
           android:duration="@android:integer/config_mediumAnimTime"
           android:fromAlpha="0.0"
           android:toAlpha="1.0" />
   </set>
4. Add the following code in the activity_main.xml file. In this file, ViewFlipper is added to the layout. All the widgets that are added in the view flipper will act as different views. Two buttons next and previous are also added.
   
   activity_main.xml

   
   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context="MainActivity">
   
       <ViewFlipper
   
           android:id="@+id/view_flipper"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:inAnimation="@android:anim/slide_in_left"
           android:outAnimation="@android:anim/slide_out_right">
   
           <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:src="@drawable/gfg" />
   
           <TextView
               android:layout_gravity="center"
               android:textStyle="bold"
               android:textColor="#219806"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="GeeksForGeeks"
               android:textSize="20sp"
           />
   
           <Button
               android:textColor="#219806"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:text="Open Website" />
       </ViewFlipper>
   
       <Button
           android:id="@+id/prev_button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true"
           android:layout_alignParentStart="true"
           android:layout_margin="16dp"
           android:text="Previous" />
   
       <Button
           android:id="@+id/next_button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true"
           android:layout_alignParentEnd="true"
           android:layout_margin="16dp"
           android:text="Next" />
   
   </RelativeLayout>
5. Now add the following code in the MainActivity.java file. Previous and Next buttons will help us to switch between the views. In previous button, for in animation slide_right is used and for out animation slide_left is used and vice versa for next button.
   
   MainActivity.java

   package org.geeksforgeeks.gfgviewflipper;
   
   import android.os.Bundle;
   import android.view.View;
   import android.widget.Button;
   import android.widget.ViewFlipper;
   import androidx.appcompat.app.AppCompatActivity;
   
   public class MainActivity extends AppCompatActivity {
       ViewFlipper flipper;
       Button prev_Button, next_Button;
   
       @Override
       protected void onCreate(Bundle savedInstanceState)
       {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           flipper = findViewById(R.id.view_flipper);
           prev_Button = findViewById(R.id.prev_button);
           next_Button = findViewById(R.id.next_button);
   
           prev_Button.setOnClickListener(
               new View.OnClickListener() {
                   @Override
                   public void onClick(View v)
                   {
                       // It is used to set the in and out
                       // animation of View flipper.
                       flipper.setInAnimation(MainActivity.this,
                                              R.anim.slide_right);
                       flipper.setOutAnimation(MainActivity.this,
                                               R.anim.slide_left);
   
                       // It shows previous item.
                       flipper.showPrevious();
                   }
               });
   
           next_Button.setOnClickListener(
               new View.OnClickListener() {
                   @Override
                   public void onClick(View v)
                   {
                       // It is used to set the in and out
                       // animation of View flipper.
                       flipper.setInAnimation(MainActivity.this,
                                              android.R.anim.slide_left);
                       flipper.setOutAnimation(MainActivity.this,
                                               android.R.anim.slide_right);
   
                       // It shows next item.
                       flipper.showNext();
                   }
               });
       }
   }

Output:

Add autoStart tag in ViewFlipper and set its value to true. Then it will work like this.