Widget Catalog: ViewFlipper

A ViewFlipper behaves a bit like a FrameLayout that is set up such that only one child can be visible at a time. You can control which of those children is visible, either by index or via showNext()/showPrevious() methods to rotate between them.

You can also set up animated effects to control how a child leaves and the next one enters, such as applying a sliding effect.

And, you can set up ViewFlipper to automatically flip between children on a specified period, without further developer involvement. This, coupled with the animation, can be used for news tickers, ad banner rotations, or the like where light animations (e.g., fade out and fade in) can be used positively.

Key Usage Tips

ViewFlipper can have as many children as needed (within memory constraints), though you will want at least two for it to be meaningful.

By default, the transition between children is an immediate “smash cut” — the old one vanishes and the new one appears instantaneously. You can call setInAnimation() and/or setOutAnimation() to supply an Animation object or resource to use for the transitions instead.

By default, the ViewFlipper will show its first child and stay there. You can manually flip children via showNext(), showPrevious(), and setDisplayedChild(), the latter of which taking a position index of which child to display. You can also have automatic flipping, by one of two means:

1. In your layout, android:flipInterval will set up the amount of time to display each child before moving to the next, and android:autoStart will indicate if the automated flipping should begin immediately or not
2. In Java, setFlipInterval() serves the same role as android:flipInterval, and you can control when flipping is enabled via startFlipping() and stopFlipping()

A Sample Usage

The sample project can be found in WidgetCatalog/ViewFlipper.

Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
  <ViewFlipper android:id="@+id/details"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
  </ViewFlipper>
</LinearLayout>

(from WidgetCatalog/ViewFlipper/app/src/main/res/layout/main.xml)

Activity:

package com.commonsware.android.flipper2;

import android.app.Activity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ViewFlipper;

public class FlipperDemo2 extends Activity {
  static String[] items={"lorem", "ipsum", "dolor", "sit", "amet",
                          "consectetuer", "adipiscing", "elit",
                          "morbi", "vel", "ligula", "vitae",
                          "arcu", "aliquet", "mollis", "etiam",
                          "vel", "erat", "placerat", "ante",
                          "porttitor", "sodales", "pellentesque",
                          "augue", "purus"};
  ViewFlipper flipper;
  
  @Override
  public void onCreate(Bundle state) {
    super.onCreate(state);
    setContentView(R.layout.main);
    
    flipper=(ViewFlipper)findViewById(R.id.details);
    
    for (String item : items) {
      Button btn=new Button(this);
      
      btn.setText(item);
      
      flipper.addView(btn,
                      new ViewGroup.LayoutParams(
                              ViewGroup.LayoutParams.FILL_PARENT,
                              ViewGroup.LayoutParams.FILL_PARENT));
    }
    
    flipper.setFlipInterval(2000);
    flipper.startFlipping();
  }
}

(from WidgetCatalog/ViewFlipper/app/src/main/java/com/commonsware/android/flipper2/FlipperDemo2.java)

Visual Representation

There is no visual representation of a ViewFlipper itself, as it renders no pixels on its own. Rather, it simply shows the current child.