Creating a Splash Screen

PDF for offline use:
Related Samples:
Related Links:

Let us know how you feel about this.


0/250
Thanks for the feedback!

last updated: 2016-01

An Android app takes some time to to start up, especially the first time the app is run on a device. A splash screen may display start up progress to the user or branding.

Overview

An Android app takes some time to to start up, especially the first time the app is run on a device (sometimes this is referred to as a cold start). The splash screen may display start up progress to the user or branding information to identify and promote the application.

This guide will discuss one technique to implement a splash screen in an Android application. It will cover the following steps:

  1. Creating a drawable resource for the splash screen.
  2. Defining a new theme that will display the drawable resource.
  3. Adding a new Activity to the application that will be used as the splash screen defined by the theme created in the previous step.

Requirements

This guide assumes that the application is targetting Android API level 15 (Android 4.0.3) or higher. The application must also have the Xamarin.Android.Support.v4 and the Xamarin.Android.Support.v7.AppCompat NuGet packages added to the project.

All of the code and XML in this guide may be found in the sample project for this guide.

Implementing A Splash Screen

The quickest way to render and display the splash screen is not to use a layout file, but to create a custom theme and apply that to an Activity that is the splash screen. When the Activity is rendered, it will load the theme and apply the drawable resource referenced by the theme to the background of the activity.

The splash screen is implemented as an Activity that will display the branded drawable and perform any initialization/start up tasks. Once the app has bootstrapped, the splash screen Activity will start the main Activity and remove itself from the application back stack.

Creating a Drawable for the Splash Screen

The splash screen will display a XML drawable in the background of the splash screen Activity. It is necesary to have a bitmapped image, such as a PNG or JPG, for the image to display.

This guide will use a layer list to centre the splash screen image in the application. The following snippet is an example of a drawable resource using a layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

This layer-list will centre the splash screen image, a PNG name splash on a background specified by the @color/splash_background resource.

After the splash screen drawable has been created, the next step is to create a theme for the splash screen.

Implementing a Theme

The next step is to create a custom theme for the splash screen Activity. Edit (or add) the file values/styles.xml, and create a new style element for the splash screen. A sample values/style.xml file is show below. With a style named MyTheme.Splash:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
  </style>
</resources>

MyTheme.Splash is very spartan, it only declares the window background and explicitly removes the title bar from the window.

Create a Splash Activity

Now we need a new Activity for Android to launch that has our splash image and performs any startup tasks. The following code is an example of a complete splash screen:

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    protected override void OnResume()
    {
        base.OnResume();

        Task startupWork = new Task(() => {
                Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
                Task.Delay(5000);  // Simulate a bit of startup work.
                Log.Debug(TAG, "Working in the background - important stuff.");
            });

        startupWork.ContinueWith(t => {
                Log.Debug(TAG, "Work is finished - start Activity1.");
                StartActivity(new Intent(Application.Context, typeof(Activity1)));
            }, TaskScheduler.FromCurrentSynchronizationContext());

        startupWork.Start();
    }
}

This new Activity is set as the launcher activity for the application and explicitly uses the theme we created in the previous section, override the default theme of the application. Equally important is setting the NoHistory=true attribue as this will remove the Activity from the back stack.

There is no need to load a layout in OnCreate as the theme declares a drawable as the background.

The startup work is performed asynchronously in OnResume. This is so that the startup work does not slow down or delay the appearance of the launch screen. When the work has completed, SplashActivity will launch Activity and the user may begin interacting with the app.

The final step is to edit Activity.cs, and remove the MainLauncher attribute:

[Activity(Label = "@string/ApplicationName")]
public class Activity1 : AppCompatActivity
{
    // Code omitted for brevity
}

Summary

This guide discussed one way to implement a splash screen in a Xamarin.Android application by applying a custom theme to the launch activity.