ViewFlipper with Animation

ViewFlipper is a 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.





create four XML file for the animation in /res/anim folder

/res/anim/flipinnext.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/flipoutnext.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>

/res/anim/flipinprevious.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/flipoutprevious.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>

/res/layout/main.xml

<?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"
   />
<Button
   android:id="@+id/flipnext"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Flip Next"
   />
<Button
   android:id="@+id/flipprevious"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Flip Previous"
   />
<ViewFlipper
   android:id="@+id/viewflipper"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
<LinearLayout
   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="First Screen"/>
<ImageView
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:src="@drawable/icon"/>
</LinearLayout>
<LinearLayout
   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="Second Screen"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:text="Big Big Button"/>
</LinearLayout>
<LinearLayout
   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="Third Screen"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Normal Button"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Normal Button"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Normal Button"/>
</LinearLayout>
</ViewFlipper>
</LinearLayout>

main java code

package com.MyViewFlipper;

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 MyViewFlipper extends Activity {

   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       Button buttonFlipNext = (Button)findViewById(R.id.flipnext);
       Button buttonFlipPrevious = (Button)findViewById(R.id.flipprevious);
      
       final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewflipper);
       final Animation animFlipInNext = AnimationUtils.loadAnimation(this, R.anim.flipinnext);
       final Animation animFlipOutNext = AnimationUtils.loadAnimation(this, R.anim.flipoutnext);
       final Animation animFlipInPrevious = AnimationUtils.loadAnimation(this, R.anim.flipinprevious);
       final Animation animFlipOutPrevious = AnimationUtils.loadAnimation(this, R.anim.flipoutprevious);
      
       buttonFlipNext.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    viewFlipper.setInAnimation(animFlipInNext);
          viewFlipper.setOutAnimation(animFlipOutNext);
    viewFlipper.showNext();
   }});
      
       buttonFlipPrevious.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    viewFlipper.setInAnimation(animFlipInPrevious);
          viewFlipper.setOutAnimation(animFlipOutPrevious);
    viewFlipper.showPrevious();
   }});
   }
}

Tweet