In this post I’ll show you how to add animations when trying to switch between screens. Usually when you switch between screens it’s a direct “poof” and the new screen appears in a very un-graceful way. The SDK offers a bunch of easy-to-use animations, and I’ll show you how to use them here.
I tried doing animations on the opening and closing of activities, but I haven’t figured that out yet fully. So instead, I will show you how to use animations when switching on objects/layers inside the same activity. It will still look like you are switching screens, but all the layout data will be in one single XML. If we were to switch between activities, each activity would have had (usually) its own layout XML.
And in the post coming after this one, I’ll show you how to start this animation and switch the screen while dragging your fingers on the touch screen. Let me be a little more precise: while dragging one finger on the touch screen. I’m not sure if the OS handles multi-touch right now – or if that’s something the device has to enable – or both.
Back to the topic: how to switch between layers using animations to make it look like you are changing screens… we will be using a ViewFlipper widget in the layout XML.
1. Create a new Android project, unless you already have one
2. Create a new Activity class that extends android.app.Activity.
3. Create a new directory under the /res directory and call it anim
4. Right-click on the new directory called anim and Import all the XML files from: Android_SDK\Platform\android-1.5\samples\ApiDemos\res\anim.
These are animations created using XML. The same animations can be created in code, but these are ready for us to use in XML.
5. Open res\layout\main.xml and copy/paste the following in:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff" > <ViewFlipper android:id="@+id/details" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff"> <TextView android:id="@+id/tv_country" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textStyle="bold" android:textSize="18px" android:text="Country" > </TextView> <Spinner android:text="" android:id="@+id/spinner_country" android:layout_width="200px" android:layout_height="55px"> </Spinner> <Button android:text="Next" android:id="@+id/Button_next" android:layout_width="250px" android:textSize="18px" android:layout_height="55px"> </Button> </LinearLayout> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ffffff"> <TextView android:id="@+id/tv_income" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000000" android:textStyle="bold" android:textSize="18px" android:text="Income" > </TextView> <EditText android:text="" android:id="@+id/et_income" android:layout_width="200px" android:layout_height="55px"> </EditText> <Button android:text="Previous" android:id="@+id/Button_previous" android:layout_width="250px" android:textSize="18px" android:layout_height="55px"> </Button> </LinearLayout> </ViewFlipper> </LinearLayout>
This is a little long, let’s inspect it more closely.
- The outmost layer is a LinearLayout.
- It contains only one inner layer: ViewFlipper
- The first-level layers inside ViewFlipper will be the screens!
-
- ViewFlipper contains 2 LinearLayouts. Each LinearLayout is 1 screen.
-
- The first LinearLayout contains a label, a spinner (a dropdown), and a button
- The second LinearLayout contains a label, an edit view (input box), and a button
6. Here is what Activity1.cs looks like:
package com.warriorpoint.taxman3; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.animation.AnimationUtils; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.Spinner; import android.widget.ViewFlipper; public class Activity1 extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set main.XML as the layout for this Activity setContentView(R.layout.main); // Add a few countries to the spinner Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country); ArrayAdapter countryArrayAdapter = new ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, new String[] { "Canada", "USA" }); spinnerCountries.setAdapter(countryArrayAdapter); // Set the listener for Button_Next, a quick and dirty way to create a listener Button buttonNext = (Button) findViewById(R.id.Button_next); buttonNext.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { // Get the ViewFlipper from the layout ViewFlipper vf = (ViewFlipper) findViewById(R.id.details); // Set an animation from res/anim: I pick push left in vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in)); vf.showNext(); } }); // Set the listener for Button_Previous, a quick and dirty way to create a listener Button buttonPrevious = (Button) findViewById(R.id.Button_previous); buttonPrevious.setOnClickListener(new View.OnClickListener() { public void onClick(View view) { // Get the ViewFlipper from the layout ViewFlipper vf = (ViewFlipper) findViewById(R.id.details); // Set an animation from res/anim: I pick push left out vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out)); vf.showPrevious(); } }); } }
Let’s try and decipher the code:
- First I set the main.xml to be the layout for this Activity
- I input Canada and USA as the values in my dropdown (the Spinner object)
- Then I create two listeners for the two buttons that I have Button_next and Button_previous
- Each button does the following:
-
- Gets a reference to the ViewFlipper
- Sets an animation by passing it the context of this class and an animation from a res/anim XML file
- showNext() or showPrevious() is called – which literally flips between the LinearLayouts in the ViewFlipper widget in the main.xml either forwards or backwards
-
That’s it! Run it!
Look at that fancy Spinner!
Click Next and watch it flow!
Disclaimer: There is a problem with the back animation when you press “Previous”. It flickers a little and doesn’t flow properly backwards. I still have to figure out why. If anyone knows why, drop me a comment below!
Next up: Removing the “Next” and “Previous” buttons and switching screens by using your finger to drag on the touch screen.
June 6, 2009 at 04:16
Hi for the disclaimer.. try using another animation R.anim.slide_right instead of push_left_out . thanks for the tutorial it’s really great!
June 7, 2009 at 15:56
Thanks Stephen, I’ll try it out!
June 29, 2009 at 03:42
why i can’t rotate an acitivity with y axle but it works well when a view rotates? Is there any difference between an acitivity and a view when they are appled rotateanimation which rotated with y axle?
thanks for your help!
November 5, 2009 at 22:06
Thank you! It’s great!!
November 5, 2009 at 22:08
WOW!!!! VERY NICE TIP!
I have found this for a loooooooooooooong time!
Thank you.
January 26, 2010 at 01:57
R.anim.push_left_in error
January 26, 2010 at 01:57
help me
February 19, 2010 at 11:57
In my case it just flicks, not animates, so it may be something with emulator. I have not tried it on the device.
March 3, 2010 at 15:44
for the diclaimer, try to set 4 different animations
next screen:
vf.setInAnimation() … 100 -> 0 in the animation xml
vf.setOutAnimation() … 0 -> -100 in the animation xml
previous direction:
vf.setInAnimation() … -100 -> 0 in the animation xml
vf.setOutAnimation() … 0 -> 100 in the animation xml
April 6, 2010 at 04:54
Hi all i am new to android .
i want to develop calendar application in android.
but i dont know how to start,if any one have examples related to android plz do mail me .
Thanks and Regards
john
June 6, 2010 at 06:25
In step 6 you wrote Activity1.cs instead of Activity1.java!!! Come on man
Thanks anyhow for the great tutorial.. Keep it up!
July 8, 2010 at 15:22
LOL, I can tell you’re an old C# developer; it’s not Activity1.cs, it’s Activity1.java
September 19, 2010 at 05:17
Whenever I click on Next, I get the error “Application stopped unexpectedly” and I have to force close it. Why is that? Please help me. I have tried other examples of switching between the activites and the same thing happened. Whenever i click on next it gives me runtime error.
Anyone has any idea why is it so?
September 23, 2010 at 06:17
Have u kept the following code in AndroidManifest file
hope this should work for you
September 23, 2010 at 06:17
@rosebeat
Have u kept the following code in AndroidManifest file
hope this should work for you
September 23, 2010 at 06:21
@rosebeat
did u kept the foll code in AndroidManifest file
hope this should work for you
December 6, 2010 at 11:06
Thanks for the helpful tutorial. I want to switch between activities by clicking a button through animate. This tutorials tells about multiple screens in one activity. So can any one tell me how to work with 2 with this animate file.
Thank You,
Baluk
December 23, 2010 at 02:47
Android is a software stack for mobile devices that includes an operating system, middleware and key applications. The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language.
December 24, 2010 at 03:46
Hello John, I’m new to android and I also tried developing a simple calendar and I could do it. please tell me ur mail id I shall send u the sorce code, u can go thro it and understand.
Hello Everybody,
I need to change the layout view in my calendar application from month view to week view and day view as well. Here I should do it without changing the activity. Please someone help me in doing this with single activity.
Thanks,
Praveen.
February 8, 2011 at 04:15
Can I get the source code for the animations?
February 11, 2011 at 07:43
how can i get animation of paper folding…?
can i get source code for that?
February 16, 2011 at 01:03
Dear Sir,
I’m new coming in Graphic development. And I need to compose a animation of Paper folding in Android.
Anyone have tutorial or sample code for my reference?
February 25, 2011 at 02:42
Android is a software stack for mobile devices that includes an operating system, middleware and key applications. The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform.
April 6, 2011 at 18:41
Please provide a zipped file, that should make it less frustrating.
October 3, 2011 at 11:49
This is the right blog for anyone who wants to find out about this topic. Great stuff, just great!
Best regards Alex
December 11, 2011 at 13:31
my previous button is not working …force close is error
March 3, 2012 at 14:09
Can Anybody Help me????? Is it possible to drag between XML files????
March 22, 2012 at 17:52
Very good! It helped me. Thanks!!!
May 23, 2012 at 18:19
Thanks, dude… I was getting crazy with it. God bless you!
June 5, 2012 at 07:10
It really helps man, thanks allot for your contribution
June 9, 2012 at 08:45
I have got a lot problem getting my emulator to connect the connection breaks and it doe not display my project but it works fine I use windows xp please help me
June 26, 2012 at 01:53
It’s possible to create animation between class or activities? If yes, how i can do it?
June 26, 2012 at 01:57
It’s possible to create animation between class or activities? If yes, how i can do it?in class i use andengine, and i want switching class of andengine
July 26, 2012 at 17:29
I’m getting white screen before the slide animation..
what should I do?
Thnx!
October 15, 2012 at 03:55
Very good tutor, thanx !!
I’am start create new project android now..
December 16, 2012 at 11:07
I am not getting any animation in my emulator.
And what changes has to be made in Manifest file?
March 6, 2013 at 04:24
Hi guys, thanks for this post, I’m new here and I don’t know what is anim.push_left_in on this line vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
In my R.java class I have no “anim” and I don’t know what should contains this anim, can anyone help me?
May 21, 2013 at 14:38
I have been browsing online more than three hours today, yet
I never found any interesting article like yours.
It is pretty worth enough for me. In my view, if all site owners and bloggers made good content as you did,
the internet will be much more useful than ever before.