A Simple Android Splash Screen

By | April 25, 2010

In this post I’ll explain how to create a really bare-bones splash screen for an Android screen. I’ll be assuming that you don’t know very much at all about Android development, so we can simulate my experience with this. I’ll also be assuming that you’ve set your environment up for Android development per Google’s basic documentation.

Creating the Basic Android Project

Go to File –> New –> Android Project, and enter your defaults as below.

4-23-2010 8-45-13 PM

Click Finish. In the Package Explorer, expand the SplashScreenSample –> src node until you can see all the children.

4-23-2010 8-48-23 PM

Double click the onCreate(Bundle) : void node to view the source code in Eclipse.

4-23-2010 8-51-40 PM

This is the default activity that launches when your application starts up. To verify, run the project by clicking on the Run –> Run menu option, then selecting the Android Application option.

4-23-2010 8-52-39 PM

4-23-2010 9-00-19 PM

After some time spinning up, you’ll see your app running in the emulator. This is essentially the Hello World app, but I put the steps in here just in case you’re new to Android development and Eclipse in general. I was, and this kind of walkthrough would have helped a lot.

4-23-2010 9-12-05 PM

Adding a Screen

The first thing we need to do is add another screen to the project, which will be what we display after the splash screen has run its course. The first step in adding a screen is to add an activity to the Android Manifest. First, double-click the AndroidManifest.xml file.

4-23-2010 9-28-37 PM

Click the Application tab at the bottom.

4-23-2010 9-29-22 PM

We need to add another Activity to our application, so click the Add button in the bottom half of the screen, in the Application Nodes section. Select Activity and click Ok.

4-23-2010 9-31-12 PM

You’ll see a whole slew of options for your new Activity. Let’s just name it mainmenu with a Launch mode of standard. Notice that when we enter a name for our activity, Eclipse complains to us that there is no matching class.

4-23-2010 9-35-01 PM

Let’s rectify this by adding a class called mainmenu to our application. Right click on the src node in the Package Explorer and select New –> Class. Call the class mainmenu and click Finish. Then add code to your mainmenu class to make it appear as below.

package com.testing.splashscreensample;
import android.app.Activity;
import android.os.Bundle;

public class mainmenu extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
   }
}


Now we have the screen that we will show after our splash screen finishes displaying.

Finishing Up The Splash Screen

Our next step is to add the image you want the splash screen to show. Pick whatever image you want to be displayed as the splash screen, and copy it into the three drawable-* directories under the res node in your project. You can use Explorer-like functionality to do this.

4-24-2010 10-51-17 PM

Next we need to define the layout for our splash screen. We start by expanding the res node in Package Explorer, right clicking on the res –> layout node and selecting Android XML File. Call the file splash.xml and click on Finish.

4-24-2010 10-54-20 PM

4-24-2010 10-55-30 PM

Open up the splash.xml file by double-clicking it and ensure that the xml itself looks like the below. You can see the actual xml in the file by clicking the splash.xml tab.

4-24-2010 10-57-17 PM

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
      <ImageView android:src="@drawable/thumbsup"
         android:id="@+id/ImageView01"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content">
      </ImageView>
</LinearLayout>

We’ve basically added an ImageView control that is pointing to the image we just added to our project, via the android:src attribute on the tag element.

The last step is to add code to the SplashScreen class file. Double click the SplashScreen.java node and copy and paste the below code into the file.

package com.testing.splashscreensample;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

public class SplashScreen extends Activity {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.splash);
      Thread splashThread = new Thread() {
         @Override
         public void run() {
            try {
               int waited = 0;
               while (waited < 5000) {
                  sleep(100);
                  waited += 100;
               }
            } catch (InterruptedException e) {
               // do nothing
            } finally {
               finish();
               Intent i = new Intent();
               i.setClassName("com.testing.splashscreensample",
                              "com.testing.splashscreensample.mainmenu");
               startActivity(i);
            }
         }
      };
      splashThread.start();
   }
}

Run the app, and you’ll see your splash screen, followed by your main screen, and that’s that! We’ve obviously glossed over lots of fundamentals here, but I’ll be covering those in more detail in the weeks to come.