Android ViewFlipper: how to display a specific child reliably

What ViewFlipper does and when to use it

ViewFlipper is a lightweight container in Android designed to flip between a small set of views. It extends ViewAnimator and provides built-in transitions to switch between its direct children. It is best suited for simple scenarios such as onboarding screens, image carousels, or short app UI flows where only one child is visible at a time. ViewFlipper does not handle complex paging, accessibility at scale, or dynamic data lists; for those needs, ViewPager or RecyclerView are more appropriate. This guide explains how to reliably display a specific child in ViewFlipper, control animations, and manage transitions in a way that remains robust over time.

Declare ViewFlipper in XML

Add child views directly inside ViewFlipper in your layout. Each immediate child becomes a page that ViewFlipper can show or flip between. Include views you intend to show one at a time, and avoid wrapping large or heavy layouts that could cause performance issues.

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

    <include layout="@layout/card_onboarding_one" />
    <include layout="@layout/card_onboarding_two" />
    <include layout="@layout/card_onboarding_three" />

</ViewFlipper>

Get reference and show a specific child in code

Use setDisplayedChild or setDisplayedChildAt to show a particular view by index. You can also use showNext and showPrevious for simple sequential navigation. These methods affect which child ViewFlipper displays without removing any views.

ViewFlipper flipper = findViewById(R.id.viewFlipper);
flipper.setDisplayedChild(1);

Set rules for which index is considered the first child

ViewFlipper uses child indices in the order they appear in XML or added programmatically. Index 0 is the first direct child. Ensure your layout matches the index you target in code, because removing or adding views changes indices and can cause mismatches.

Control animation with setInAnimation and setOutAnimation

Animation helps users understand navigation between children, but keep motion subtle and consistent. You can set distinct in and out animations, or disable animation entirely on low-end devices or when motion sensitivity is enabled.

Animation in = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
Animation out = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
flipper.setInAnimation(in);
flipper.setOutAnimation(out);
flipper.setDisplayedChild(2);

Respect reduced motion accessibility setting

If the user has reduced motion enabled, suppress or shorten animations. Use createAnimationFactory with a no-op or very short fade when accessibility is active to avoid discomfort or distraction.

Use tags or IDs to map logical pages to indices

Because indices shift when children are added or removed, maintain a stable mapping from logical page keys to positions. Keep an array of resource IDs or tags and look up the index at runtime to reliably reach the desired child.

int[] childIds = {R.id.card_one, R.id.card_two, R.id.card_three};
int target = 2; // stable logical page
flipper.setDisplayedChild(childIds[target]);

Compare ViewFlipper with ViewPager and alternatives

Common pitfalls and best practices

• Hardcoded indices can break when children change; use stable mapping.
• Always check child count before setting an index to avoid IndexOutOfBoundsException.
• Test on devices with reduced motion and disable animations where appropriate.
• Do not put heavy or nested layouts as direct children if performance is a concern.
• Prefer ViewPager or RecyclerView when you need paging, accessibility, or large data sets.

Programmatic example: safe display by stable key

Below is a compact pattern to show a specific logical page by key, resilient to reordering or adding views.

String[] keys = {"onboarding_1", "onboarding_2", "onboarding_3"};
int position = 1; // the logical page to show
if (position >= 0 && position < keys.length) {
    int childIndex = position; // maintain mapping carefully
    flipper.setDisplayedChild(childIndex);
}