Implement Splash Screen the right way

Splash screens are usually the first thing a user sees when they open an app. I know that as developers mostly newbies you must have gone on to search on Google or Youtube for how to add a splash screen to your app, and my guess is that you were introduced to using a whole Activity with some form of delay with maybe a Thread, Handler or even Coroutines. This approach is bad because:

1. We are Creating a whole Activity that does nothing but to show maybe a logo for some seconds and that's it.
2. Users are not usually patient when it comes to mobile apps, so why waste their time with an Activity that delays for maybe 2 seconds doing nothing.

I must be honest here, I also created splash screens that way before I got this knowledge that I am about to share with you, so sit back and enjoy while I show you the right way to implement splash screens.

Now to the business of the day, I would create a new project named SplashScreenApp, once that is done below are the steps required to get the splash screen working

1. Copy your app logo to the drawable folder

2. Create a drawable file for the splash background

3. Create a custom style inside themes.xml

4. Change the app theme in AndroidManifest.xml to the custom theme

5. Change the app theme back to original in the onCreate method of MainActivity.kt

So in this short 5 steps we would have a well implemented splash screen, we would start from step 2 because I am assuming you should be able to copy your app logo image to drawable folder, for step 2 we need to create a new drawable file called splash_background or whatever you like

splash_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque"> <!-- android:opacity="opaque" should be here -->
    <item>
        <!--this is your background, you can use color, gradient etc.-->
        <color android:color="@color/app_background_color"/>
        <!--<shape>
              <gradient
                   android:angle="315"
                   android:endColor="#1a82ff"
                   android:startColor="#2100d3"
                   android:type="linear"/>
        </shape> -->
    </item>
    <item
        android:drawable="@drawable/ic_app_logo"
        android:gravity="center"/>
</layer-list>

The drawable above is composed of two layers the background color and the drawable image, for the background color I commented out the shape tag that has a gradient in it because I wanted my splash background to be of solid color but if you want you can make use of the gradient. The drawable points to your app logo with a gravity attribute of center which would make the image center on the screen, you could also add width and height to drawable if you want.

Alright to step 3 where we would create a custom style inside the themes.xml folder, if your Android Studio version is less than 4.1.3 then themes.xml might be alien to you but don't worry what I am referring to is the styles.xml file in values folder, for this post I would refer to it as themes.xml.
Now inside the themes.xml we would create a custom style like below

themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TodoApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/app_background_color</item>
        <item name="colorPrimaryVariant">@color/app_background_color</item>
        <item name="colorOnPrimary">@color/gold</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <!-- Custom theme for showing splash screen-->
    <style name="SplashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="android:statusBarColor">@color/app_background_color</item>
    </style>
</resources>

On to step 4, open your AndroidManifest.xml file which should look similar to the one below

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_app_logo"
        android:label="@string/app_name"
        android:roundIcon="@drawable/ic_app_logo"
        android:supportsRtl="true"
        android:theme="@style/SplashTheme">
        <activity android:name=".ui.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

If you observe correctly you would see that the theme attribute inside the application tag is referencing the custom style we created instead of the default style, now that's what you should do replace the style you have there with the custom theme we created and we are good to go.

If we should run our app right now we would notice that something is not right, which is that the splash background is still showing that is not a behavior that we want for our app this is where step 5 comes into play open the MainActivity.kt file

package com.henryudorji

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setTheme(R.style.Theme_TodoApp)
        setContentView(R.layout.activity_main)

    }

}

If you notice you would see that I set the theme back to the default style inside of the onCreate method, now our app is working perfectly. Yes you almost did not even see the splash right? that because you MainActivity is still empty so it loads faster, try adding two or three views to it and see the difference but don't forget the end User does not usually care about your splash screen they just want to use the app as quickly as possible so use this approach and make your app one step faster. Thanks for your time, hope you found this article insightful please leave a like or comment. You can also reach out to me on Twitter @henry_ifechukwu

Comments

[Enrique Perez]

It is cool, according with your post, so the time of the splash screen will be the time the device render the view right? what about a custom delayed time ?

[Henry Udorji]

using a custom delayed time if l am not mistaken means you would have to create a separate activity for the splash then you use a handler for the delay. But the way I explained the splash only shows until the activity is ready