Cross Platform
Android
iOS
Mac

Creating a Splash Screen

Cold starting an application on an Android device usually takes a couple of seconds. During this time, users need feedback to let them know your application is loading. Here is one way to create a splash screen for your application.

Add Splash Screen Image

First you need a splash screen image. Because Android devices come in various resolutions, you may want to ship several splash screens as described in Google's Best Practices for Supporting Multiple Screens. For simplicity, we'll just ship one here that is 480x800. It should support most phone sizes pretty well, and Android will scale it as best it can.

Add the following image into your Resources\Drawable folder:

Create a Theme with Your Splash Screen

Android lets us assign themes to an activity. We do it this way because Android is able to show this immediately, before we even start loading. Obviously, we want the splash screen to show up as soon after the user launches our application as possible. The first thing we need to do is to add a new XML file named /Resources/Values/Styles.xml as shown in the following screenshot from Xamarin Studio:

When this file is added to the project, the build action should automatically be set to AndroidResource as shown in the following screenshot:

Next, edit the contents of /Resources/Values/Styles.xml and paste in this code:

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

This creates a new theme called Theme.Splash that sets the window background to our splash image and turns off the window title bar. (You can remove item with name="android:windowNoTitle" if you want to keep the title bar.)

Create a Splash Activity

Now we need a new Activity for Android to launch that has our splash image. Add a new activity to your project called SplashActivity, and use the following code:

namespace SplashScreen
{
    using System.Threading;

    using Android.App;
    using Android.OS;

    [Activity(Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            Thread.Sleep(10000); // Simulate a long loading process on app startup.
            StartActivity(typeof(Activity1));
        }
    }
}

In the [Activity] attribute, we specify:

  • MainLauncher - this is the activity that should be launched when the user clicks our icon
  • Theme - tell Android to use our theme we made for this activity
  • NoHistory - tell Android not to put the activity in the 'back stack', that is, when the user hits the back button from the real application, don't show this activity again

In OnCreate, we simply call StartActivity, passing it the first activity of our application. If you wanted to ensure the splash screen stays up for a certain amount of time, you could add a sleep for a few seconds before calling StartActivity.

Finishing Up

The only thing left we need to do is remove MainLauncher = true from the [Activity] attribute on our actual activity. This controls if this activity has an icon in the application launcher. We want people to always go through our splash screen activity, so simply remove it from your regular activity.

Now you should be able to compile and run your application, and get a nice splash screen while your application loads!