ViewFlipper Animation

ViewFlipper is a subclass of android.widget.ViewAnimator, so we can apply Animation on ViewFlipper also. Here is a example; the ViwFlipper change in shifting from one view to another view slowly.

create a folder /res/anim, create two xml file to define the flip-in and flip-out animation.
/res/anim/flipin.xml

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

/res/anim/flipout.xml

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

main.xml (It's sam as that in the exercise "ViewFlipper")

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<TextView 
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="@string/hello"
   />
<ViewFlipper
 android:id="@+id/viewflipper"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical">
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="First Screen"/>
<Button
 android:id="@+id/button1"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Flip to second page"/>
</LinearLayout>
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical">
<TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Second Screen"/>
<Button
 android:id="@+id/button2"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="Flip back"/>
</LinearLayout>
</ViewFlipper>
</LinearLayout>

main code, AndroidViewFlipper.java

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 AndroidViewFlipper extends Activity {
 
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       final ViewFlipper MyViewFlipper = (ViewFlipper)findViewById(R.id.viewflipper);
       Button button1 = (Button)findViewById(R.id.button1);
       Button button2 = (Button)findViewById(R.id.button2);

       Animation animationFlipIn  = AnimationUtils.loadAnimation(this, R.anim.flipin);
       Animation animationFlipOut = AnimationUtils.loadAnimation(this, R.anim.flipout);
       MyViewFlipper.setInAnimation(animationFlipIn);
       MyViewFlipper.setOutAnimation(animationFlipOut);
      
       button1.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    MyViewFlipper.showNext();
   }});
      
       button2.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    MyViewFlipper.showPrevious();
   }});
   }
}

Download the files.

Thank you for reading this article ViewFlipper Animation With URL http://x-tutorials.blogspot.com/2011/03/viewflipper-animation.html. Also a time to read the other articles.