Using a Slide Transition with the Android ViewFlipper

Github Repo

If your app only has one View, your app is probably pretty boring. However, if you’re building an interesting app you’ll probably have to switch between multiple Views, maybe go back and forth and have some nice animations. You could write your animations and manually do the transitioning yourself but once you get more than 2 or so Views that’s gonna get tough to keep up with (and messy!). Fortunately the ViewFlipper solves this problem quite nicely.

Step 1.

Let’s start all the way at the beginning, File -> New Android Project. Feel free to use your own Application and Package Names but make sure you tell it to create a MainActivity. This will be the Activity that controls the transition between Views.

clip_image002

Step 2.

Once you get your project set up you’ll need to add a ViewFlipper to main.xml. In this example we’ll also add a couple of buttons that let us go back and forth between our Views.

main.xml

1 <?xml version=”1.0″ encoding=”utf-8″?> 2 <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221; 3 android:orientation=”vertical” 4 android:layout_width=”fill_parent” 5 android:layout_height=”fill_parent”> 6 7 <LinearLayout android:orientation=”horizontal” 8 android:layout_width=”fill_parent” 9 android:layout_height=”wrap_content”>10 <Button android:id=”@+id/previousButton”11 android:text=”Previous”12 android:layout_width=”wrap_content”13 android:layout_height=”wrap_content”/>14 <Button android:id=”@+id/nextButton”15 android:text=”Next”16 android:layout_width=”wrap_content”17 android:layout_height=”wrap_content”/>18 </LinearLayout>19 20 <ViewFlipper android:id=”@+id/viewFlipper”21 android:layout_width=”fill_parent”22 android:layout_height=”fill_parent”>23 <TextView android:layout_width=”fill_parent”24 android:layout_height=”wrap_content”25 android:text=”View 1″/>26 <TextView android:layout_width=”fill_parent”27 android:layout_height=”wrap_content”28 android:text=”View 2″/>29 <TextView android:layout_width=”fill_parent”30 android:layout_height=”wrap_content”31 android:text=”View 3″/>32 </ViewFlipper>33 </LinearLayout>34

Step 3.

Next in MainActivity ‘s onCreate method, wire up ClickHandlers to the Buttons and use the ViewFlipper’s showNext() and showPrevious() methods to move between Views.

MainActivity

1 publicvoid onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 setContentView(R.layout.main); 4 5 final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper); 6 7 Button nextButton = (Button) this.findViewById(R.id.nextButton); 8 nextButton.setOnClickListener(new OnClickListener() 9 { 10 11 @Override 12 publicvoid onClick(View v) { 13 viewFlipper.showNext(); 14 } 15 16 }); 17 18 Button previousButton = (Button) this.findViewById(R.id.previousButton); 19 previousButton.setOnClickListener(new OnClickListener() 20 { 21 22 @Override 23 publicvoid onClick(View v) { 24 viewFlipper.showPrevious(); 25 } 26 27 }); 28 29 }

Step 4.

Now, if all you wanted was a simple transition between Views you could stop now. However, that would be… boring and we can do a heck of a lot better by adding a nice slide transition. To make this work we’ll use the 4 animations below. These allow us to slide in and out from either direction depending on whether we’re going forward or backward and they also add a very subtle alpha fade in and fade out. If you’re interested in checking out other types of animations look no further than your Android SDK directory: Android_SDK\Platform\android-{version}\samples\ApiDemos\res\anim

view_transition_in_left.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android&#8221;>3 <translate android:fromXDelta=”100%p” android:toXDelta=”0″ android:duration=”300″/>4 <alpha android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”300″/>5 </set>6

view_transition_in_right.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android&#8221;>3 <translate android:fromXDelta=”-100%p” android:toXDelta=”0″ android:duration=”300″/>4 <alpha android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”300″/>5 </set>

view_transition_out_left.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android&#8221;>3 <translate android:fromXDelta=”0″ android:toXDelta=”-100%p” android:duration=”300″/>4 <alpha android:fromAlpha=”1.0″ android:toAlpha=”0.0″ android:duration=”300″/>5 </set>

view_transition_out_right.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android&#8221;>3 <translate android:fromXDelta=”0″ android:toXDelta=”100%p” android:duration=”300″/>4 <alpha android:fromAlpha=”1.0″ android:toAlpha=”0.0″ android:duration=”300″/>5 </set>6

Step 5.

Finally, we need to update MainActivity to set the ViewFlipper’s inAnimation and outAnimation properties. We’ll use a slide in from the left when the user clicks “Next” and we’ll slide in from the right when the user clicks “Previous”.

1 publicvoid onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 setContentView(R.layout.main); 4 5 final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper); 6 7 Button nextButton = (Button) this.findViewById(R.id.nextButton); 8 nextButton.setOnClickListener(new OnClickListener() 9 { 10 11 @Override 12 publicvoid onClick(View v) { 13 viewFlipper.setInAnimation(MainActivity.this, R.anim.view_transition_in_left); 14 viewFlipper.setOutAnimation(MainActivity.this, R.anim.view_transition_out_left); 15 viewFlipper.showNext(); 16 } 17 18 }); 19 20 Button previousButton = (Button) this.findViewById(R.id.previousButton); 21 previousButton.setOnClickListener(new OnClickListener() 22 { 23 24 @Override 25 publicvoid onClick(View v) { 26 viewFlipper.setInAnimation(MainActivity.this, R.anim.view_transition_in_right); 27 viewFlipper.setOutAnimation(MainActivity.this, R.anim.view_transition_out_right); 28 viewFlipper.showPrevious(); 29 } 30 31 }); 32 33 }

Finally, run your app and behold the wonder that is the ViewFlipper sliding your Views in and out!

About these ads

3 Comments on “Using a Slide Transition with the Android ViewFlipper

  1. Thanks for the post. This was a real time saver implementing view transitions in my own application. One thing to consider it the length of time if testing transitions on the emulator. I had to increase the duration time to 500 ms to see anything working.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: