Android Splash Screen Tutorial

In diesem Tutorial möchte ich euch zeigen, wie ihr eurer Android App einen Splash Screen verpassen könnt.

Voraussetzung für dieses Tutorial ist, dass wir schon das Grundgerüst einer App aufgebaut haben und lediglich der Splash Screen zu ergänzen ist. Dieses Tutorial erklärt die Schritte in Eclipse, sie lassen sich aber auch leicht auf andere Entwicklungsumgebungen übertragen.

Das Bild für den Splash Screen

Zunächst fügen wir zu unserem Projekt das Bild hinzu, das wir für den Splash Screen verwenden möchten. Dazu öffnen wir im "Project Explorer" auf der rechten Seite in Eclipse unser Projekt und darin den Ordner "res".

Hier stehen nun verschiedene Ordner namens "drawable-[...]dpi" zur Verfügung. Es ist ausreichend unser Bild in einen beliebigen dieser Ordner hineinzuziehen. Welchen Ordner wir nehmen spielt keine Rolle, da wir unser Bild nicht in unterschiedlichen Auflösungen anbieten möchten. In unserem Beispiel haben wir das Bild "splash.png" in den Ordner "drawable-hdpi" gezogen.

Splash Screen Activity erstellen

Anschließend erstellen wir eine neue Activity, die später unser Splash Screen werden soll. Dazu gehen wir in Eclipse auf "File > New > Other" und wählen "Android Activity" aus der Liste.

Es öffnet sich ein Assistent, in dem wir folgendes wählen:

1. Unter "Create Activity" wählen wir "BlankActivity" und klicken dann auf "Next".
2. Unter "New Blank Activity" geben wir im Feld "Activity Name" das Wort "SplashActivity" ein. Man kann hier auch jeden beliebigen anderen Namen wählen.
3. Im selben Fenster geben wir unter "Title" den Namen ein, den unsere App später haben soll. Zum Beispiel "Splash Screen Test App".
4. Jetzt sind wir fertig und können auf "Finish" klicken.

Eclipse wird uns eine Datei "SplashScreen.java" für den Source Code und eine Datei "activity_splash_screen.xml" für das Layout anlegen, die wir im folgenden anpassen möchten.

Layout der Splash Screen Activity

Schauen wir uns zunächst unsere Layout Datei an, die wir im Project Explorer im Ordner "res > layout" unter dem Name "activity_splash_screen.xml" finden.

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

Unser Layout besteht im wesentlichen nur aus einer ImageView, in der wir das Bild "splash.png" zentriert darstellen. Das Bild laden wir über die Zeile android:src="@drawable/splash", was soviel bedeutet wie dass sich Android das Bild aus dem drawable Ordner holt und dort unter dem Namen "splash" nachschaut.

Die Zentrierung erreichen wir über die Angaben zu layout_width, layout_height, layout_alignParentBottom, layout_alignParentRight und scaleType. Die Angabe "fitCenter" sorgt dafür, dass das Bild gerade so dargestellt wird, dass es noch auf die Seite passt und noch seine Proportionen behält. Setzen wir dort stattdessen "fitXY" ein, wird das Bild so vergrößert, dass es den kompletten Bildschirm einnimmt und notfalls dafür gestreckt wird.

Code der Splash Screen Activity

Als nächstes kümmern wir uns um den Code in "SplashScreen.java", den man im Ordner "src" im Project Explorer findet. Dieser Code sollte bis auf die Angabe zum package in der ersten Zeile folgendermaßen aussehen:

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();
    }
    
}

Im wesentlichen enthält dieser Code einen Thread, der zeitversetzt unsere SplashScreen Activity schließt (finish) und die MainActivity startet (der Name der MainActivity lässt sich beliebig anpassen).

Wie lange der Splash Screen angezeigt wird, ist in der Variable SPLASH_DURATION gespeichert und beträgt hier 4000 ms (4 Sekunden). Außerdem fangen wir den Zurück-Button ab, damit die Prozedur nur beim Starten der App ausgeführt wird, und nicht wenn man später den Zurück-Button drückt.

Android Manifest

Zuletzt müssen wir noch die Datei "AndroidManifest.xml" anpassen, die ihr in Eclipse direkt im Ordner eurer App findet. Diese sollte ungefähr so aussehen:

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

Wichtig ist hier, dass nur die Activity SplashScreen die Zeilen im Bereich "intent-filter" enthält, denn diese Zeilen sorgen dafür, dass die entsprechende Activity ein eigenes Icon bekommt. Zusätzlich haben wir hier die Zeile android:theme="@android:style/Theme.NoTitleBar" eingefügt, die dafür sorgt, dass unser Splash Screen ohne Titelleiste angezeigt wird.

Wenn wir unsere App nun starten und alles richtig gemacht haben, wird vor dem Start der MainActivity für 4 Sekunden unser Splash Screen angezeigt.