codeofaninja
website

Ways to Create a Splash Screen for Android App

Photo of Mike Dalisay
Modified Monday, February 11, 2013
by - @ninjazhai
Today we're going to create a splash screen for your Android app. A splash screen is usually an image or a view that appears to the user while the app is loading, it is also a way to make your brand or logo easier to be recognize by the user. Some android apps that uses splash screens include Facebook, Pocket and of course, the game apps. I'm going to show you two ways to create android splash screens.

Example logo to be seen in our splash screen.

Splash Screen With Two Activities


The first way I'm gonna teach you is using two activities, the first activity will be our splash screen and the second activity will be our app's main screen. The splash screen activity will  be shown for four seconds and then it will show the next activity. Download the code here:

download code - Ways to Code a Splash Screen for Android

Here are the files we need:

Highlighted are the files we have to create.

SplashScreenActivity.java - The initial activity executed. This activity will end with an animation that depends on the device.
package com.example.splashscreenexample;

import java.util.Timer;
import java.util.TimerTask;

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

/*
 * This is our first activity.
 */
public class SplashScreenActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // remove title bar
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        // our layout xml
        setContentView(R.layout.activity_splash_screen);

        // we're gonna use a timer task to show the main activity after 4 seconds
        TimerTask task = new TimerTask() {

            @Override
            public void run() {

                // go to the main activity
                Intent nextActivity = new Intent(SplashScreenActivity.this,
                        MainActivity.class);
                startActivity(nextActivity);

                // make sure splash screen activity is gone
                SplashScreenActivity.this.finish();

            }

        };

        // Schedule a task for single execution after a specified delay.
        // Show splash screen for 4 seconds
        new Timer().schedule(task, 4000);

    }

}


MainActivity.java - Our app's main screen, where the main functions of your app should be seen.
package com.example.splashscreenexample;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // remove title bar
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        // our main activity layout
        setContentView(R.layout.activity_main);
        
    }
}


codeofaninja350pxwidth.png - An example image used in the splash screen. This is included in the code download.

Splash Screen with One Activity


The second way to create a splash screen is using just one activity - your MainActivity. It should be covered with an ImageView first and then after few seconds, it will disappear with a simple fade-out animation to make it look smooth. Download code this code:


Files we need are highlighted below:

We'll work on three files in this example.

MainActivitity.java - The file with double purpose, it will show our splash screen and then main screen.
package com.example.splashscreenexample2;

import java.util.Timer;
import java.util.TimerTask;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // remove title bar.
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);

        // our timer task.
        TimerTask task = new TimerTask() {

            @Override
            public void run() {

                // we have to run it on UI thread so we won't get view error
                MainActivity.this.runOnUiThread(new Runnable() {
                    public void run() {

                        // get the splash image
                        ImageView splashImage = (ImageView) MainActivity.this
                                .findViewById(R.id.imageViewSplashLogo);
                        
                        // make the splash image invisible
                        splashImage.setVisibility(View.GONE);

                        // specify animation
                        Animation animFadeOut = AnimationUtils.loadAnimation(MainActivity.this,
                                R.anim.splash_screen_fadeout);
                        
                        // apply the animattion
                        splashImage.startAnimation(animFadeOut);
                        
                    }
                });

            }

        };

        // Schedule a task for single execution after a specified delay.
        // Show splash screen for 4 seconds
        new Timer().schedule(task, 4000);

    }

}


splash_screen_fadeout.xml - It will make our splash screen gone beautifully - a simple fade-out animation.
<?xml version="1.0" encoding="utf-8"?>
<!--
    -zAdjustment makes sure the activity is on top
    -interpolator defines the rate of change of an animation
    -we use decelerate_interpolator to reduce animation speed from visible (Alpha 1.0) to invisible (Alpha 0.0)
-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toAlpha="0.0"
    android:zAdjustment="top" />


codeofaninja350pxwidth.png - our example logo.

Output screenshots:

Ways to Code a Splash Screen for Android
Splash screen.

Main Activity.

The Code of a Ninja Resources

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
 
 
Fundamentals
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.