Tutorial / Android Development

Android Beginner: Creating Splash Screen

The Full Series of Android App Developemnt

In the next couple lessons, we will learn to create a simple android application consists of a splash screen, a button and with sound effects enabled. So, let’s started!

Getting Started

We are assuming that you have necessary tools installed, such as eclipse editor and Android SDK. If you haven’t already, please download all the tools at http://developer.android.com/sdk/index.html

Step 1: Creating Android Project

We start the tutorial by creating an Android project using eclipse editor. Choosing File -> New Android Project, then insert all information as sown below:

Creating Android Project
  • Enter “myApp” for the project name
  • Choose “Create new project in workspace”
  • Please choose your build target as Google APIs Level 8 (Android 2.2)
  • Enter “myApp” for the application name
  • Enter “com.tutorial.myapp” as package name
  • Check the box for “Create Activity” and name it “MainActivity”

Step 2: Setting Up Resources

Next, we will need to create a splash screen image and place it under the /res/drawable-mdpi folder. You can supply multiple densities of images for supporting multiple screens. But in this case, we just supply to medium dpi devices is enough.

Here is the image that we will use for the splash screen.
splash image
320px*480px

Step 3: Creating A Layout For Splash Screen

As you can see in the /res/layout folder, the “main.xml” is the default layout file automatically created when an Android project is created in eclipse. For this case, we will reserve this main.xml for our app’s main screen, which we will use it in the next lesson. So we will create a new layout named “splash.xml” for our splash screen. Do this by choosing File -> New -> Android XML File. Then insert the information as shown below:

New XML Layout
  • Enter splash.xml for the File name field
  • Choose layout for the type of resource
  • Choose Linear Layout as the root element for the XML file

Press finish button and you will see a new splash.xml file is place under /res/layout folder. Open the splash.xml and switch the view mode to “splash.xml” if your current xml view mode is switched to Graphical Layout. Then insert the splash screen image that we stored under /res/drawable-mdpi into the XML file using ImageView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  
  <ImageView 
       android:src="@drawable/splash"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       android:scaleType="fitXY"/>
</LinearLayout>

Step 4: Configuring the Initial View

Before we start to configure our app’s initial view, let’s talk about the activity life-cycle of an Android application. Following is the diagram that shows all statse of the entire lifetime of an activity.

android activity lifecycle

onCreate() is fired when an app is started, so in this tutorial, we will setup all necessary resources in the onCreate() state.

If you want learn more about Activity, please log on to Android Developer Website.

Ok, let’s start to configure our splash screen. Do this by open up our “MainActivity.java” file which located in /src folder. Inside the onCreate() function, we change the “setContentView(R.layout.main)” to the following:

package com.tutorial.myapp;

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

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

Save your code and run your code by choosing “Run -> Run”. Then an Android Virtual Device will launch and run the code that we just wrote. You will see our app showing the splash screen. You may wondering why the splash screen stop and hang there, this is because we haven’t tells Android what to shows after the splash screen!

So, let’s specify how long should we display the splash screen and what to show after next.

We will use a Thread to execute the duration of the visibility of splash screen. A thread is a concurrent unit of execution. Usually developer launch additional thread for specific purpose. Here is how we write a Thread to handle the duration of the splash screen:

package com.tutorial.myapp;

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

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);
        
        Thread logoTimer = new Thread() {
			public void run(){
				try{
					int logoTimer = 0;
					while(logoTimer < 5000){
						sleep(100);
						logoTimer = logoTimer +100;
					};
					startActivity(new Intent("com.tutorial.CLEARSCREEN"));
				} 
				
				catch (InterruptedException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
				
				finally{
					finish();
				}
			}
		};
		
		logoTimer.start();
    }
}

Description:

  • Line 4: Import library of Intent for us to start a new Activity later
  • Line 14-37: Start a new Thread named “logoTimer”, and we instruct the timer to shows the splash screen for 5 seconds (5000 milliseconds). After 5 seconds, we tells Android to start a new Activity named “CLEARSCREEN” via Intent*. This new Activity will displays our app’s home screen right after splash screen.

* Introduction to Intent

Intent is just what it sound like, a way for us to declare to the Android system what you INTENT TO DO. This can be starting a specific activity, or it can be just asking Android system to find some program that can perform an action.

Step 5: Creating App’s Home Screen

Next, we need to create a Java class to handle the app’s home screen. Do this by right click /src folder, “New -> Class”, and insert the following information:

new_java_class
  • Enter “com.tutorial.myapp” for Package
  • Enter “myMainScreen” for Name
  • Choose “public” for Modifiers

Press “Finish” button, then you can see a new Java class is created and placed inside /src folder. Open it up and modify the code as same as below:

package com.tutorial.myapp;

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

public class myMainScreen extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}

}

As you can see above, this class will look for “main.xml” and set it as its layout. We will insert more codes into this class for setting up the app’s home screen in the next lesson.

