ViewFlipper Tutorial With Example In Android Studio

In Android, ViewFlipper is a subclass of ViewAnimator which is used for switching between views. It is an element of transition widget which helps us to add transition on the views (i.e. changing from one view to another). It is mainly useful to animate a view on screen.

ViewFlipper switches smoothly between two or more views (like TextView, ImageView or any layout) and thus provides a way of transitioning from one view to another through appropriate animations. You can create views for a ViewFlipper widget either using a factory or by adding them on your own.

Important Note:  ViewFlipper and ViewSwitcher both are sub classes of ViewAnimator and does the same task. The main difference between the two is ViewSwitcher can hold only two child views but ViewFlipper can holds two or more child views and show one at a time.

Basic ViewFlipper XML Code:

<ViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<!--   Add View’s Here Which You Want to Flip -- >
<!--We created two textview which will Flip-->

<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="First TextView" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp"
 android:text="Second TextView" />

</ ViewFlipper >

Steps for Implementation of ViewFlipper:

1. Get the reference of ViewFlipper in class using findViewById() method, or you can also create an object dynamically.
2. Set a factory using switcherid.setFactory()
3. Set an in-animation using switcherid.setInAnimation()
4. Set an out-animation using switcherid.setOutAnimation()

Important Methods Of ViewFlipper:

Let’s we discuss some important methods of ViewFlipper that may be called in order to manage the ViewFlipper.

1. startFlipping(): This method is used to start a timer to cycle through the child views. Sometime when we need to start the flipping on Button click or any other event then we use this method to start the flipping of views.

Below we start the timer to cycle through the child view of ViewFlipper.

ViewFlipper  simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
simpleViewFlipper.startFlipping(); // start the flipping of views

2. stopFlipping(): This method is used to stop the timer means there is no more flips. Sometime we need to stop the flipping on Button click or any other event then we use this method to stop the flipping of views.

Below we stop the timer to cycle through the child view of ViewFlipper.

ViewFlipper  simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
simpleViewFlipper.stopFlipping(); // stop the flipping of views

3. setFlipInterval(int milliseconds): This method is used to set the interval time in milliseconds for how long to wait before flipping to the next view.

Below we set the 1 seconds for interval time that shows how long to wait before flipping to next view.

ViewFlipper  simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
simpleViewFlipper.setFlipInterval(1000); //set 1 seconds for interval time

4. setAutoStart(boolean autoStart): This method is used to auto start the flipping between views. This method automatically call startFlipping() method to start Flipping when it becomes attached to a window.

Below we set true value for auto start the flipping of views.

ViewFlipper  simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
simpleViewFlipper.setAutoStart(true); // set true value for auto start the flipping between views

5. isAutoStart(): This method is used to check whether the views are automatically start flipping or not. This method return a Boolean type value either true or false. It return true if this view automatically calls startFlipping() when it becomes attached to a window and return false if it is not.

Below we check whether the views are automatically flipping or not.

ViewFlipper  simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
Boolean isAutoStart = simpleViewFlipper.isAutoStart();  // checks whether the views are automatically start flipping or not.

6. isFlipping(): This method is used to check whether the views are flipping or not. This method also return a Boolean value i.e. either true or false. It returns true if the child views are flipping and return false if they are not.

Below we check whether the views are currently flipping or not.

ViewFlipper  simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
Boolean isFlipping= simpleViewFlipper.isFlipping();  // check whether the views are flipping or not

7. showNext(): This method is used to show the next view of ViewFlipper. As we discussed earlier ViewFlipper can have two or more child views of which only one is shown at a time so this method is used to show the next views.

Below we perform click event on button and call showNext() method to show the next view in ViewFlipper.

ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper

Button btnNext=(Button) findViewById(R.id.buttonNext); // get the reference of Button
// set Click event on next button
btnNext.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
// show the next view of ViewFlipper
simpleViewFlipper.showNext();
}
});

8. showPrevious(): This method is used to show the Previous view of ViewFlipper. As we discussed earlier ViewFlipper can have two or more child views of which only one is shown at a time. To show previous view this method is used.

Below we perform click event on button and call showPrevious() method to show the previous view in ViewFlipper.

ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper

