Android ViewFlipper example: Creating image slideshow using ViewFlipper

1. Introduction to android ViewFlipper

ViewFlipper is and user interface widget available in android since android API level 1. It can hold two more views, but only one child can be shown at a time. Using this we can implement functionality similar to android gallery item, swiping allows to navigate between images. It also support to auto flip between child at a regular interval.
The ViewFlipper class has derived from ViewAnimator. It supports the methods to set the animation for the in and out actions using setInAnimation() and setOutAnimation(). You can either use some of the default animation that are available in android system or you can write your own animation class.

2. Defining ViewFlipper in android xml layout

Here in the above xml layout, I am using three LinearLayout. Each layout has an image and image caption. All image caption is using the same style. You can see the screenshot’s below for the style. Now, let us create a style.xml file in values folder and then add the following style code


I admit the fact that, the style file used here can be more improvised. The color can be placed in colors.xml file. But, for the sake of simplicity it is using the colors right inside the styles. Now we are done with the layout design and we will move to controlling the ViewFlipper from java code.

3. Using ViewFlipper in java class

Android ViewFlipper can anytime display only one immoderate child at a time. So you can only see the first image in your eclipse graphical layout view. We need to pragmatically move to different child or we can setup an auto timer. Setting an auto flip timer will create a slideshow and can be controlled by startFlipping() and stopFlipping() method. Later in this example we will see more in detail.


In the above code, we are using GestureListener to identify the swipe gesture and rotate between ViewFlipper child view’s. showNext() and showPrevious() method’s are used to show the next and previous ViewFlipper child items. All the ViewFlipper items are added statically inside the layout xml file. However you can also add ViewFlipper child items using addView() method.

4. Creating an image slideshow in android using ViewFlipper auto flip

So far, our example is supporting swipe gesture. But what if we want to implement a slideshow?
Android ViewFlipper support auto flip which can be controlled with startFlipping() and stopFlipping() method. We can set the auto flip interval using setFlipInterval(period). Note that the interval period is in milliseconds.
To control the auto flip we will add play and stop buttons. I have inserted the following code right after ViewFlipper in my original layout xml file.

5. Handling android ViewFlipper Animation events

The ViewFlipper class has derived from ViewAnimator. It supports the methods to set the animation for the in and out actions using setInAnimation() and setOutAnimation(). You can either use some of the default animation that are available in android system or you can write your own animation class.

6. Download Complete example

Download Complete Source Code from GitHub

7. References

Official ViewFlipper Documentation