What you learn: You will learn how to create a splash screen activity that fades into the next activity. (Android 2.0 only).

Problems/Questions: Just ask...

Difficulty: 1.5 of 5

What it will look like: Please note, the emulator runs very slowly compared to the actual Droid, so the video here is quite jerky, but should give you a general idea. Unfortunately, I can't get video capture of the Droid desktop.


Tested on Android 2.0, emulator and Droid handset. Not available for previous Android versions.

Description:
In this tutorial we will create two activities, a splash screen activity and a main activity. We will use a fade transition between the two activities using the overridePendingTransition() API introduced in Android 2.0. The splash activity will fade out as the main activity fades in. We will also set the splash screen activity so that it does not reappear when the user presses the back button.

overridePendingTransition() was introduced in Android 2.0 expressly for handling animated transitions between activities. This allows us to keep the modular coding style of activities, and still be able to animate their transitions. Prior to the introduction of overridePendingTransition(), animated transitions had to be handled manually, or views used in place of activities.

0.) Since this tutorial includes material only found in Android 2.0, you will need an Eclipse project targeting the Android 2.0 platform. In particular this means you will have multiple res/drawable folders.

1.) We need some layout resources:

In your res/layout folder, create a file named splash.xml, and add:

In the same folder, edit main.xml. Replace the current contents with:

Both of these are simple ImageViews; I've used them because they make a nice transition, obviously you can use whatever is appropriate. The only noteworthy item is scaleType set to fitXY. fitXY scales the chosen bitmap to fit the view.

In your res/drawable-xxxx folders add two .png images (of your choice), named splash.png and main.png. (I chose title_bg_hori.png and pressed_application_background_static.png from the SDK and just renamed them for clarity).

2.) We need some animation resources:

In your res/anim folder (create an anim folder in /res if it's not already there), create a file named splashfadeout.xml, and add:

In the same directory, create a file name mainfadein.xml, and add:


These are simple animations that will fade out/in an image over time. The interpolators control how the fade occurs. For example, we are using a decelerate_interpolator for our splash fade out, so our splash will fade quickly at first, then slow down as it approaches its final fade value (in this case 0, to indicate fully faded, or transparent). Similarly for our main image fade in, the accelerate_interpolator will cause our fade in to start slowly and speed up as time goes on. In both cases, our duration is 1 second; duration is specified in milliseconds. We'll talk about the zAdjustment attribute later.

For this demo, I've used duration values significantly longer than recommended for a commercial application. This was done so the transitions could be seen, even on a slow emulator. For real world activities, transition times (the duration values in the anim .xmls) should be set to one of the Android preconfigured values, such as:

Code: Select all

android:duration="@android:integer/config_longAnimTime"

config_longAnimTime is just slightly less than a half second, and is long enough for most purposes. Of course, this is just a suggestion.

3.) Make a splash activity, SplashScreen.java. I won't cover the basics of creating the splash activity, as plusminus has done a nice job here. A full listing of SplashScreen.java appears at the end of this tutorial.

Our splash activity will display the splash layout (described earlier) using setContentView() for SPLASH_DISPLAY_TIME milliseconds (e.g., 2000 milliseconds = 2 seconds). After SPLASH_DISPLAY_TIME milliseconds, we will:

• Create an intent for our main activity and start it.
• Complete our current splash activity and clean it up so that the user cant go back to it.
• Apply our animation transitions so that our splash activity fades out as our main activity fades in.

overridePendingTransition() handles our animated transition between the splash and main activities. Two animation resources need to be supplied, one for the entry of the new activity (ours is R.anim.mainfadein), and one for the exit of the old activity (ours is R.anim.splashfadeout).

The two animations will occur at the same time. This is one reason why I chose the interpolators the way I did (see step 2). The animations occur simultaneously, and these blend into each other nicely. The zAdjustment attribute can be used to keep the exiting activity's animation on top, as was done here. If you don't do this, the default is for the entering activity's animation to be on top, and your splash fade out will happen underneath your main fade in, so you won't see it.

You can use 0 for either animation if you don't want an animated transition but beware: if for some reason you want an animation for the entering activity, but not for the exiting activity, you should create a placeholder animation that does nothing (in our example, set the fromAlpha and toAlpha values to 1.0 in splashfadeout.xml). This will keep the exiting activity around long enough for the entering activity's animation to overlay properly. Otherwise you will see a momentary blank screen instead of a smooth transition. The ApiDemos sample in the SDK has more on this in the Apps/Activity/Animation subsample, and an example of how to create a placeholder 'hold' xml, as just described.

For more on animation in general see here.