Step 6: Configuring AndroidManifest XML

Lastly, we need to tells Android to start a new Activity based on the request named “CLEARSCREEN”, which we have specified in the “MainActivity.java” class. The AndroidManifest presents essential information about the application to the Android system, information the system must have before it can run any of the application’s code.

Let’s open up the AndroidManifest.xml and insert the following code:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.tutorial.myapp"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
        <activity
            android:name=".myMainScreen"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.tutorial.CLEARSCREEN" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Description:

  • Line 15 – 21: We receive the instruction named “CLEARSCREEN” from “MainActivity.java” class, then we tells Android system to start a new Activity and class named “myMainScreen”. This will display a app’s home screen after the 5 seconds of splash screen.

Save your code and run in the Android Virtual Device (emulator). Here is our application running in the emulator.

Final Result

Conclusion

In this tutorial, you’ve learned how to create a application consists of splash screen and other activities on the Android platform. You learn about Android App’s Activity, creating Java class, specifying XML layout in Java class and AndroidManifest.xml You’ve only scratched the surface of Android development. Remember to check out all the other great tutorials on onlyMobilePro.com to dive deeper into Android development.

  • Stumble it!
  • Share
  • Anele Ivanova

    Hi,

    Recently I came across some great articles on your site.

    The other day, I was discussing (http://www.onlymobilepro.com/2013/01/16/android-beginner-creating-splash-screen/)with my colleagues and they suggested I submit an article of my own. Your site is just perfect for what I have written!

    Would it be ok to submit the article? It is free of charge, of course!

    Let me know what you think

    Contact me at anelieivanova@gmail.com

    Regards
    Anele Ivanova

  • BInu

    thanks man………. it is a nice and informative note

    • onlymobilepro

      You’re welcome :)

  • Rajesh

    Appreciated Buddy.. Thnxx a lot.. :)

    • onlymobilepro

      You’re welcome! :) Please do like our Facebook Page to get latest article!

  • Pat

    THX SO MUCH! This helped allot! :)

  • Shiraz Syed

    Please help me to get this correct
    I tried every step as you mentioned in your article.
    Another this is, I cannot understand what actually “CLEARSCREEN’ is. This is neither a java class nor a layout xml. So what exactly “CLEARSCREEN’ does.
    thanks in advance.

    • Jirka

      To your manifest:

      • Jirka

        Remember, its instead of this:

      • Saira

        I tried this but it doesn’t work I still get the same mistake the app just crashes after the splash screen.

        Could you help me please? I need to get this done for a project.

    • Bishal singh

      Instead of starting new intent you can do this:
      Intent i = new Intent(currentclassname.this, nextactivityname.class);
      startActivity(i);
      enjoy!!!!!!!!!!!!!!!!

      • Atahan Acar

        This will not work if used inside the thread.

        you can declare the intent i as a final just before the thread:

        final Intent i = new Intent(this, nextactivityname.class);

        and call the startActivity inside the thread

  • Saira

    Hello, I tried to follow every step that you mentioned but I only get the splash screen and then just myapp stops, please help me!!

  • Sundeep

    thanks so much sir..This website really helps…Anyone here can give me an idea of a good design for my project which is Kids Education…I have to display “A for apple, B for…” and so on…any idea for a better design…Honestly I lack that creativity..any help please??

  • Hasan Rahman Sawan

    thanks a lot! great post!

  • Ruchina

    I get unfortunately app has stopped. After doing the same way and the same coding as above.

  • Alex

    Thank you very much, I just started developing on android and this is just want I was looking for!!

  • Pradeep

    Hi, this article is really informative , i have done all the things as mentioned in the above article but when i run my app ,app crashed, so please suggest me what i have to do …. Thanks in advance .

  • Christian Burgos

    thanks for this! i got this working and applied it to the apps that i am making!

  • Prerna Prabhakar

    only the first screen is coming in my app. The second screen is not coming.Pls help me.

    • Ron

      Check if the references to MyMainScreen are everywhere the same. Especially the capital letters. Also check if references to your app are named the same since the example above uses tutorial as name and your project may have a different name.

  • Christopher

    Great tutorial however mine also crashes after the splash activity has been shown..

    Please explain how this can work:
    startActivity(new Intent(“org.mappingindustries.CLEARSCREEN”));

  • neonboy

    could you please explain what is the meanung of clearscreen exactly here? is it flushing ?

  • Ginjaa

    Hi I love the tutorial but is there anyway to rid of that black bar that says myapp during the splash screen?

  • Chris

    I got the splash screen to execute but it is not phasing out to my main screen…
    The only issue that highlighted is that….
    “@drawable/icon” is unrecognized; but I’m not sure if that is my problem…

    • Chris

      is “@drawable/icon” supposed to be “@drawable/splash”?

Error. Page cannot be displayed. Please contact your service provider for more details. (26)