Last Updated:

ViewFlipper Container in Android (With Examples)

In this tutorial we will get acquainted with the features of the container, as well as write a small application using . It should be noted that the ViewFlipper container is primarily created for a simple implementation of a slideshow or gallery, but it is very convenient to use in applications where there are many transitions and screens (patient cards with many forms of input, etc.).ViewFlipperViewFlipper

ViewFlipper Container Overview

A class inherits a base class that makes transitions between two or more children. Only one child View can be shown on the screen, while the rest will be shown by pressing or after a specified time, after which it will scroll to the next View object in the hierarchy.ViewFlipperViewAnimatorViewViewFlipper

Animations in ViewFlipper

The ViewFlipper supports animations to transition from one screen to another. This is done using methods and , which animate the appearance and attenuation of View elements. We can use the default animation of the Android system or write our own animation class.setInAnimation()setOutAnimation()

Transitions in the ViewFlipper

To control the automatic flipping of the application screens, we can start and stop the timer on the ViewFlipper container. To manage this we are helped by the methods and , as well as the method that sets the interval between swiping screens inside .startFlipping()stopFlipping()setFlipInterval()ViewFlipper

Explicitly call the next or previous screen allow the methods and the container.showNext()showPrevious()ViewFlipper

Example of using ViewFlipper in Android

Our application will consist of 3 screens. We'll handle the events associated with transitions between screens. Automatic transition to the next screen is implemented in just one line, and we want to try as many features of the component as possible.ViewFlipper

1. Create an Android project

First of all, let's create a new project in Android Studio. Who does not know how, then see an example here.

2. Animate transitions

Now go to the res folder and create a resource folder for the animation: res -> New -> Android Resource Directory:

ViewFlipper Container

Now let's create 4 new xml files Animation Resource File: res -> New -> Animation resource file:

ViewFlipper Container

We are talking about 2 xml to animate the appearance of the View object on the screen and its departure from the screen on the left side and the same 2 animations for the appearance / attenuation on the right side:

Animation of the appearance on the left :left_in.xml

Left screen animation :left_out.xml

The same animations for the appearance / departure from the screen to the right:

Animation:right_in.xml

Animation:right_out.xml

Briefly about animation tags:

  • <set> is a container that can contain other animation elements.
  • <translate> — describes vertical or horizontal movement. In our case, horizontal, because we described changes along the Ox axis.
  • <alpha> determines the appearance/attenuation of the animation.

3. Layout with ViewFlipper container

 

Now we can start marking the container in the layout:ViewFlipperactivity_main.xml

As you can see, there are 3 child RelativeLayouts in the container. each of which has 2 Button widgets (next screen, TextView as an indicator of the current screen and going to the previous screen).ViewFlipper

4. Manage the ViewFlipper container in code

Now let's describe our widgets in the MainActivity class:

In the code, we defined the buttons, hung the listeners, and described the logic of working with the container.ViewFlipper

Now let's run the application and see what happens:

 
 

The restrictions specified in the method do not allow us to go beyond the third screen. The same constraint is in the .showNext()showPrevious()

Finally, let's look at other attributes and features that you can apply to the current project:ViewFlipper

  • The attribute is used to specify the interval between automatic screen swipes inside the ViewFlipper container. Specified in milliseconds, for example, .android:flipIntervalandroid:flipInterval="3000"
  • The attribute indicates the automatic start of the slideshow. Can take values or .android:autoStarttruefalse
  • The methods , , , responsible for starting the slideshow, stopping the slideshow and setting the interval between transitions, respectively.startFlipping()stopFlipping()setFlipInterval(int milliseconds)

Read the documentation for the rest of the container attributes and capabilities.ViewFlipper