Splash Screen in Android Studio

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:
  1. <resources>    
  2.   <string name="app_name" >Splash </string>    
  3.   <string name="action_settings" >Settings </string>    
  4.   <string name="hello_world" >Hey keep smiling</string>    
  5. </resources>  
Step 3
 
Change "dimens.xml" as:
  1. <resources>  
  2.   <!-- Default screen margins, per the Android Design guidelines. -->  
  3.   <dimen name="activity_horizontal_margin">16dp</dimen>  
  4.   <dimen name="activity_vertical_margin">16dp</dimen>  
  5.   <dimen name="main">40dp</dimen>  
  6. </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:
  1. <resources>  
  2.   <color name="bg">#715a71</color>  
  3.   <color name="txt">#FFFFFF</color>  
  4. </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):
  1. <ImageView  
  2.         android:layout_height="300dp"  
  3.         android:layout_width="300dp"  
  4.         android:id="@+id/image"  
  5.         android:layout_marginLeft="40dp"  
  6.         android:layout_marginTop="80dp"  
  7.         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:
  1. <TextView  
  2.             android:layout_width="fill_parent"  
  3.             android:layout_height="wrap_content"  
  4.             android:text="Hello.."  
  5.             android:textSize="@dimen/main"  
  6.             android:layout_marginLeft="40dp"  
  7.             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:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  6.     android:paddingRight="@dimen/activity_horizontal_margin"  
  7.     android:paddingTop="@dimen/activity_vertical_margin"  
  8.     android:paddingBottom="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity"  
  10.      android:background="@color/bg">  
  11.    
  12.   <TextView  
  13.       android:layout_width="wrap_content"  
  14.       android:layout_height="wrap_content"  
  15.       android:text="@string/hello_world"  
  16.       android:layout_marginTop="150dp"  
  17.       android:layout_marginLeft="30dp"  
  18.       android:textSize="@dimen/main"  
  19.       android:textColor="@color/txt"/>  
  20.    
  21. </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:
  1. package com.splash;  
  2.    
  3. import android.app.Activity;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. import android.view.MotionEvent;  
  7.    
  8. public class Splash_screen extends Activity {  
  9.     private Thread mSplashThread;  
  10.    
  11.     @Override  
  12.     protected void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.         setContentView(R.layout.splash_layout);  
  15.         final Splash_screen sPlashScreen = this;  
  16.    
  17.             mSplashThread =  new Thread(){  
  18.             @Override  
  19.             public void run(){  
  20.                 try {  
  21.                     synchronized(this){  
  22.    
  23.                         wait(5000);  
  24.                     }  
  25.                 }  
  26.                 catch(InterruptedException ex){  
  27.                 }  
  28.    
  29.                 finish();  
  30.    
  31.                 Intent intent = new Intent();  
  32.                 intent.setClass(sPlashScreen, MainActivity.class);  
  33.                 startActivity(intent);  
  34.    
  35.             }  
  36.         };  
  37.    
  38.         mSplashThread.start();  
  39.     }  
  40.    
  41.    
  42.     @Override  
  43.    
  44.     public boolean onTouchEvent(MotionEvent evt)  
  45.     {  
  46.         if(evt.getAction() == MotionEvent.ACTION_DOWN)  
  47.         {  
  48.             synchronized(mSplashThread){  
  49.                 mSplashThread.notifyAll();  
  50.             }  
  51.         }  
  52.         return true;  
  53.     }  

Step 8
 
Open "MainActivity" and set the content view in it to "activity_main":
  1. package com.splash;  
  2.    
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.view.Menu;  
  6.    
  7. public class MainActivity extends Activity {  
  8.    
  9.     @Override  
  10.     protected void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.activity_main);  
  13.     }  
  14.    
  15.    
  16.     @Override  
  17.     public boolean onCreateOptionsMenu(Menu menu) {  
  18.         // Inflate the menu; this adds items to the action bar if it is present.  
  19.         getMenuInflater().inflate(R.menu.main, menu);  
  20.         return true;  
  21.     }  
  22.    

Step 9
 
Open the manifest file, in other words "AndroidManifest.xml", and modify it as in the following:
  1. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     package="com.splash"  
  3.     android:versionCode="1"  
  4.     android:versionName="1.0" >  
  5.    
  6.   <uses-sdk  
  7.       android:minSdkVersion="7"  
  8.       android:targetSdkVersion="16" />  
  9.    
  10.   <application  
  11.       android:allowBackup="true"  
  12.       android:icon="@drawable/ic_launcher"  
  13.       android:label="@string/app_name"  
  14.       android:theme="@style/AppTheme" >  
  15.     <activity  
  16.         android:name="com.splash.MainActivity"  
  17.         android:label="@string/app_name" >  
  18.       <intent-filter>  
  19.         <action android:name="android.intent.action.MAIN" />  
  20.    
  21.         <category android:name="android.intent.category.DEFAULT" />  
  22.       </intent-filter>  
  23.     </activity>  
  24.    
  25.     <activity android:name=".Splash_screen">  
  26.       <intent-filter>  
  27.         <action android:name="android.intent.action.MAIN"/>  
  28.         <category android:name="android.intent.category.LAUNCHER"/>  
  29.       </intent-filter>  
  30.     </activity>  
  31.   </application>  
  32.    
  33. </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 ensures 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 :)


Similar Articles