Creating A Splash Screen In Xamarin Forms

A splash screen is an image or page that shows when you first load your app, while the application is initializing. The splash screen will stay visible until the first page of the app is ready to display. Xamarin Forms does not have any functionality to add a splash screen, you must do this per platform.

UWP

UWP uses an image to display as a splash screen. You can place this image by going to

Project > Package.appxmanifest > Visual Assets > Splashscreen

There is a major difference between WinRT apps and UWP apps with the splashscreen. WinRT had you place a full portrait image as the splashscreen, UWP accepts a landscape image but it will never take up the full screen. Since most apps start in Portrait you will never get the image full screen.

UWP wants you to display your logo in the center of the screen and have a plain colored background. To accomplish this, create an image in the sizes specified with the logo in the center and a solid background color of your choice. Then set the Background Color option on the screen to the same solid background color as per the example below.

UWP Splash Screen Settings

This will result in a splash screen as shown.

tesla_splashscreen

In UWP if you want a completely customizable splash screen, where you can create a full screen image, you will have to create an extended splash screen.

Android

A splash screen in Android is more complex as it requires you to create a new Activity. If you are new to Xamarin.Android, an Activity is a single UI that the user can normally interact with. Xamarin Forms uses the MainActivity to load the application, we need to create another Activity. This example assumes you are using AppCompat, which is recommended for all new Android applications.

  1. Place your fullscreen images (e.g. splashscreen.png) in the appropriate drawable folder. Each drawable folder will associate with the following sizes
    • MDPI is 320×480 dp = 320x480px (The Default x1)
    • LDPI is 0.75 x MDPI = 240x360px
    • HDPI is 1.5 x MDPI = 480x720px
    • XHDPI is 2 x MDPI = 640x960px
    • XXHDPI is 3 x MDPI = 960x1440px
    • XXXHDPI is 4 x MDPI = 1280x1920px
  2. Create a new style that references this new image. Place this in Resources > values > styles.xml (Build Action: Android Resource)
    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
      <style name="splashscreen" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splashscreen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:backgroundDimEnabled">true</item>
      </style>
  3. Create a new class SplashActivity.cs
    [Activity(Label = "Mobile App Name", Icon = "@drawable/icon", Theme = "@style/splashscreen", MainLauncher = true, NoHistory = true)]
    public class SplashActivity : AppCompatActivity
    {
        protected override void OnResume()
        {
            base.OnResume();
            StartActivity(typeof(MainActivity));
        }
     }
  4. Go to MainActivity.cs and change MainLauncher = true to MainLauncher = false

Better Approach

Providing a faster experience and load times is possible via another method.

  1. In your Resources > Values > styles.xml create your splashscreen theme.
    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
      <style name="splashscreen" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splashscreen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsTranslucent">false</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:backgroundDimEnabled">true</item>
      </style>
  2. Go to your MainActivity.cs and ensure MainLauncher = true. Ensure no other activity has MainLauncher=true.
  3. In MainActivity.cs change the default theme to the splashscreen.
     [Activity(Label = "Mobile App", Theme = "@style/splashscreen", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation, LaunchMode = LaunchMode.SingleTop)]
     public class MainActivity : Xamarin.Forms.Platform.Android.FormsAppCompatActivity
  4. In OnCreate, switch your theme with the below code.
    protected override void OnCreate(Bundle bundle)
    {
        base.Window.RequestFeature(WindowFeatures.ActionBar);
        // Name of the MainActivity theme you had there before.
        // Or you can use global::Android.Resource.Style.ThemeHoloLight
        base.SetTheme(Resource.Style.MainTheme);
    
        base.OnCreate(bundle);
    
        ...
    

9-Patch Image

Changing densities and resolutions cause a problem with splashscreen images for Android. Take a look at Xamarin Android 9-Patch Image Splashscreen to create a 9-Patch image for your Android Splashscreen.

iOS

iOS uses an image to display a splash screen depending on which screen size the application is running on.

  1. Create a splash screen image in the following sizes.
    1. 320×480
    2. 640×960
    3. 640×1136
  2. Go to Properties > iOS Application > iPhone Launch Images and import the images. It will automatically add them to the Resources folder in your iOS Project.
    ios_splashscreen_settings
  3. Move down the properties page to add image for iPad apps.
  4. If you are having issues with your images still displaying there are a few possible causes. The LaunchScreen.storyboard could be the issue. You can open it and correct it, or even try deleting it. Once you have done this, rebuild your application and reset your iOS Simulator or delete from your iPhone as iOS has a tendency to cache extensively in this area.
Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

12 Comments

  1. Ahmad Elmadi

    It is so stupid how complicated it is for android to do something like that , do not you agree ?
    They should do something like having a folder for splashscreen for that , or even better if just placing that in the manifest. What do you think ?

    1. Adam Pedley

      Android normally takes the approach of the developer must customize everything and give them complete control. UWP and iOS take an approach where customization is more controlled, hence they provide easier options to do certain activities.

      It would be easy for Google to implement something such as upload a splashscreen image and have it be the default screen on startup but I doubt we will see it happen.

  2. marcelo

    I have this error:

    Severity Code Description Project File Line Suppression State
    Error No resource found that matches the given name (at ‘theme’ with value ‘@android:style/Theme.Splash’). SQLiteEx.Droid C:\Users\marcelo\Desktop\…….

    1. Adam Pedley

      In your styles.xml you should have a theme that you were already using. In mine its just MainTheme. e.g.

      <style name=”MainTheme” parent=”Theme.AppCompat.Light.DarkActionBar”>

      </style>

      You can either add that, or reference your own existing theme.

  3. Abhijeet

    Thanks Adam, better approach for android is good.

    My splash screen image is getting stretched, do you have any better straight forward solution for this.

    1. Adam Pedley

      Follow the link to the 9-Patch Image for Android, it deals with creating an image that will only stretch in certain parts. so it won’t distort the entire image.

  4. Jafet Granados

    Hi Adam,

    In my case the iOS app shows a black page. Is there something wrong?

    Thanks.

  5. Alan

    Hi Adam, how can you accomplish this using Xamarin Studio, I’m having trouble finding the Go to Properties > iOS Application > iPhone Launch Images option.

    I’m using Xamarin Studio Community Version 6.3 (build 863)

    Any help is appreciated. Thank you!