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.


38 comments:

  • Anonymous said...

    Very helpful. Thank you!

  • You're welcome. Thank you for the feedback :)

  • Anonymous said...

    Helpful post, thanks.Is there a difference in productivity between setting up animation in java file directly or adding animation to xml and then loading it in java file?

  • Writing Animations in xml is more concise and means that you can write less Java code. It seems to be the preferred method as far as I can tell. If it makes a difference to the performance of the code I'm not sure, but I doubt it. Sometimes you may want to write your own custom animations, in which case java is really your only option. See this post for custom animations: http://www.inter-fuser.com/2009/08/android-animations-3d-flip.html

  • This helped me quite a bit, thank you. One quick note, the close tag in your example second_view.xml is an open tag (<LinearLayout> v. </LinearLayout>)

  • Thanks for pointing that out, can be a bit tricky getting "<" characters to display correctly and I obviously removed one too many characters. As a slight aside you may also want to check out the following post, it gives a few pointers on how to do a similar thing with Activities, only for Android 2.0 though..

    http://www.inter-fuser.com/2009/11/android-transitions-views-and.html

  • Thanks for the code.
    Suppose you have just one layout (say, with a large text) and you want to animate the transition to the next text.
    Is it possible to change the View in memory and then animate the transition from the old to the new text?

  • Sounds to me like that using the ViewFlipper may not be the best way to do what you want. You may want to look at adding a layout animation to your text view and then doing something like invalidating the text view after you have change the text in memory.

  • Anonymous said...

    Awesome, thnx for the code.
    What about the same animation by the touchscreen, not button?

  • Have a look for the gesture API, and possibly how to implement a fling. Should be some examples out there.

  • Are there any other effects ??

  • You can animate the transition as you want. You just need to change the animations

  • Anonymous said...

    Nice Tutorial...!
    Well i want to create animations on buttons like
    A XML page has some buttons and i want those buttons
    to move from left towards right till some X coordinate
    on loading that XML. How do i achieve that????
    Any helpful links....?

  • Just have a google for android animations, you should be able to find something that will help you achieve what you want.

  • Great example, exactly what i needed. deserve a beer for that!

  • Sven Svensson said...

    Thanks a lot! Made my app exactly what i wanted!

    If someone would like to manually set which view to use, like me, to get better control, you can use the setDisplayedChild()

  • thnax a lot, been looking for code snippets like this for all day.

  • Very nice. I should try it once.
    Can you take a look at this topic http://stackoverflow.com/questions/4040804/android-scrollable-tabbar ?

    Can ViewFlipper be a solution?

    Thank you,

    Mur

    Ps.
    Btw. it's complicated to enter captcha

  • Not sure what you are trying to do exactly, but maybe the gallery widget is what you are looking for.

  • Anonymous said...

    Can I add the layout views dynamically?
    For example, I want to decide programatically how many "instances" of first_view.xml and second_view.xml are displayed on ViewFlipper.

  • Thanks for the tutor.For me this is more understandable that developer guide

  • Anonymous said...

    Great stuff. Very helpful. Thanks a lot.

  • Anonymous said...

    Thanks for the tutorial. Where did you mention the second_list.xml to switch to from first_list.xml in the code. the line "lipper.setInAnimation(inFromLeftAnimation());" call the inFrom function but in that function I can't see any call to second list.

  • Arigato for posting this! I'm really interested in android programming! :D I hope I learn fast! :D

    ~breisa

  • Thank you so much!!! It works perfectly! For those who want to "skip" a view (if u have more than two), type flipper.setDisplayedChild(ID) instead of flipper.showNext() or flipper.showPrevious()

  • Anonymous said...

    Thank you very much for this, my desperate search is finally over!! Tried bunch of different approaches - yours is by far the best, both in terms of elegance and functionality.

  • Neil,
    Good post. Was wondering if you could help me out. i want to flip few images along with sound files. how best can i implement that? to be more specific, i want images of apple, ball, cat, dog, elephant etc to flip, and as each of these images come up,their corresponding pronunciations should be played. any pointers will be helpful. thanks

  • Anonymous said...

    Thanks a lot!

  • Would it be an easy task to add some gesture detection to allow for swipe-ability?

  • Anonymous said...

    Is it possible for this animation to work without buttons ?
    For example, i'd like a slide between different pages every 30 seconds

  • Check the Android docs. Functions such as startflipping etc. Are what you need.

  • Hi,
    Very impressive tutorial, Actually I am thinking to make -- http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html --- slider

    Is it possible ?

  • Anonymous said...

    Thanks a ton.........
    i was using Activity group to switch between screens under single tab.... But i had stackoverflow error when i go back and forth 5 times.

    your code helped me so much.. thanks for such a simple example...

  • Anonymous said...

    This example so rocks! I'm going to do something similar in an app now. I have to!

  • Anonymous said...

    Hey, this looks very useful. Is there a way to implement this using ViewPager?
    Thanks!

  • Excellent post. That's what I was looking for. Thanks.

  • thx u very much.. I love this tutorial.. you make me understand how to create a slide transition. this is very helpful.

  • Anonymous said...

    Many Thanks !!
    This's what i need, simple enough & compatible with below 3.0 :)

Post a Comment