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.


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

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>        

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)



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.


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.

  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?


    • 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.

  2. When I tried this, the splash screen did not switch to the main activity in Android. I think that
    needs to be added to OnResume();

    • That’s weird.

      How the post describe it is how I do it every time I need to create a splash screen.

      In any case, it doesn’t make sense to me to add it to the OnResume() since this is a process that should be executed only when your application is loaded into memory the first time, OnResume() would call this every time the app returns from the background.

  3. Hello,
    Good article, this is a simple and effective way to create splashscreen.

    On Android, you can use the “NoHistory” attribute instead of finish splash activity :
    [Activity(Label = “SplashActivity”, Theme = “@style/Splash”, MainLauncher = true, NoHistory = true)]

    After the MainActivity is launched, the SplashActivity will be removed from the history. No need to use Finish() method.

  4. Missing lots of key information. Had to google to find the right one. Like the name of the layer. How the layer is referenced in style. Where @color is defined.

    • Hello Bish,

      What you are talking about is the basic structure of an Android project and where are the files located for the style, color, and XML drawable definitions.

      This kind of things happens often times when reading a blog post, not every time is all the dependant information available and a google search is necessary for understanding.

      Nonetheless, Thanks for the feedback. I’ll take this into account and update the post with a hint to what I’m talking about so new readers can understand it better.

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>