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.

 


By Luke Alderton at 16 Aug 2016, 08:51 AM

Tags: Xamarin

Comments

Abhishek Singh Thakur
I' using that code but getting a white screen for some time how can I remove this Please suggest
14/12/2016
Luke
Make sure that SplashActivity has 'MainLauncher=true' set and that your apps MainActivity does not.
19/12/2016
Luis Muñoz
Hi, this is great, but i had a problem, when i run the application this message shows in MainActivity: Android.Views.InflateException: Binary XML file line #1: Error inflating class android.support.v7.widget.Toolbar, I tried a lot of solutions posted in other forums but no success, is there any way you can help me with it? thanks
11/01/2017
Luke
Hi Luis, I've not seen this error before I would look into making sure that your xaml is correct and that you've not missed anything out, you might also want to check your target Android version and that your Android libraries/emulators are all up to date.
12/01/2017
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By dipbleds on Raspberry Pi - Bluetooth using Bluecove on Raspbian
12 Dec 2017, 21:29 PM
By Ich on Replacing the Xamarin Header/Navigation bar with a custom view/template
26 Nov 2017, 17:11 PM
By Ravi Motha on My experience at Umbraco UK Festival 2017
12 Dec 2017, 08:39 AM
By Borges on How to add a Xamarin Forms Loading Screen/Overlay
7 Nov 2017, 19:11 PM
By Rutul Mehta on Auto/Custom height on Xamarin Forms WebView for Android and iOS
4 Nov 2017, 03:15 AM
By Pablo on Xamarin MasterDetailPage has large margin/padding at top
26 Oct 2017, 15:31 PM
By faiza on Using MaryTTS or OpenMary in Java
22 Oct 2017, 12:54 PM
By Nietoperz on Using MaryTTS or OpenMary in Java
29 Sep 2017, 14:34 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development