Button btnPrevious=(Button) findViewById(R.id.buttonPrevious); // get the reference of Button
// set Click event on next button
btnPrevious.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
// show the next view of ViewFlipper
simpleViewFlippper.showPrevious();
}
});

9. loadAnimation(Context context, int id): This method is used whenever we need to define an object of Animation class through AnimationUtilities class by calling a static method loadAnimation.

Below we create an object of Animation class and load an animation by using AnimationUtils class.

// Declare in and out animations and loading them using AnimationUtils class
 Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
 Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

10. setInAnimation(in): This method is used to sets the animation of the appearance of the object on the screen.

Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the Animation on ViewFlipper.

ViewFlipper simpleViewFlipper =(ViewFlipper)findViewById(R.id.simpleViewFlipper); // initiate a ViewFlipper
Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load an animation
simpleViewFlipper.setInAnimation(in); // set in Animation for ViewFlipper

11. setOutAnimation(out): This method does the opposite of setInAnimation().

whenever we use show the next view, it first removes the old view using an animation set with the setOutAnimation() method, and then places the new one using the animation set by the setInAnimation() method.

Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the out Animation on ViewFlipper

ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper); // get reference of ViewFlipper
Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load an animation
simpleViewFlipper.setOutAnimation(out); // set out Animation for ViewSwitcher

12. addView(View child): This method is used to add the child view at run time in the ViewFlipper.

Below we create a new view i.e ImageView and then add that view in our ViewFlipper.

ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper);// get reference of ViewFlipper

ImageView imageView = new ImageView(this);// create a ImageView
imageView.setImageResource(R.drawable.image);// set resource image in ImageView
simpleViewSwitcher.addView(imageView);// add the ImageView in ViewFlipper

Attributes of ViewFlipper In Android:

Now let’s we discuss some common attributes of a ViewFlipper that helps us to configure it in our layout (xml).

1. Id: id attribute is used to uniquely identify a ViewFlipper.

< ViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<!--   Add View’s Here -- >

</ ViewFlipper >

2. autoStart: This property is used to automatically start animating/flipping between views. You can also automatically start flipping programmatically by using setAutoStart() method.

Below we set the true value for the autoStart property of ViewFlipper that wiil automatically start animating between views.

<ViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true"> <!—set auto start property to true-->

<!--   Add View’s Here -- >

</ViewFlipper>

3. flipInterval: This property is used to set the interval time in milliseconds for how long to wait before flipping to the next view. You can also set interval time programmatically means in java class using setFlipInterval() method.

Below we set the 3 seconds for the interval time for flipping between views.

<ViewFlipper
android:id="@+id/ simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:flipInterval="3000"> <!--  set interval time for flipping the views -->

<!--Add View’s Here-->

</ViewFlipper>

4. padding: This attribute is used to set the padding from left, right, top or bottom side of a ViewFlipper.

• paddingRight: This attribute is used to set the padding from the right side of a ViewFlipper.
• paddingLeft: This attribute is used to set the padding from the left side of a ViewFlipper.
• paddingTop: This attribute is used to set the padding from the top side of a ViewFlipper.
• paddingBottom: This attribute is used to set the padding from the bottom side of a ViewFlipper.
• Padding: This attribute is used to set the padding from the all the side’s of a ViewFlipper.

Below we set the 10dp padding from all the sides of a ViewFlipper

<ViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"> <!-- set 10 dp padding from all the sides of ViewFlipper -->

<!--   Add View’s Here -- >

</ViewFlipper>

5. background: This attribute is used to set the background of a ViewFlipper. We can set a color or a drawable in the background of a background: This attribute is used to set the background of a ViewFlipper.

Below is the example code with explanation included in which we set the red color for the background of a ViewFlipper.

<ViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f00"> <!-- set red color in the background of ViewFlipper -->

<!--   Add View’s Here -- >

</ViewFlipper>

Setting background in ViewFlipper In Java class:

ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper); // get reference of ViewFlipper
simpleViewFlipper.setBackgroundColor(Color.RED);// set red color in the background of ImageFlipper.

ViewFlipper Example In Android Studio:

Example 1 Of ViewFlipper: (Don’t Miss ViewFlipper Example 2 after this)

Below is the example of ViewFlipper in which we display a ViewFlipper with three views first is ImageView, second is a layout in which we have a two TextView’s and third is also a layout in which we have two Button’s.

