Home › Tutorials ›

How to use ViewFlipper

Fri, 10/08/2010 - 05:22 | by bence

SDK Version: 
M3

You have probably already heard about ViewFlipper. If not, go to website: http://developer.android.com/reference/android/widget/ViewFlipper.html
and check it.

"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."

Sounds good. Let's try it!

Create a ViewFlipper in your main xml layout like this:

  1. <ViewFlipper android:id="@+id/flipper"
  2.                 android:layout_width="fill_parent" android:layout_height="fill_parent"
  3.                 android:layout_below="@+id/CockpitLayout">
  4.                 <include android:id="@+id/firstlayout" layout="@layout/first" />
  5.                 <include android:id="@+id/listlayout" layout="@layout/list" />
  6.                 <include android:id="@+id/thirdlayout" layout="@layout/productlayout&quot; />
  7.                 <include android:id="@+id/fourthlayout" layout="@layout/vendorlayout&quot; />
  8.  
  9.         </ViewFlipper>

Notice that you have a main layout, and 4 other (firstlayout.xml, listlayout.xml, thirdlayout.xml and fourthlayout.xml) to get it work.

Once you have done with all the layouts, you can set up your Main activity to handle and switch them.

create these variables first:

  1. private ViewFlipper mFlipper;
  2. private int mCurrentLayoutState;

put this in your onCreate():

  1. mFlipper = (ViewFlipper) findViewById(R.id.flipper);
  2. mCurrentLayoutState = 0;

Now do a method wich is switch between layouts:

  1. /**
  2.          * Switches the layout to the given constant ID as a parameter
  3.          * @param switchTo (should be 0 or a positive number)
  4.          */
  5.         public void switchLayoutStateTo(int switchTo){
  6.                 while(mCurrentLayoutState != switchTo){
  7.                         if(mCurrentLayoutState > switchTo){
  8.                                 mCurrentLayoutState--;
  9.                                 mFlipper.setInAnimation(inFromLeftAnimation());
  10.                                 mFlipper.setOutAnimation(outToRightAnimation());
  11.                                 mFlipper.showPrevious();
  12.                         } else {
  13.                                 mCurrentLayoutState++;
  14.                                 mFlipper.setInAnimation(inFromRightAnimation());
  15.                                 mFlipper.setOutAnimation(outToLeftAnimation());
  16.                                 mFlipper.showNext();
  17.                         }          
  18.                        
  19.                 };
  20.         }

Finally the animations:

  1.         protected Animation inFromRightAnimation() {
  2.  
  3.                 Animation inFromRight = new TranslateAnimation(
  4.                                 Animation.RELATIVE_TO_PARENT, +1.0f,
  5.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  6.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  7.                                 Animation.RELATIVE_TO_PARENT, 0.0f);
  8.                 inFromRight.setDuration(500);
  9.                 inFromRight.setInterpolator(new AccelerateInterpolator());
  10.                 return inFromRight;
  11.         }
  12.  
  13.         protected Animation outToLeftAnimation() {
  14.                 Animation outtoLeft = new TranslateAnimation(
  15.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  16.                                 Animation.RELATIVE_TO_PARENT, -1.0f,
  17.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  18.                                 Animation.RELATIVE_TO_PARENT, 0.0f);
  19.                 outtoLeft.setDuration(500);
  20.                 outtoLeft.setInterpolator(new AccelerateInterpolator());
  21.                 return outtoLeft;
  22.         }
  23.  
  24.         protected Animation inFromLeftAnimation() {
  25.                 Animation inFromLeft = new TranslateAnimation(
  26.                                 Animation.RELATIVE_TO_PARENT, -1.0f,
  27.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  28.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  29.                                 Animation.RELATIVE_TO_PARENT, 0.0f);
  30.                 inFromLeft.setDuration(500);
  31.                 inFromLeft.setInterpolator(new AccelerateInterpolator());
  32.                 return inFromLeft;
  33.         }
  34.  
  35.         protected Animation outToRightAnimation() {
  36.                 Animation outtoRight = new TranslateAnimation(
  37.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  38.                                 Animation.RELATIVE_TO_PARENT, +1.0f,
  39.                                 Animation.RELATIVE_TO_PARENT, 0.0f,
  40.                                 Animation.RELATIVE_TO_PARENT, 0.0f);
  41.                 outtoRight.setDuration(500);
  42.                 outtoRight.setInterpolator(new AccelerateInterpolator());
  43.                 return outtoRight;
  44.         }

I hope you found it useful!

Bookmark/Search this post with

New tutorials from Helloandroid

More...

Android on Twitter

Join the conversation

Poll

What Version of Android do you have?: