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.