Bi-direction ViewFlipper

In last exercise "Create book-like view switching, ViewFlipper" flip the page in one direction from left to right. In order to make effect of flip reversely, we have to create reverse animation flip from right to left, and set InAnimation and OutAnimation programatically depends on direction.



Create two more XML for flipin and flipout in reverse direction:
/res/anim/flipin_reverse.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/overshoot_interpolator">
 <translate
     android:fromXDelta="-100%p"
     android:toXDelta="0"
     android:duration="500"/>
</set>

/res/anim/flipout_reverse.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/overshoot_interpolator">
 <translate
     android:fromXDelta="0"
     android:toXDelta="100%p"
     android:duration="500"/>
</set>

Modify main.xml to add button of flip to previous page, and remove android:inAnimation and android:outAnimation of ViewFlipper.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

 <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="@string/hello" />
  <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
      <Button
       android:id="@+id/previous"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:text="previous"/>
      <Button
       android:id="@+id/next"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:text="next"/>
  </LinearLayout>


 <ViewFlipper
     android:id="@+id/flipper"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">
  
     <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical">
         <ImageView
             android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:src="@drawable/ic_launcher"/>
     </LinearLayout>
  
     <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical"
         android:gravity="center"
         android:background="#C0C0C0">
         <ImageView
             android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:src="@drawable/ic_launcher"/>
         <ImageView
             android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:src="@drawable/ic_launcher"/>
     </LinearLayout>
  
     <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="horizontal"
         android:gravity="center"
         android:background="#A0A0A0">
         <ImageView
             android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:src="@drawable/ic_launcher"/>
         <ImageView
             android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:src="@drawable/ic_launcher"/>
     </LinearLayout>
  
 </ViewFlipper>
</LinearLayout>

Modify code of the activity:

package com.exercise.AndroidViewFlipper;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewFlipper;

public class AndroidViewFlipperActivity extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
  
     final ViewFlipper page = (ViewFlipper)findViewById(R.id.flipper);
     Button btnNext = (Button)findViewById(R.id.next);
     Button btnPrevious = (Button)findViewById(R.id.previous);
  
     final Animation animFlipInForeward = AnimationUtils.loadAnimation(this, R.anim.flipin);
     final Animation animFlipOutForeward = AnimationUtils.loadAnimation(this, R.anim.flipout);
     final Animation animFlipInBackward = AnimationUtils.loadAnimation(this, R.anim.flipin_reverse);
     final Animation animFlipOutBackward = AnimationUtils.loadAnimation(this, R.anim.flipout_reverse);
  
     btnNext.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    page.setInAnimation(animFlipInForeward);
    page.setOutAnimation(animFlipOutForeward);
    page.showNext();
    
   }});
  
     btnPrevious.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    page.setInAnimation(animFlipInBackward);
    page.setOutAnimation(animFlipOutBackward);
    page.showPrevious();
    
   }});
 }
}

Download the files.