4.) Make a main activity MainApp.java. This is just a simple placeholder activity, so our splash activity has somewhere to go. A full listing of MainApp.java appears at the end of this tutorial, but the heart is:

5.) The last thing we need before we test is to set up our application's attributes, activities and intent filters. Edit AndroidManifest.xml and replace the current <application> tag with:

We've made our application be landscape only, fullscreen and with no titlebar. Our application has our two activities, SplashScreen and MainApp.

Caveats:

-Users can override animation transitions for windows (Settings->Sound & display->Animation), but not for views. If you feel that a lack of animated transitions would negatively impact your application, you may wish to consider an alternative to overridePendingTransition(), such as doing transitions only in views (which can not be overridden by the user).

-If you need to go back to previous activities using the back button, you will not have animation transitions using overridePendingTransition(). For activities which only occur once and are then removed from the history stack, such as splash activities, overridePendingTransition() is perfect. If you need animations back to your previous activities, you might consider other alternatives.

Takeaways:

• Use overridePendingTransition() for animated transitions between activities; this is particularly suitable for once-and-done type activities, such as splash screens.
• Realize that the animations used by overridePendingTransition() occur simultaneously.
• Use the zAdjustment attribute to set up z order for your entering/exiting activities.
• Understand that users can override animation settings if they prefer no animations; such an override may be unsuitable for your application.

The Full Source:

"/src/your_package_structure/SplashScreen.java"


"/src/your_package_structure/MainApp.java"


Hope this helps!
XCaf

Ok good job dude..

I agree this all is only possible in 2.0.
But is there any way to handle tranisition animation in 1.5 or 1.6.If not then why??

common guys let us help each other..only one Android developer can understand other Android developer..

Hi ashish,

If you are talking about view to view transitions (intra-activity), there are many ways to get great animations, most of which work fine on older Android revisions. A good overview is at http://developerlife.com/tutorials/?p=343. Also take a look at the many examples for ViewFlipper around the web.

For activity to activity transitions (inter-activity) prior to Android 2.0, however, you may be out of luck. You can certainly animate out of one activity, and start a new 'incoming' animation for the next activity, upon that activity's creation (in its onCreate() method), but there will be a rather ugly transition between the two. overridePendingTransition() was expressly introduced with Android 2.0 to give the developer more control over activity-to-activity transitions, and to eliminate transition artifacts.

If you must have animated transitions prior to Android 2.0, your best bet is to use views, rather than activities, but of course, you lose code modularity by giving up activities.

XCaf

Hello xCaf,

Thank you for your reply.
You are right I was unlucky in having activity to activity animation on 1.5 and 1.6.

I also tried..

boolean status= Settings.System.putString(res,Settings.System.TRANSITION_ANIMATION_SCALE,"1.0");

After this we have to broadcast proper intent and I didn't get any intent Action which will describe this.

I am getting activity animation but that is ugly one..not equivalent to iphone animation.

From forume and all that I came to know that..it was bit unstable so, they didn't introduce us

Ok, but know in 2.0 it is possible very nicely..


But again I want to ask you one question can we stop activity tranisition animation in 1.5 or 1.6 from code.


Thank you....

Ya actually with the help of view flipper, it is possible to achieve activity tranisition animation in 1.5 and 1.6

But I want to disable any default single activity animation or override it.

I tried this..

this.getWindow().setWindowAnimations(R.anim.slide_top_to_bottom);

I didn't get the new animation instead it's default animation get disable.

Does any body know why this happening..??

Cheers, this works great - assuming you are happy with the 2.0 min.

I actually used this to add animation between all my activities, as well as capturing a Back button press by use of the following:



...I'm going for fashion over function.

I tried the example but I am wondering how to override the animation when my activity is started from launcher. Is there any solution? Thanks!

Thanks for the tutorial!

I used it in my app and it works great except for one thing.

I would like the splash screen to be "NoTitleBar.Fullscreen" but the main screen to have a title bar and not be full screen.

I can get them both one way or the other but not one one way and the other the other way.

Any Ideas?

Thanks
-Nick

this is for switching activity. what class needs to be used for view to view transition?

You can check with this example for some more animations http://android-codes-examples.blogspot.com/2011/11/animation-for-view-and-activities-with.html

Hello, this code works fine when window animation setting in settings menu is set to "show all animations".

Is there a way to apply this transitions when its set to "show some animations" or "show no animations" ?

Thank you!

I have been trying to learn to create a splash screen activity that fades into the next activity. I should say, I came across a number of tutorials over the internet but I couldn’t find anything as simple as this. Thanks a lot.



__________
David Fischer
see here