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.

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!

Building an Android Splash Screen

Github Repo

Splash Screens are a common feature of many apps. They’re a nice way to show off the awesomeness that is your logo or maybe just dazzle your users with some eye candy while your app downloads things from the web, crunches numbers, or calculates the 2000th digit of the number pi. Whatever your reasons are for building a Splash Screen you’d probably like it to have a few nice features. This example shows how to build a Splash Screen that removes the title bar, fixes the screen in Portrait layout and prevents the user’s back button from returning them to the Splash Screen.

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 SplashActivity. This will be the brains of our Splash Screen.

Step 2.

We need to add another Activity to our application that we can transition to when our Splash Screen is done. Add a new Activity named MainActivity and create a new layout XML file named splash.xml. Then configure the SplashActivity to use the splash.xml file for it’s layout and the MainActivity to use main.xml. If you’d like to make changes to these layout files to spruce things up go ahead. For this example I’ve added an image to the SplashActivity and changed the text in main.xml to read “Hello World, MainActivity!”

Here’s what your package should look like.

MainActivity

SplashActivity

Step 3.

Once your project is set up, open SplashActivity.java and we’ll make a few changes. Add a variable named splashDelay to hold the length of time to keep the Splash Screen up. Then we’ll use a Timer and a TimerTask to help us schedule the transition to MainActivity. Note that before starting the new Activity we call the finish() method on the SplashActivity. This prevents the user from being able to use the back button to return to this Activity.

Step 4.

Finally, we need to make two changes to AndroidManifest.xml. Set the application element’s theme attribute to Theme.NoTitleBar to get rid of the Title Bar and on the SplashActivity’s activity element, set the screenOrientation attribute to portrait to fix the SplashScreen to portrait layout.

And finally our Splash Screen.