How to Create Splash Screen In Android App To Showcase a Functionality for Few Seconds

0
Shares
How to Create Splash Screen In Android App To Showcase a Functionality for Few Seconds
4.5 (90%) 2 votes

how to create splash screen in android

To be honest, the idea of adding splash screen in Android app seems a bit inappropriate to us.

If you think about it, splash screens just waste users’ time, right?

Due to splash screens, a user have to stare at some picture for three seconds until he can use your app. And he has to do this every time he launches your app.

But still, Google recommends that you use a splash screen in Android app. You can see it from here in the material design spec.

Though, this wasn’t the case before. Google used to advocate against using splash screens, in fact called it an Anti-pattern.

adia_no_splash

So the question still needs to be answered.

Should you add splash screen in Android app or not?

The answer is Yes.

Here’s why:

Most of the Android apps take some time to start up, especially on a cold start. There is a delay that you may not be able to avoid. Therefore, instead of giving just a blank screen during this time, why not show something nice to user?

This is the new approach Google is recommending.

Don’t waste the user’s time, and don’t show them a blank screen first time they launch your app.

If you take a look at Google apps, you’ll see the right uses of splash screen.

Take Youtube app for example.

youtube_splash

The amount of time you spend looking at splash screen is the exact amount of time it takes the app to configure itself. Although, this is on a cold launch. But if the app is cached, the splash screen in Android will almost go way immediately.

Now, let’s get to the point. Let’s start the process of how you can create splash screen in Android app to showcase either a functionality or company logo till the app is configured.

Let’s Get Started

Create a new project “Android Splash Screen”

screenshot-from-2017-05-02-16_54_20

Select Target android device.

screenshot-from-2017-05-02-16_54_25

Add an activity to mobile -> Select Empty Activity

screenshot-from-2017-05-02-16_54_29

Customize the Activity.

screenshot-from-2017-05-02-16_54_39

Put a image of dimension 1080 x 1920 into drawable-xxhdpi folder for 5’inch screen.

Create Java class name “SplashActivity”

package com.spaceo.splashscreendemo;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {

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

new Handler().postDelayed(new Runnable() {
@Override
public void run() {

startActivity(new Intent(SplashActivity.this, MainActivity.class));
finish();

}

}, 3000);
}
}

MainActivity

package com.spaceo.splashscreendemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="com.spaceo.splashscreendemo">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:theme="@style/AppTheme">

<activity
android:name=".SplashActivity"
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"
android:screenOrientation="portrait"/>
</application>

</manifest>

activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.spaceo.splashscreendemo.SplashActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:srcCompat="@drawable/splash"/>

</LinearLayout>

activity_main.xml

<?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">

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Screen"
android:textColor="@android:color/black"
android:textSize="32sp"/>
</LinearLayout>

res/values/style.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme"
parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

<style name="splashTheme"
parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowFullscreen">true</item>
</style>

</resources>

And done!

Once you successfully implement this code, you can easily add splash screen in Android app. Though, if you face any difficulty, you can consult with Android app development company to make your splash screen work in a right way.

Get a free copy of Android splash screen demo from Github.

 
0
Shares
 

Have an Idea for Android App? Let's Discuss!

Get your free consultation now