How to make Bi directional view flipper in android

Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval. more



Now first you have make view_test.xml

<?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>

then you also make this two animation xml file too. like this

/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>

 Then Main java file

public class BiDirectionTest extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.view_test);
  
     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();
    
   }});
 }
} 

 Sources from www.developer.android.com

 another sources:- http://android-er.blogspot.com/2012/02/bi-direction-viewflipper.html