YouTube Likes Splash Screens

In Almost every app, the client will ask you for a screen showing and highlighting the logo of the brand. This has been a convention for enterprise apps, and has been more commonly known as Splash Screens. Splash screens typically serve to enhance the look and feel of an application or web site and help enhance the personality and branding. If you haven’t already included it in your apps, consider starting now.

When it comes to Android, there are many different ways to implement such a behavior. In this article we’ll go over some of these approaches and end up focusing on the one recommend by Google and deployed in many of Google apps.

The basic and initiative approach is to use a starter screen dedicated completely for this purpose. A separate activity with its own layout that displays whichever content you need the user to see at the very start of the app. Using some kind of scheduler be it a Handler or a Timer, you can easily start the next screen from this splash screen after some time.

This approach has its own pros and cons. Among the pros is that in the starter activity you can handle some API request or initialize some service or any long process. However, when the app is not already running, i.e. the app process is not running yet, AKA, when the app is cold-starting there’s already some delay before the user can interact with your app, and using that approach you’re adding to this delay. Nothing is frustrating to the user than waiting so long at the very start of an app.

At some old devices, this delay may be quite long leading, so try avoiding the approach unless the splash screen is unconventional, i.e. you’re playing some video or initializing some calls.

A slightly refined version of the approach is to use some kind of starter view in the main screen itself, and flip the visibility of this view with the main view after some time just like you did with activities. Although this might be quite smoother, you not doing much to that issue of the cold start!

So what’s the best approach?

The best approach is the one advised by Android team and incorporated in many Google apps among which is YouTube!

You may remember seeing this screen before, that screen that appears when you launch an app from home screen, i.e. when the app is starting from scratch and not restored from the background.

That place holder screen is the result of android window manager doing its best trying to draw a placeholder screen to fill the gap between the app being initialized until the user is able to interact with it! The color of this placeholder screen is mainly interpreted from the app theme such as the background and status bar color.

The good news is, this screen doesn’t have to be solid all the time, instead, it’s quite customizable and you can use your brand logo. Furthermore, you can use it as an alternative for your splash screen. Exactly like YouTube.

So how to achieve this behavior. In a nutshell, you set a custom theme, different from your app theme, for the starter screen only, when the app is being started the background attribute from that theme will be drawn as a placeholder. And when the app is ready for user interaction, you switch back to the app main theme.

For starter create a custom theme for the started activity override the window background attribute

Set that attribute to your own brand logo.

However, that shouldn’t be a native PNG image, instead you should use an XML file, preferably a layer-list file to have more control. One layer of this list will be an image of the logo drawn on top of another solid background layer.

This is an example of a background layer-list file

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

    <!-- Your product brand_logo - 144dp color version of your app icon -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/brand_logo" />
    </item>

</layer-list>

So now the background is already done! You still have to create a style and override the background attribute to that file

<style name="AppTheme.Launcher">
    <item name="android:windowBackground">@drawable/launch_screen</item>
</style>

You may also need to override statusBarColor and navigation bar attributes to match the background color to avoid inconsistency, the result will be something like this.

You only have to assign this theme to the starter activity, remember only the starter activity. You normally do this in the manifest as follow

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

The one last step to go is to programmatically change the activity theme to that main theme applied to the whole app.

public class MyMainActivity extends AppCompatActivity {
 @Override
 void onCreate(Bundle savedInstanceState) {

    setTheme(R.style.Theme_MyApp);
    super.onCreate(savedInstanceState);
 
	setContentView(R.layout.activity_main)
    // ...
  }
}

The good thing about this approach is that it kills two birds with one stone. You’ve implemented the splash screen and also fill that dummy gap at the beginning until the user can interact with your app. That’s why google recommend deploying this approach for splash screens especially when there’s nothing special about the splash screens, no videos or walk through is displayed, and that’s why we’re using this approach as much as possible!