Splash Screen
What is Splash?
Android splash screen are normally used to show user some kind of progress before the app loads completely. Some people uses splash screen just to show case their app / company logo for a couple of second. Unfortunately in android we don’t have any inbuilt mechanism to show splash screen compared to iOS. In this tutorial we are going to learn how to implement splash screen in your android application.
Splash screen use case scenarios
The purpose of splash screen depends upon the app requirement. Check out the following points which gives explanation about two use case scenarios.
- Use Splash Screen to show app logo , it uses a timer to dismiss.
- Show Splash Screen when making network calls (http) / preparing app.
- Downloading Images.
- Fetching and parsing Json/ XML.
In this tutorial I’ll be covering implementation of splash screen using a timer .
VIDEO DEMO
In order to implement splash screen we are going to create a separate activity for splash and once it closes we launch our main activity.
So let’s get started by creating a new project
1. Android Splash Screen Using Timer
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. For Splash Screen we are creating a separate activity. Create a new class in your package and name it as Splash.java
3. Open your your AndroidManifest.xml file and make your splash screen activity as Launcher activity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.firsttutorail" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="21" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.firsttutorail.Splash" 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.firsttutorail.MainActivity" > </activity> </application> </manifest> |
4. Create a layout file for splash screen under res ⇒ layout folder. I named the layout file as splash.xml. This layout normally contains your app logo or company logo. You can paste your image/logo under res ⇒ drawable folder and set it to background to the layout.
|
1 2 3 4 5 6 7 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/abc" > </LinearLayout> |
5. Add the following code in Splash.java activity. In this following code a handler is used to wait for specific time and once the timer is out we launched main activity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
package com.firsttutorail; import android.content.Intent; import android.os.Bundle; import android.os.Handler; import android.support.v7.app.ActionBarActivity; public class Splash extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.splash); new Handler().postDelayed(new Runnable() { /* * Showing splash screen with a timer. This will be useful when you * want to show case your app logo / company */ @Override public void run() { // This method will be executed once the timer is over // Start your app main activity Intent in = new Intent(Splash.this, MainActivity.class); startActivity(in); // close this activity finish(); } }, 3000); } } |
6. Create a layout file for main activity under res ⇒ layout folder. I named the layout file as activity_main.xml.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:padding="5dp" > <TextView android:id="@+id/textView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:padding="5dp" android:text="Email ID" android:textSize="18dp" /> <EditText android:id="@+id/editText1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:ems="10" android:hint="email id" android:padding="5dp" android:textSize="15sp" /> <TextView android:id="@+id/textView2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/textView1" android:padding="5dp" android:text="Password" android:textSize="18dp" /> <EditText android:id="@+id/editText2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:ems="10" android:hint="password" android:inputType="textPassword" android:padding="5dp" android:textSize="15sp" > </EditText> <Button android:id="@+id/button1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" android:text="Login" /> </LinearLayout> |
7. Add the following code in MainActivity.java activity. In this following code we just set view over this activity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
package com.firsttutorail; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
Run the application, you will see the splash screen for 3 sec and then your main activity will be launched.
Thanks 🙂