Android Splash Screen Tutorial

In this tutorial, I will show you how you can add a splash screen to your Android App.

A requirement for this tutorial is, that we have already established the basic app and we only need to add the splash screen as an addition. This tutorial explains the steps necessary in Eclipse, but the line of action can also easily be transferred to other development environments.

The Image for the Splash Screen

First of all, we have to add the image we would like to use for the splash screen to our project. For that, we open our project in the "Project Explorer" at the right and therein the folder "res".

Here, several folders named "drawable-[...]dpi" are available. It is sufficient to put our image into one of these folders. Which folder we take does not matter, because we do not want to offer our image in various resolutions. In our example, we have pulled the image "splash.png" into the folder "drawable-hdpi".

Create Splash Screen Activity

After that, we create a new Activity which should become our splash screen later. For this, we go into the Eclipse menu "File > New > Other" and select "Android Activity" from the list.

This opens a wizard in which we go through the following steps:

1. Under "Create Activity" select "BlankActivity" and then click on "Next".
2. Under "New Blank Activity" we enter the word "SplashActivity" in the field "Activity Name". You can also choose any other name here.
3. And the same window, we can find the field "Title". Here we enter the name of our app. For example "Splash Screen Test App".
4. Now we are done and we can click on "Finish". 

Eclipse will create a file named "SplashScreen.java" for the source code and a file "activity_splash_screen.xml" for the layout, which we would like to adjust in the next steps.

Layout of the Splash Screen Activity

First, we look at our layout file, which can be found in the Project Explorer in the folder "res > layout" under the name "activity_splash_screen.xml".

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:scaleType="fitCenter"
        android:src="@drawable/splash" />
</RelativeLayout>

Essentially, our layout only consists of an ImageView in which we display the image "splash.png". We are loading the image in the line android:src="@drawable/splash", which means that Android goes to the drawable folder and looks for an image named "splash" there.

We reach the centering of the image by the properties of layout_width, layout_height, layout_alignParentBottom, layout_alignParentRight and scaleType. The property "fitCenter" ensures that the image is being displayed in a way that it fits on the screen and retains its proportions. When using "fitXY" instead, the image is enlarged so that it occupies the entire screen and it is stretched if necessary.

Code of the Splash Screen Activity

Next, we care about the code in "SplashScreen.java" that you can find in the folder "src" in the Project Explorer. This code should look like this except the first line specifying the package:

package com.sttmedia.splashapp;

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.Window;

public class SplashScreen extends Activity {
    private static final int SPLASH_DURATION = 4000;
    private Handler startMain;
    private boolean isBackButtonPressed;
	  	  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash_screen);
        
        startMain = new Handler();

        startMain.postDelayed(new Runnable() {
            @Override
            public void run()  {
               finish();
                
               if (!isBackButtonPressed) {
                  Intent intent = 
                     new Intent(SplashScreen.this, MainActivity.class);
                  SplashScreen.this.startActivity(intent);
               }   
            }
        }, SPLASH_DURATION); 
    }

    @Override
    public void onBackPressed() {
        isBackButtonPressed = true;
        super.onBackPressed();
    }
    
}

Fundamentally, this code contains a thread that closes (finish) our SplashScreen-Activity after some time and then starts the MainActivity (of course, you can freely change the names of the activities).

How long the splash screen is displayed, is stored in the variable SPLASH_DURATION which is 4000 ms (4 seconds) here. We also catch the back button so that the procedure is executed only directly after stocking the app and not later when pressing the back button.

Android Manifest

Finally, we need to adjust the file "AndroidManifest.xml", you can find directly in the folder of your app in Eclipse.

It should look something like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sttmedia.splashapp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".SplashScreen"
            android:label="@string/title_activity_splash_screen"
            android:theme="@android:style/Theme.NoTitleBar" >
            <intent-filter>
              <action android:name="android.intent.action.MAIN" />
              <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>        
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
        </activity>
    </application>
</manifest>

Here, it is important that only the SplashScreen-Activity contains the lines in the section "intent-filter" because those lines makes that the activity gets its own icon. In addition, we have added the line android:theme="@android:style/Theme.NoTitleBar" which ensures that our splash screen is displayed without a title bar.

If we start our application now and we have done everything correctly, our splash screen is displayed before the start of the main activity for 4 seconds.