In this example we also use one Button for switching the views of ViewFlipper. Firstly we load and set slide in left and slide in right animation and finally whenever a user click on next button, ViewFlipper switch between the views and the current view will go out and next view will come in with specified animation.

Below you can download complete project code, see final output and step by step explanation of the ViewFlipper example:

Download Code ?

Step 1: Create a new project and name it ViewFlipperExample

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code :

In this step we open an xml file and add the code for displaying a Button and a ViewFlipper with three child views.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- ViewSwitcher with three views first is ImageView, second is a layout in which we have two TextView's
     and third is a layout in which we have two Button's -->
    <ViewFlipper
        android:id="@+id/simpleViewFlipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/image" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="First TextView" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="Second TextView" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">


            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="First Button" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:text="Second Button" />


        </LinearLayout>
    </ViewFlipper>


    <Button
        android:id="@+id/buttonNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="150dp"
        android:background="#005"
        android:text="NEXT"
        android:textColor="#fff"
        android:textStyle="bold" />

</LinearLayout>

Step 3: Open src -> package -> MainActivity.java

In this step we open MainActivity and add the code for initiate the ViewFlipper and Button. In this Firstly we load and set slide in left and slide in right animation and finally whenever a user click on next button, ViewFlipper switch between the views and the current view will go out and next view will come in with specified animation.

package com.example.ip_d.viewflipperexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

    private ViewFlipper simpleViewFlipper;
    Button btnNext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // get The references of Button and ViewFlipper
        btnNext = (Button) findViewById(R.id.buttonNext);
        simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper
        // Declare in and out animations and load them using AnimationUtils class
        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

        // set the animation type to ViewFlipper
        simpleViewFlipper.setInAnimation(in);
        simpleViewFlipper.setOutAnimation(out);

        // ClickListener for NEXT button
        // When clicked on Button ViewFlipper will switch between views
        // The current view will go out and next view will come in with specified animation
        btnNext.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub
                // show the next view of ViewFlipper
                simpleViewFlipper.showNext();
            }
        });

    }

}

Output:

Now run the App and you will see cat image on screen. Now click on next Button to Flip the views.

ViewFlipper Example 2 In Android Studio:

In the 2nd example of ViewFlipper we display a ViewFlipper with 5 ImageView’s. In this example we create ImageView’s at run time and then add the views in the ViewFlipper using addView() method. After adding we load and set slide in left and slide in right animation and finally set the auto start and flip interval time so that ViewFlipper switch between the views and the current view will go out and next view will come in with specified animation after the given time interval.

Below you can download complete project code, see final output and step by step explanation of ViewFlipper example.

Download Code ?

Step 1: Create a new project and name it ViewFlipperExample

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code :

In this step we open an xml file and add the code for displaying a Button and a ViewFlipper with three child views.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content">

</ViewFlipper>
</LinearLayout>

Step 3: Open src -> package -> MainActivity.java

In this step we open MainActivity and add the code to initiate the ViewFlipper . In this firstly we create ImageView and then add the views in the ViewFlipper using addView() method. After adding we load and set slide in left and slide in right animation and finally set the auto start and flip interval time so that ViewFlipper switch between the views and the current view will go out and next view will come in with specified animation after the 3 second time interval.

package com.example.ip_d.viewflipperexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

    private ViewFlipper simpleViewFlipper;
    int[] images = {R.drawable.apple, R.drawable.pineapple, R.drawable.litchi, R.drawable.mango, R.drawable.banana};     // array of images

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        // get The references of ViewFlipper
        simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper

        // loop for creating ImageView's
        for (int i = 0; i < images.length; i++) {
            // create the object of ImageView
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(images[i]); // set image in ImageView
            simpleViewFlipper.addView(imageView); // add the created ImageView in ViewFlipper
        }
        // Declare in and out animations and load them using AnimationUtils class
        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
        // set the animation type's to ViewFlipper
        simpleViewFlipper.setInAnimation(in);
        simpleViewFlipper.setOutAnimation(out);
        // set interval time for flipping between views
        simpleViewFlipper.setFlipInterval(3000);
        // set auto start for flipping between views
        simpleViewFlipper.setAutoStart(true);
    }
}

Output:

Now run the App and you will see different Fruits image will start flipping after an interval of 3 seconds. This we created using ViewFlipper in Android.

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>