Creating a Splash Screen in Android : Part 1

Image Credits: Splash screen animation by Cuberto

Dev X: Dude, do you know how to implement Splash Screen?
Dev Y: Obvio, that’s super easy. 😋
X: Awesome, I was wondering if you could help me with the cold start issue?
Y: wait, what Cold Start? what are you talking about? 😕🤷🏻‍♂

Don’t be too judgemental. I know, to create a Splash Screen, is a piece of cake for you, but can you please check if it was created the way it should be ? Apart from designing, Developers face this two big challenges:
1. Handling Cold Start Issue
2. Saving the state and progress

In this article, we will address Cold Start Issue.
Buckle up, fellas!

The Cold Start Issue:

We know how it feels to get out of bed and start our day in Cold. We take some time yawning and stretching before we could actually get out of blanket.

Same thing goes with Android, when your app has its fresh start, and not resuming from its stale state, it takes some time to load its resources.

Did you notice the white screen while loading the app ? Yeah, that’s the issue, we call Cold Start which is kinda bad User Experience.

This can go worse if you fill your application class with bunch of initialisation.

The Truth is:

we can’t avoid this. But… we can use this delay as a weapon against bad User Experience.

The Solution:

When you start your app, it first creates a window into which your activity would load. Now, every Window has its own background, which comes from the theme you’ve applied. For the image above, I applied the theme as:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

Which is why it showing white color which is applied to Window background. But here’s the trick! You can replace this background color with the theme color with an image in center of screen. Lets see how!

Step 1:

Create a background that matches your theme, and have your app Logo in the center. For that, create a LayerList, lets say ll_win_bg_splash.xml in drawables folder as below:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">

    <item android:drawable="@color/colorPrimary" />

    <item
        android:drawable="@drawable/ic_android"
        android:gravity="center" />
</layer-list>

Step 2:

Create a style, lets name it as ColdStart that extends style AppTheme as below:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="ColdStart" parent="AppTheme">
        <item name="android:windowBackground">@drawable/ll_win_bg_splash</item>
    </style>

</resources>

Step 3:

Apply this style as theme to your activity registered in manifest as below:

<activity
    android:name=".SplashActivity"
    android:theme="@style/ColdStart">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Step 4:

Have nothing in your Activity layout, simply add transparent background to your layout and make your activity FullScreen as:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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"
    android:background="@android:color/transparent"
    tools:context=".SplashActivity" />

To make activity full screen, write below lines in Activity as:

override fun onCreate(savedInstanceState: Bundle?) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN
    }
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_splash)
}

The Result:

So this was the solution to the first part of our problem — Handling Cold Start Issue.

In the next part, we will discuss about what if the User navigates away from the app while Splash screen was running, and how shall we handle this situation ? Stay tuned!

Liked this article? a few claps, may be! 👏🏻
Loved it? share it with your friends 😍

Thanks Paresh Mayani and Yash Soni for reviewing this article.