A splash screens it’s what we call to those screens that show up at the beginning of an app and last only while the application loads.

This is a common design pattern in general mobile development, allowing the user to receive feedback immediately after touching an app’s icon, showing them something right from the beginning instead of staring at a black screen until the application finishes loading.

Best of all, adding a splash screen is really simple, so you’ll get a better user experience without much effort. Let’s begin!

Creating a splash-screen

Before we begin, we need to understand is that there is no cross-platform way of adding a splash screen. This is because the Xamarin.Forms library loads after MainActivity/AppDelegate finishes loading and by that time it’s too late, we need something to display before and during those classes load, after all, that’s what splash screens are all about.

With that in mind, what’s left is to create the splash-screen file and configuration on each platform. In our case, the splash-screen will consist of a logo and a background color.

Android

The first thing we need is the logo image. Android provides a definition of how to add images and ensure it looks good on every platform, you can read about it here

After that, we are to create the splash screen file, which loads the image and sets the background we need. For that, we are going to define an XML drawable, here’s the code:

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

Here, we defined a layer-list which essentially allow us to have a background color and an image background at the same time, having the first <item> define the background color and the second one the image logo centered on the screen.

With that in place, then we define a new style to set this drawable as the background and ensure it takes up all the screen available on the device by removing any action/status bar, here’s the code:

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

Finally, we create a new activity called SplashActivity where we configure it as the MainLauncher (be sure to remove it from the MainActivity.cs) and make it use the new style we defined.
Then, we start the MainActivity from the OnCreate() method, that way, it loads the screen that starts up the rest of the app once it’s ready.

[Activity(Label = "SplashActivity", Theme = "@style/Splash", MainLauncher = true)]
public class SplashActivity : Activity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        StartActivity(typeof(MainActivity));

        Finish();
    }
}

Some additional notes :

  1. The call to Finish is to ensure the activity doesn’t stay up on memory while the app is running since we won’t need it ever again.
  2. We created a new activity instead of using the MainActivity because the drawable we defined becomes the background of the activity and therefore we would end up overriding the background property on each Xamarin.forms page.
  3. We use an XML drawable and not a standard layout because this approach is much faster.

iOS

As with Android, on iOS we need to include the logo image according to the apple standards to ensure it looks good in all their supported resolutions, you can find the guide here.

With all the images at hand, it’s time to add it to our project and to do so we are going add them to a special folder called Assets.xcassets. We can find it on the iOS project section inside the solution explorer window.

Assets.xcassets folder location where the splash screen images should be located.

Double click it and a new tab window will appear. Here, we will find a sidebar with name identifiers for the images (on the left side) and placeholders to put our images at the right side.

What will do next, is right-click on the sidebar and select new image set and give it a name (I used splash for mine). After that, what’s left is to add the images. Drag & drop the image files into the first row of placeholder boxes according to the resolutions defined by Apple.

Assets.xcassets window where the splash screen images should be located.

Finally, what’s left is to update the LaunchScreen.storyboard to include our new image, define its constraints to ensure its always centered and to set up the background color, all from the Visual Studio iOS designer, no code required.

Splash screen preview in the iOS designer on Visual Studio for mac.

If you don’t have a lot of experience working with the iOS designer, check out this guide from Microsoft which explains it step by step.

    • Thanks!

      When I first came across splash screens, I had to search a few places to get a general idea on how to do it. Once I did, It was only a couple of steps, so I decided to create this post as a way to help other people be able to understand this topic fast.

      I’m glad this could be useful for you.

  1. Hi,
    thanks for your article, do you happen to know how to create an animated splash screen? or a splash screen with a progressbar?

    Regards,
    Reihaneh

    • I haven’t done that yet (maybe it could be an interesting experiment?) but since the splash screens are is platform-specific code, my first approach would be to investigate how animations work on each platform and then transferring that knowledge to splash screens should be easy.

      If you go with the progressbar approach, you could use an async method that continues to update the progressbar control base on whatever logic you have until it is completed and then close the page. When implementing it on Android, you may end up having to use a full XML layout instead of a simple XML drawable to be able to access the progress bar control.

Leave a Reply

Your email address will not be published. Required fields are marked *

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>