24 June 2014

Splash Screen tutorial in Android

You may have seen in most of the applications that a page appears for few seconds then another page is displayed. Usually the page is the name of the company(developer) which is displayed for 5-6 seconds . They are called splash screens .
If you have seen the screens below as you open any of the android applications. You may have a clear idea what we are going to do now .
These screens have mostly appeared before the app starts when you click the iconand then it disappears suddenly. That's what we are gonna make now .

What we need ?
  1. An xml layout that is the screen appearing for 5-6 seconds .(first.xml)
  2. A class that handles the activity of the splash screen .(First.java)
  3. An xml layout that displays the page after splash screen .(second.xml)
  4. A class that handles activity of the second page . (Second.java)
What are we going to do ?
 -> We are going to make an application with 2 pages. The first page will be displayed for 5 seconds and thereafter the second page will be displayed .

Step 1 : First we make the page which is going to be displayed for 5 seconds
imageview android
You may copy-paste the code from below for the above page (first.xml). It is basically an ImageView in between a Relative Layout .

first.xml
<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"
    tools:context=".First" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_launcher" />
</RelativeLayout>

Step 2 : Then we have to make an Activity class for the above layout so that it is displayed for only 5 seconds . The name of our file is First.java. Just remember the Life-cycle of Android .
First.java :
package com.mia.splash;

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

public class First extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.first);

        Thread timer = new Thread(){
            public void run(){
                try{
                    sleep(5000);
                }catch(InterruptedException e){
                    e.printStackTrace();
            }
        finally{
            Intent openSecond_page = new Intent("com.mia.splash.SECOND");
            startActivity(openSecond_page);
        }
        }
    };
timer.start();
}

    @Override
    protected void onPause() {
        // TODO Auto-generated method stub
        super.onPause();
    
        finish();
    }
    
    } 

Step 3 : We make another layout for displaying the page after the splash screen .We name it second.xml .
welcome page

The code for the layout second.xml is given below :
second.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="This is the main page of our Application"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:text="Welcome to Made In Android"
        android:textColor="#FF0000"
        android:textSize="40dp" />
</RelativeLayout>

Step 4 : The java file for the second page (Second.java) is as follows :
Second.java
package com.mia.splash;
import android.app.Activity;
import android.os.Bundle;

public class Second extends Activity{  
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.second);
}
}

Step 5 : Add the classes in AndroidManifest.xml file as shown below .

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mia.splash"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        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.mia.splash.First"
            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="com.mia.splash.Second"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.mia.splash.SECOND" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Step 6 : Run the project .
The below page will be displayed for 5 seconds .
splash screenfinal screen

Explanation of the code :
  • In the class First we call the first.xml layout (as we call the class First the layout first.xml will be displayed) .
  • We define a Thread object to control the time for displaying time the page.
  • You may know that run() method is important to implement when we play with Threads .
  • In the run() method we sleep the execution for 5000 milliseconds(i.e. 5 seconds) .It means there will be no execution of program for 5 seconds .
  • We use the try-catch block to avoid ThreadStateException  .
  • Then in the finally block to display the secondactivity(i.e. the next page) .
  • The finally block is called even when exception is occured or not (in any case).
  • The onPause() method is used to pause the execution of the super class (First class).
  • The Second class is executed normally after the First class is executed .
  • In the AndroidManifest.xml the class which has MAIN action is executed first then the class with DEFAULT action is executed .
Stay Tuned with Made In Android

Previous Page Next Page Home

No comments:

Post a Comment

Top