Android Splash screen is an UI that is shown just before main UI is shown in any android application. There are various purposes for which we use this screen. Generally, we use it for following purposes
1. To show app logo: We show application’s brand/logo etc. using splash screen. We use timer for this purpose.
2. To get/fetch basic data from server that we must need to use the application : You can use splash screen to send data to the server and/or download resources(image, files, videos etc) from server to use in application. For example,
a. Downloading data and storing it in database.
b. Download required images.
c. Parse Json/xml file.
d. Send device information and register the device to the server.
3. To show something even before your application is started, i.e. main-activity layout is inflated by the system: As per google recommendation, this should be the actual purpose of splash screen. Whenever we start android application, it actually takes some time to inflate the main activity layout, specially in Cold Launch. In this duration, you will see white(blank) screen. Overtime, google suggested that you can use splash-screen between this duration so that it looks nice. Moreover, Google also recommended that do not waste user’s time in order to show the splash screen. Finally, show splash screen untill your application’s main layout is inflated. We can use our application’s logo to show as a splash screen.
Now-a-days, people use android splash screen for any reason (mentioned above). So, i will be covering all the above conditions under which we use android splash screen. You can implement as per your need.
Output
At the end of the tutorial, you will get output as below.
Tutorialwing Android Splash Screen Tutorial
Video Output
Source Code
Tutorialwing Tutorial Source Code
Let’s start the tutorial now,
Getting Started
In this tutorial, I will be covering all the above conditions under which people use android splash screen.
Note: Although i am covering all the conditions under which android splash screen is used, i would recommend to follow google recommendations.
Unfortunately, There is no in-built mechanism to implement android splash screen in android application as compared to IOS. So, we are going to implement splash screen using activity.
All the above scenarios will have same code except SplashScreenActivity.class file. You just need to modify SplashScreenActivity.class file to change to different scenarios.
So, Let’s start the tutorial by creating new project and implementing basic stuffs. After that, we will start implementing splash screen for each scenario one by one.
1.1 Creating New Project
Follow steps written below to create a new project.
a. Goto File –> New –> New Project. Then, Write application name as SplashScreenTutorial and click next.
b. Select Minimum SDK 15 or more –> click next –> Select Empty Activity –> click next –> click finish.
If you have followed above process correctly, you will get a newly created project successfully.
1.2 Basic setup for SplashScreen
Let’s go through the files in project one by one…
MainActivity.java
package tutorialwing.com.splashscreentutorial;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/activity_main" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:padding="@dimen/padding_medium" android:text="@string/message"/> </RelativeLayout>
dimens.xml file
<resources>
<dimen name="padding_medium">18dp</dimen>
</resources>
strings.xml file
<resources>
<string name="app_name">SplashScreenTutorial</string>
<string name="message">This is Android Splash Screen Tutorial by tutorialwing.com</string>
</resources>
For Splash screen we are going to create an activity. So, Create a separate activity and name it SplashScreenActivity.java. What to write in this file will be discussed later.
Now, Open your AndroidManifest.xml file and write below code in it. Note that i have made SplashScreenActivity as launcher activity. You too need to do this so that whenever our app starts this will be the activity to be launched first.
AndroidManifest.xml file
<?xml version="1.0" encoding="utf-8"?> <manifest package="tutorialwing.com.splashscreentutorial" xmlns:android="http://schemas.android.com/apk/res/android"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".SplashScreenActivity" android:theme="@style/AppTheme"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <activity android:name=".MainActivity"> </activity> </application> </manifest>
Till now, we have seen the common things that we need in this tutorial. Now, we will go through each scenario in which we use splash screen.
1.2.1 Android Splash Screen showing Brand/App logo as
Create an xml file activity_splash.xml in res=>layout folder, and write setContentView(R.layout.activity_splash.xml) in SplashScreenActivity.java file.
activity_splash.xml file
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/logo" android:scaleType="centerCrop"/> </LinearLayout>
SplashScreenActivity.java file using timer
package tutorialwing.com.splashscreentutorial;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
public class SplashScreenActivity extends AppCompatActivity {
// Splash screen timer
private static int TIME_OUT = 3000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_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 i = new Intent(SplashScreenActivity.this, MainActivity.class);
startActivity(i);
// Close this activity
finish();
}
}, TIME_OUT);
}
}
Here, whenever our app starts it launches SplashScreenActivity. This screen will be visible for 3 seconds only. After that, MainActivity will be started.
1.2.2 Show Android Splash Screen while fetching/sending Data from/to the server
Here, we will see how to use android splash screen while making any HTTP calls to the server. We will use async task to send request to the server. However, you can send request to server using any techniq.
Create an xml file activity_splash.xml in res=>layout folder, and write setContentView(R.layout.activity_splash.xml) in SplashScreenActivity.java file.
activity_splash.xml file
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/logo" android:scaleType="centerCrop"/> </LinearLayout>
SplashScreenActivity.java file using AsyncTask
package tutorialwing.com.splashscreentutorial;
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SplashScreenActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
// Start Http Network call
new GetOrFetchData().execute();
}
/**
* Async Task to make HTTP calls.
*/
private class GetOrFetchData extends AsyncTask<Void, Void, Void> {
@Override
protected void onPreExecute() {
super.onPreExecute();
// This is called before sending actual HTTP call...
}
@Override
protected Void doInBackground(Void... arg0) {
// Write the code here to make HTTP calls....
// For the sake of simplicity of the post, I am only mentioning what to write here and not the actual code.
// Once your HTTP calls are complete, onPostExecute method will be called with the intended result.
return null;
}
@Override
protected void onPostExecute(Void result) {
super.onPostExecute(result);
// This method will be called after completion of HTTP call. So, Retrieve the intended data
// and start the main activity. You can also pass this data to main activity using putExtra or
// some similar methods.
// Make sure you close this activity after starting MainActivity.
// Start MainActivity...
Intent i = new Intent(SplashScreenActivity.this, MainActivity.class);
// i.putExtra("key1", value1);
// i.putExtra("key2", value2);
startActivity(i);
// Close This Activity
finish();
}
}
}
Here, whenever our app starts it launches SplashScreenActivity. This screen visible until server request is complete. However, I have not shown Code related to server just for the sake of simplicity of this post. You can send server request inside doInBackground(…) method. After completion of the task, onPostExecute method will be called. Here, we are sure that AsyncTask is complete now. So, We are starting MainActivity and calling finish() method for current activity. You can also pass data from current activity to MainActivity if you need. I have already shown this in onPostExecute method.
1.2.3 Show Android Splash Screen as per google recommendation
Many of us may have noticed that whenever our app starts, it takes some time to fully initialise the views. During this period, we see blank screen. As per google recommendation, we should show splash screen instead of those blank screen. You will see this blank screen specially in cold start. In this part, I am going to show how to use splash screen as per google recommendation.
Goto res => values => styles.xml file and add below code into it. Here, we have created a theme for our splash screen.
styles.xml file
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>
Note that i have created a new style to be used with splash activity. We will see how to use it soon…
Now, you need to create a drawable file(background_splash.xml) in res => drawable folder. Add the below code in it. Here, we are going to write how our splash screen will look. You will also need an image logo.png. You can download it from the source-code link given above.
background_splash.xml file
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@color/colorPrimary">
</item>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo"/>
</item>
</layer-list>
Now, in AndroidManifest.xml file, Add activity theme as SplashTheme (already defined in res => styles.xml file).
Finally, our AndroidManifest.xml file would look like below.
AndroidManifest.xml file
<?xml version="1.0" encoding="utf-8"?> <manifest package="tutorialwing.com.splashscreentutorial" xmlns:android="http://schemas.android.com/apk/res/android"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".SplashScreenActivity" android:theme="@style/SplashTheme"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> <activity android:name=".MainActivity"> </activity> </application> </manifest>
Our SplashScreenActivity.java file would look like below.
SplashScreenActivity.java file
package tutorialwing.com.splashscreentutorial;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SplashScreenActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
startActivity(new Intent(this, MainActivity.class));
finish();
}
}
Notice that we have not added any layout file with this activity i.e. we have not used setContentView(R.layout.activity_splash) in onCreate() method. Reason is we do not need it. Our purpose is to show splash screen until our app is fully initialised and view is fully inflated. As soon as our app is fully initialised and view is inflated, we do not need splash screen anymore. So, i am calling MainActivity and killing this activity since we do not need it now.
Output
That’s it for Android Splash screen tutorial. I hope you liked it. 🙂
Now, Run the application and you will see the output as shown above. I have shown same splash screen in all the above scenario. However, you can design the splash screen as per your need.
Conclusion
Android splash screen has always been attractive feature as it enhances UI of any application. This is used for many purposes like showing brand logo, sending/getting data to/from server etc. There is also google recommended way to use splash screen in android. However, you can use it as per your requirements. This tutorial explains all the scenarios in which splash screen can be used.
You must be logged in to post a comment.