Splash Fade, Activity Animations, overridePendingTransition

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Splash Fade, Activity Animations, overridePendingTransition

Postby XCaffeinated » Tue Dec 08, 2009 7:35 am

Splash Fade, Activity Animations, overridePendingTransition

(In the interests of consistency and clarity I'm using plusminus' tutorial format.)


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.

[youtube]http://youtube.com/watch?v=yplvGIuLE5M[/youtube]

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:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:layout_width="fill_parent"
  4.    android:layout_height="fill_parent"
  5.    >
  6.     <ImageView
  7.     android:layout_width="fill_parent"
  8.     android:layout_height="fill_parent"
  9.     android:scaleType="fitXY"
  10.     android:src="@drawable/splash"
  11.     />
  12. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4

In the same folder, edit main.xml. Replace the current contents with:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:layout_width="fill_parent"
  4.    android:layout_height="fill_parent"
  5.    >
  6.     <ImageView
  7.     android:layout_width="fill_parent"
  8.     android:layout_height="fill_parent"
  9.     android:scaleType="fitXY"
  10.     android:src="@drawable/main"
  11.     />
  12. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4

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:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:interpolator="@android:anim/decelerate_interpolator"
  4.         android:zAdjustment="top"
  5.         android:fromAlpha="1.0"
  6.         android:toAlpha="0.0"
  7.         android:duration="1000" />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4

In the same directory, create a file name mainfadein.xml, and add:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:interpolator="@android:anim/accelerate_interpolator"
  4.         android:fromAlpha="0.0"
  5.         android:toAlpha="1.0"
  6.         android:duration="1000" />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


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.
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. /* Create an intent that will start the main activity. */
  2. Intent mainIntent = new Intent(SplashScreen.this, MainApp.class);
  3. SplashScreen.this.startActivity(mainIntent);
  4.                                
  5. /* Finish splash activity so user cant go back to it. */
  6. SplashScreen.this.finish();
  7.        
  8. /* Apply our splash exit (fade out) and main
  9.    entry (fade in) animation transitions. */
  10. overridePendingTransition(R.anim.mainfadein, R.anim.splashfadeout);
Parsed in 0.031 seconds, using GeSHi 1.0.8.4

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:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. public class MainApp extends Activity {
  2.     /** Called when the activity is first created. */
  3.     @Override
  4.     public void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.main);
  7.     }
  8. }
Parsed in 0.032 seconds, using GeSHi 1.0.8.4

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:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <application android:icon="@drawable/icon" android:label="@string/app_name"
  2.                 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" >
  3.         <activity android:name=".SplashScreen" android:screenOrientation="landscape">
  4.             <intent-filter>
  5.                 <action android:name="android.intent.action.MAIN" />
  6.                 <category android:name="android.intent.category.LAUNCHER" />
  7.             </intent-filter>
  8.         </activity>
  9.         <activity android:name=".MainApp" android:screenOrientation="landscape">
  10.         </activity>
  11. </application>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4

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"
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package com.example.splashtest;
  2.  
  3. import android.app.Activity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.os.Handler;
  7.  
  8. public class SplashScreen extends Activity {
  9.  
  10.         private static final int SPLASH_DISPLAY_TIME = 2000;  /* 2 seconds */
  11.  
  12.         /** Called when the activity is first created. */
  13.         @Override
  14.         public void onCreate(Bundle savedInstanceState) {
  15.                 super.onCreate(savedInstanceState);
  16.                 setContentView(R.layout.splash);
  17.                
  18.                  /* Create a new handler with which to start the main activity
  19.                     and close this splash activity after SPLASH_DISPLAY_TIME has
  20.                     elapsed. */
  21.                 new Handler().postDelayed(new Runnable() {
  22.                         @Override
  23.                         public void run() {
  24.                                
  25.                                 /* Create an intent that will start the main activity. */
  26.                                 Intent mainIntent = new Intent(SplashScreen.this,
  27.                                         MainApp.class);
  28.                                 SplashScreen.this.startActivity(mainIntent);
  29.                                
  30.                                 /* Finish splash activity so user cant go back to it. */
  31.                                 SplashScreen.this.finish();
  32.                                
  33.                                 /* Apply our splash exit (fade out) and main
  34.                                    entry (fade in) animation transitions. */
  35.                                 overridePendingTransition(R.anim.mainfadein,
  36.                                         R.anim.splashfadeout);
  37.                         }
  38.                 }, SPLASH_DISPLAY_TIME);
  39.         }
  40. }
