Learn Programming Together: App Splash Screen with AppCompat theme

In this post, I will talk about the necessary of splash screen in an Android application and how to use them and how to go beyond in order to offer the best user experience of onboarding to users.

Splash Screen matter

Splash screen or launch screen is a graphical control screen consisting of window containing an image, a logo and the current version of the application. It appear at the first launching time and automatic switch to other app's screen after a period time (usually less than 5 seconds).
According to this post, Colt McAnlis, (developer advocate at Google) again opened the discussion regarding the usage of splash/launch screens on Android sharing a keynote by Cyril Mottier which, among other things, talks about why we should avoid using Splash Screens on Android because:

A splash screen prevents the user from using the application.
Most of the time, it is not necessary.
Displaying a launch image or splash screen in not part of the framework: there is no official post, doc from Google about this!
Adding once-viewed resources increase the size of your APKs.
Users don’t care about branding at launch time.
A splash screen indicates a single-entry point application.
In a multitasking context, launch images have no meaning.

In my opinion, users should have the content available as soon as possible, but Android also need a short time to preparing data for app. So, the splash screen is still necessary, but will disappear in a short period of time, soon after the end of the data preparation process.
For all the above reasons, the traditional splash screen created by making an Activity and automatic finish after a time by a Handler is avoided. In this post, I will guide you an another way to make it by using AppCompat theme, this is a new way and get user feel more comfortable and convenient. Your app still have time to preparing data and users will not have to wait for a long time.

Customizing windowBackground

When app is launching, Android creates a new process that, during it charge, shows a black/white screen which is built with the application theme, or the theme of the activity that is the entry point. The window displayed by the window manager when the process is in the loading state is set up with the theme. Specifically with the value inside android:windowBackground. Now, we can custom this windowBackground with a <layer-list> with the color of the background of the activity over a small bitmap in the center. Put this file in res/drawable folder:

launch_drawable.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <!-- The background color, preferably the same as your normal theme -->
    <item android:drawable="@android:color/white"/>
    <!-- Your product logo - 144dp color version of your app icon -->

    <item>
        <bitmap
            android:src="@drawable/logo"
            android:gravity="center"/>
    </item>
</layer-list>

NOTE: the <layer-list> has to be opaque with android:opacity="opaque". And the background of the parent of your activity should be filled with a color in your layout.

Declaring the "Launcher theme"

Make sure that you have a default theme in your styles resource, for example, AppTheme. So, create a AppTheme.Launcher using above drawable like this:

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- 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="AppTheme.Launcher">
        <item name="android:windowBackground">@drawable/launch_drawable</item>
    </style>

</resources>

In AndroidManifest.xml, use your launching Activity with the launcher theme:

AndroidManifest.xml

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme.Launcher">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Setting in programmatically code

Back to Activity code, the easiest way to transition back to your normal theme is to call setTheme(R.style.AppTheme) before super.onCreate() and setContentView():

MainActivity.java

package info.devexchanges.launchscreen;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        /**
         * Prepairing your data (in SharedPreferences, database,...) here!!!
         *
         */

        // Make sure this is before calling super.onCreate
        setTheme(R.style.AppTheme);

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("Main Activity");
    }
}

As you can see in code, you have noticed where your preparing data process can be implement! After running this app, you will have this output (this demo app don't load any data so the splash screen will disappear very quickly):

Final thoughts

Things to note with this approach:

No launchpad activity: there’s no delay such as there would be if you were launching a second activity from a dedicated splash screen style activity.
No artificial delays: you’re only using the time that you have, just taking advantage of theming.
No extra overdraw: resetting your theme removes a layer of overdraw compared to having an opaque view with your normal background above the custom windowBackground.
Only for your launcher activity: this isn’t appropriate for deep links into your app or handling an URI, but for launches done through the home screen - the point is to minimize dead time, not to annoy users.
Fast is best: keeping your app lean and minimizing work done at startup is critical to a good experience, even if that means slightly less time for branding - remember: getting users to the content they care about should be your #1 priority.
Watch your transition: keep both the number and complexity of your transitions to a minimum by sharing as many elements (colors, etc) as possible to make for a seamless transition straight to content.

Finally of all, splash screen is useful in waiting application prepare data, but, it is a design pattern from iOS. Android developers should avoid this cold start design by remove it or make it with AppCompat theme like in this post - never creating it as an Activity and automatic finish after a while, please! Moreover, you can read this post to find out other onboarding style to make your app appearance more flexible.