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.
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.
<?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>
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;
}
});
}
} 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);Below custom animation for view flipper uses alpha, translate and rotate transitions to animate the view flip.
<?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>
<?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> 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);