Android transitions- slide in and slide out

I've recently been looking at the android platform and having some fun with writing some small apps. I wanted to do some interesting transitions between views, and decided to have a go at a transition were one view slides off to the left and the other sides in from the right and vice versa. Here's a video showing an example of the end result:

To do this I created a simple project in eclipse using the Android plugins and made use of the ViewFlipper. So the first thing we need to do is create a new Android project called ViewFlipper, we'll call the application and activity Slide and define the package name to be com.example.viewflipper

Define a layout with a ViewFlipper

First of all we are going to edit the main.xml layout file in the res/layout directory of the our new android application here it is:

<?xml version="1.0" encoding="utf-8"?> <ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/flipper" android:layout_width="fill_parent" android:layout_height="fill_parent"> <include android:id="@+id/first" layout="@layout/first_view" /> <include android:id="@+id/second" layout="@layout/second_view" /> </ViewFlipper>

You can see that we have defined a layout using the ViewFlipper. In the ViewFlipper we've included two views; our first view and our second view. Initially ViewFlipper will show our first child view. We haven't defined these child views yet so lets do that. First we need to create our first view. In the res/layout directory create a new file called first_view.xml. Now add this xml to the file:

<LinearLayout android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"> <TextView android:text="This is the first view" android:id="@+id/TextView01" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center_horizontal"> </TextView> <Button android:text="Click for Second view " android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"> </Button> <AnalogClock android:id="@+id/AnalogClock01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal"> </AnalogClock> </LinearLayout>

So our first view contains a few random components including a button that will allow us to navigate to our second view. So lets created our second view. Again we need to create a new xml file in the res/layout directory. This time we are going to call it second_view.xml. Edit this file so that it looks like this:

 

  <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"> <TextView android:text="This is the second view" android:id="@+id/TextView02" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center_horizontal"> </TextView> <Button android:text="Click for first view " android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"> </Button> <ImageView android:id="@+id/ImageView01" android:src="@drawable/icon" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center_horizontal"> </ImageView> <LinearLayout>

Creating the Slide animations

Now we have all the layouts and views completed for our viewFlipper app'. So lets take a look at how to add the animations and the listener functions for the buttons. ViewFlipper extends ViewAnimator which allows us to specifiy two animations, the out animation and the in animation. From out first view, when we click the button, we want this view to slide out to the left of the screen and the new view to slide in from the right of the screen. We are going to specify these two animations in our main activity class which is called Slide.java Here's the two Animations for achieving this:

 

private Animation inFromRightAnimation() { Animation inFromRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); inFromRight.setDuration(500); inFromRight.setInterpolator(new AccelerateInterpolator()); return inFromRight; } private Animation outToLeftAnimation() { Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); outtoLeft.setDuration(500); outtoLeft.setInterpolator(new AccelerateInterpolator()); return outtoLeft; }

To naivigate back to out first view from out second view we need another two animations, out to right and in from left:

 

private Animation inFromLeftAnimation() { Animation inFromLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); inFromLeft.setDuration(500); inFromLeft.setInterpolator(new AccelerateInterpolator()); return inFromLeft; } private Animation outToRightAnimation() { Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); outtoRight.setDuration(500); outtoRight.setInterpolator(new AccelerateInterpolator()); return outtoRight; }

Now that we have all out animations setup we just need to add the click listeners for each of our buttons. We'll add these to the onCreate method. In our click listeners we have to set the in and the out animations, this is to ensure that we call the right animations when going from the first to second and vice versa. Last, but not least, we also have to tell the view flipper which view to show when we click the buttons. To do this we use the showNext and showPrevious methods of our viewflipper. The full Slide.java class should now look like this:

package com.example.viewflipper; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.AccelerateInterpolator; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ViewFlipper; public class Slide extends Activity { ViewFlipper flipper; private Animation inFromRightAnimation() { Animation inFromRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); inFromRight.setDuration(500); inFromRight.setInterpolator(new AccelerateInterpolator()); return inFromRight; } private Animation outToLeftAnimation() { Animation outtoLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); outtoLeft.setDuration(500); outtoLeft.setInterpolator(new AccelerateInterpolator()); return outtoLeft; } private Animation inFromLeftAnimation() { Animation inFromLeft = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, -1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); inFromLeft.setDuration(500); inFromLeft.setInterpolator(new AccelerateInterpolator()); return inFromLeft; } private Animation outToRightAnimation() { Animation outtoRight = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, +1.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f ); outtoRight.setDuration(500); outtoRight.setInterpolator(new AccelerateInterpolator()); return outtoRight; } /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) findViewById(R.id.flipper); Button button1 = (Button) findViewById(R.id.Button01); Button button2 = (Button) findViewById(R.id.Button02); button1.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { flipper.setInAnimation(inFromRightAnimation()); flipper.setOutAnimation(outToLeftAnimation()); flipper.showNext(); } }); button2.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { flipper.setInAnimation(inFromLeftAnimation()); flipper.setOutAnimation(outToRightAnimation()); flipper.showPrevious(); } }); } }

So we now have a working slide animation between two different views! Of course we can change the Animations to give us any transistion that we wish. Here we created our animations in Java but it is also possible to define them in XML, maybe more on that another time. Also these transistions are between views and not activities. It is possible to turn on a Slide transistion effect for activities from the settings menu.

So that's it, have fun with the ViewFlipper and Animations, it would be great to here if anyone has seen any other interesting ways of creating transistions.