ZOFTINO.COM android and web dev tutorials

Android ViewFlipper Tutorial

Android ViewFlipper is a subclass of ViewAnimator and can contain multiple child views. It displays one view at a time and can show animation while switching to the next view. You can make Android ViewFlipper flip views automatically or in response to certain events.

In response to events, ViewFlipper can be notified to switch to next view or previous view by calling showNext or showPrevious methods respectively on ViewFlipper. For example, swipe right and swipe left events can be used to show next or previous views of ViewFlipper.

To configure ViewFlipper to flip child views automatically every time after expiry of certain time, you need to first set flip interval by calling setFlipInterval method and then call startFlipping method on ViewFlipper to start auto flip. You can even call setAutoStart passing true to make ViewFlipper start flipping without needing to call startFlipping. To make ViewFlipper stop flipping, you can call stopFlipping method. You can set auto flip settings in xml using autoStart and flipInterval attributes.

To set animation for view flips, methods setInAnimation and setOutAnimation can be called. Below example shows ViewFlipper with slide animation using android provided animations android.R.anim.slide_in_left and android.R.anim.slide_out_right. To have fade in and fade out animations for view switching of ViewFlipper, you can use android.R.anim.fade_in and android.R.anim.fade_out.

Android ViewFlipper Example

In the below example, ViewFlipper flips view on swipe right to next view and on swipe left to previous view and ViewFlipper contains different widgets as child views.

Below example shows adding OnTouchListener, for detecting swipe right and swipe left touch gestures, to ViewFlipper by calling setOnTouchListener method on ViewFlipper.

Layout

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zoftino.com.viewflipper.MainActivity">
    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="TextView" />

            <ToggleButton
                android:id="@+id/toggleButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="ToggleButton" />

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="CheckBox" />

            <RadioButton
                android:id="@+id/radioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:text="RadioButton" />

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:progress="45" />

            <SeekBar
                android:id="@+id/seekBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:max="200"
                android:progress="50" />

    </ViewFlipper>
</android.support.constraint.ConstraintLayout>
 

Activity

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

public class MainActivity extends AppCompatActivity {

    private float startX;
    private ViewFlipper vf;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        vf = findViewById(R.id.viewFlipper);

        Animation imgAnimationIn = AnimationUtils.
                loadAnimation(this, android.R.anim.slide_in_left);
        imgAnimationIn.setDuration(700);
        vf.setInAnimation(imgAnimationIn);

        Animation imgAnimationOut = AnimationUtils.
                loadAnimation(this, android.R.anim.slide_out_right);
        imgAnimationOut.setDuration(700);
        vf.setOutAnimation(imgAnimationOut);

        vf.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                int action = event.getActionMasked();

                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        startX = event.getX();
                        break;
                    case MotionEvent.ACTION_UP:
                        float endX = event.getX();
                        float endY = event.getY();

                        //swipe right
                        if (startX < endX) {
                            MainActivity.this.vf.showNext();
                        }

                        //swipe left
                        if (startX > endX) {
                            MainActivity.this.vf.showPrevious();
                        }

                        break;
                }
                return true;
            }
        });

    }
} 

ViewFlipper Flip to Specific View

You can use setDisplayedChild method to make ViewFlipper flip to a specific view. You need to pass index of the view that needs to be shown.

ViewFlipper = findViewById(R.id.viewFlipper);
vf.setDisplayedChild(3);

ViewFlipper Custom Animation

Below custom animation for view flipper uses alpha, translate and rotate transitions to animate the view flip.

ViewFlipper out-animation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<alpha
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />
<translate
    android:duration="600"
    android:fromXDelta="0"
    android:toXDelta="50%p" />
<rotate
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="320" />
</set>
 

ViewFlipper in-animation

 <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true">
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0" />
<translate
    android:duration="600"
    android:fromXDelta="-50%p"
    android:toXDelta="0" />
<rotate
    android:fromDegrees="320"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="0" />
</set> 

Android ViewFlipper Dynamically Adding Views

You can add views to ViewFlipper programmatically using addView method by passing a view. The view will be added at the end of the list of existing child views of ViewFlipper. You can even add a view at specific index by passing index to addView method. To remove a child view from ViewFlipper, you can use removeView or removeAllViews methods.

    ViewFlipper vf = findViewById(R.id.viewFlipper);
    TextView tv = new TextView(this);
    tv.setText("Hello TEXT");
    vf.addView(tv);