Xamarin Forms splash screen on Android and iOS

Adding a splash screen to Android and iOS using a Xamarin Forms project isn't as long winded as you think it might be. iOS already has one and Android just requires another activity.

Adding the splash screen to Android:

Android will require another activity to be placed within your app, so within the droid project, create a new class file and name is SplashActivity.cs and add the following code:

using System.Threading.Tasks;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Support.V7.App;

namespace MyApp.Droid
{
    [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);
        }

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

            Task startupWork = new Task(() =>
            {
                Task.Delay(2000);
            });

            startupWork.ContinueWith(t =>
            {
                StartActivity(new Intent(Application.Context, typeof (MainActivity)));
            }, TaskScheduler.FromCurrentSynchronizationContext());

            startupWork.Start();
        }
    }
}

Then in your MainActivity.cs file change the MainLauncher attribute on the MainActivity class to false.

Now add a new file to /Resources/Drawable called splash_screen.xml and add the following:

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

Change applogo to the name of your application splash screen image which should also be in the drawable folder (do not add the file extension to the filename). You can also change the background colour by changing the android:color="#ffffff" part of the file to represent your preferred colour.

Now under Resources/values, create a file called styles.xml and add the following to it:

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

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

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

That's it for Android, wasn't so difficult was it? I was also surprised when I did it.

Adding the splash screen to iOS:

iOS already has a splash screen that displays a blue background and either a Xamarin logo or your app logo in the middle. This works but let's be honest, it looks horrible having your tiny app icon with perhaps a white background on a blue application background. Ugh.

The only step for making the Launch Screen look better is to open the the LaunchScreen.storyboard file under the /Resources folder. Double clicking the file should open the designer as long as you're connected to a mac.

From here you can click the logo in the center of the screen to change which image to display.

You can also click the background and type in a new background colour code. That should be it, recompile your app and you're good to go.