Parsed in 0.039 seconds, using GeSHi 1.0.8.4


"/src/your_package_structure/MainApp.java"
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package com.example.splashtest;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5.  
  6. public class MainApp extends Activity {
  7.     /** Called when the activity is first created. */
  8.     @Override
  9.     public void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.main);
  12.     }
  13. }
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


Hope this helps!
XCaf
XCaffeinated
Developer
Developer
 
Posts: 25
Joined: Sun Nov 29, 2009 10:16 pm

Top

Postby ashish » Fri Jan 08, 2010 11:58 am

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..

:wink:
ashish
Experienced Developer
Experienced Developer
 
Posts: 62
Joined: Fri Feb 20, 2009 8:09 am

Postby XCaffeinated » Fri Jan 08, 2010 10:08 pm

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
XCaffeinated
Developer
Developer
 
Posts: 25
Joined: Sun Nov 29, 2009 10:16 pm

Postby ashish » Sat Jan 09, 2010 7:26 am

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....
ashish
Experienced Developer
Experienced Developer
 
Posts: 62
Joined: Fri Feb 20, 2009 8:09 am

Postby ashish » Sat Jan 09, 2010 1:16 pm

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..??
ashish
Experienced Developer
Experienced Developer
 
Posts: 62
Joined: Fri Feb 20, 2009 8:09 am

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby jon.dproj » Sat Jun 05, 2010 4:21 am

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:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         @Override
  2.         public void onBackPressed() {
  3.         [this_activity].this.finish();
  4.         overridePendingTransition(R.anim.fadein, R.anim.fadeout);
  5.         return;
  6.         }
  7.  
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


...I'm going for fashion over function.
jon.dproj
Freshman
Freshman
 
Posts: 3
Joined: Sat Jun 05, 2010 2:54 am

Top

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby Katecca » Wed Feb 09, 2011 2:44 am

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!
Katecca
Freshman
Freshman
 
Posts: 2
Joined: Fri Jan 14, 2011 10:35 am

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby niknjen » Thu Feb 17, 2011 6:50 am

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
niknjen
Freshman
Freshman
 
Posts: 8
Joined: Tue Feb 15, 2011 8:18 am

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby chitgoks » Tue Mar 29, 2011 6:08 am

this is for switching activity. what class needs to be used for view to view transition?
Website/Java Games: http://www.chitgoks.com
Blogs:
http://tech.chitgoks.com
http://wuhtevah.chitgoks.com
http://disneyusa.blogspot.com
chitgoks
Developer
Developer
 
Posts: 36
Joined: Tue Mar 11, 2008 3:06 am

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby antonykkk » Wed Nov 02, 2011 7:35 am

antonykkk
Freshman
Freshman
 
Posts: 3
Joined: Tue Sep 20, 2011 7:01 am

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby PepsiCar » Tue Jan 03, 2012 9:17 pm

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!
PepsiCar
Once Poster
Once Poster
 
Posts: 1
Joined: Tue Jan 03, 2012 9:14 pm

Re: Splash Fade, Activity Animations, overridePendingTransit

Postby daavidfischer » Fri Nov 30, 2012 1:00 pm

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
daavidfischer
Junior Developer
Junior Developer
 
Posts: 12
Joined: Fri Oct 12, 2012 8:00 am

Top

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 9 guests