Introduction:
Often while programming (especially while making a game) we need a screen that would first show up and then is closed by itself. Such a screen is called a Splash screen.
In this article you will learn how to create a simple splash screen. You can use such splash screen to show a logo, image or introduction of something while your main application is loading. In this article I will use an image as a splash screen.
Step 1:
First I am choosing an image that I want to be my splash screen. Copy this image to the clipboard and paste it in "res->drawable". You can paste the image in all the drawables like "drawable-hdpi", "drawable-mdpi" etcetera, to get a view in all sizes. The name of the image I am using is "smile.png".
Step 2:
Change "strings.xml" as:
<resources>
<string name="app_name" >Splash </string>
<string name="action_settings" >Settings </string>
<string name="hello_world" >Hey keep smiling</string>
</resources>
Step 3:
Change "dimens.xml" as:
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="main">40dp</dimen>
</resources>
Step 4:
For adding the required colors to your application, make a new resource file. "Values" -> "New" -> "Values resource file". Name this as "color" and use the following code in it:
<resources>
<color name="bg">#715a71</color>
<color name="txt">#FFFFFF</color>
</resources>
Step 5:
Let us make the splash screen layout.
Right-click on Layout then select "New" -> "Layout resource file". Name this file as "splash_layout" and add the following to it (inside the linear layout element):
<ImageView
android:layout_height="300dp"
android:layout_width="300dp"
android:id="@+id/image"
android:layout_marginLeft="40dp"
android:layout_marginTop="80dp"
android:src="@drawable/smile"/>
The layout looks like:
![im1.jpg]()
Note that I have used an image as my splash screen. You can use anything else as your splash screen. For example: for using text as a splash screen use the following code instead of the ImageView used above:
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello.."
android:textSize="@dimen/main"
android:layout_marginLeft="40dp"
android:layout_marginTop="80dp"/>
Step 6:
Now let us make the layout of the screen we want to show after the splash screen disappears. Open "activity_main" and add the following code to it:
<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="@color/bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:layout_marginTop="150dp"
android:layout_marginLeft="30dp"
android:textSize="@dimen/main"
android:textColor="@color/txt"/>
</RelativeLayout>
Step 7:
Make a Java file for the splash screen. "Java" -> "New" -> "Java class" and name it as "Splash_screen". Add the following code to this file:
package com.splash;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
public class Splash_screen extends Activity {
private Thread mSplashThread;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splash_layout);
final Splash_screen sPlashScreen = this;
mSplashThread = new Thread(){
@Override
public void run(){
try {
synchronized(this){
wait(5000);
}
}
catch(InterruptedException ex){
}
finish();
Intent intent = new Intent();
intent.setClass(sPlashScreen, MainActivity.class);
startActivity(intent);
}
};
mSplashThread.start();
}
@Override
public boolean onTouchEvent(MotionEvent evt)
{
if(evt.getAction() == MotionEvent.ACTION_DOWN)
{
synchronized(mSplashThread){
mSplashThread.notifyAll();
}
}
return true;
}
}
Step 8:
Open "MainActivity" and set the content view in it to "activity_main":
package com.splash;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Step 9:
Open the manifest file, in other words "AndroidManifest.xml", and modify it as in the following:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.splash"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="16" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.splash.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
<activity android:name=".Splash_screen">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
Note that in the code above "MainActivity" has been set as "DEFAULT" and the splash activity as "LAUNCHER". Setting the splash activity as launcher ensure that when the application is launched or first started, the splash screen will be displayed. After the splash screen is displayed for "5sec" (as specified in Splash_screen.java), the default activity will start.
The output snapshots.
The splash screen:
![im2.jpg]()
The default screen:
![im3.jpg]()
Thank you..... Enjoy coding :)