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

?

1 2 3 4 5 6 7 8 9

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

?

1 2 3 4 5 6 7 8 9

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

?

1 2 3 4 5 6 7 8 9

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

?

1 2 3 4 5 6 7 8 9

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

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();    }});    } }