Corrado's Blog 2.0

Online thoughts of a technology funatic

Adding a splash screen to Xamarin Forms apps

Every Xamarin Forms app should ship with a splash screen, it is the first thing a user see and it contributes to reduce the perceived application boot time.

Adding one is quite easy, let’s go from simpler to harder.

The simpler: Windows Phone

Just replace SplashScreenImage.jpg (720×1280 pixels) with your own app launch image in the Windows Phone project and you’re done.

image

The harder: iOS

If you follow iOS documentation you’ll know that adding your own launch screen is just a matter of adding the proper images to the project via info.pList options.

image

unfortunately once you do that you’ll still see the blue background with Xamarin Logo at startup, to fix it delete the content of Launch Storyboard option into info.pList and you’re done (no idea why template adds that storyboard inside Resources folder)

image

The hardest: Android

Adding a splash screen requires following steps:

image

1-Add the splash screen image into Resources\drawable folder (and all the variants you want to support) in previous screenshot file is named splash.png

2-Create a new folder under Resources and name it values

3-Add an xml file into values folder (name is not important, in my case I named it Styles.xml)

4-Add this content to xml file

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="Theme.Splash" parent="android:Theme">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

5-Add a new activity to the project and add this code (of course you can safely remove the delay before StartActivity method)

[Activity(Theme = "@style/Theme.Splash", //Indicates the theme to use for this activity
             MainLauncher = true, //Set it as boot activity
             NoHistory = true)] //Doesn't place it in back stack
    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            System.Threading.Thread.Sleep(3000); //Let's wait awhile...
            this.StartActivity(typeof(MainActivity));
        }
    }

6-Remove the MainLauncher=true from original activity since this is the new activity that will be launched at startup.

Hope this helps…

11 Responses to “Adding a splash screen to Xamarin Forms apps”

  1. [...] Adding a splash screen to Xamarin Forms apps (Corrado Cavalli) [...]

    Pingback by Dew Drop – April 23, 2015 (#1999) | Morning Dew — 23/04/2015 @ 13:46

  2. One extra bit that people may require is to handle the back button differently on the main page of the app.

    I’m new (at time of writing) to Android development, so I don’t know if this is the recommended way to handle this, but I find that the following makes the behaviour what I would expect:
    SplashActivity.TheInstance.MoveTaskToBack(true);
    MainActivity.TheInstance.MoveTaskToBack(true);

    (where TheInstance is a static property returning the one instance of the Activity).

    Comment by John Hardman — 12/05/2015 @ 16:30

  3. Ah, sorry – just spotted that you included
    NoHistory = true
    so please ignore the preceding message!

    Comment by John Hardman — 12/05/2015 @ 16:31

  4. Just to add to the Android instructions – you have to make sure the Build Action of Styles.xml is AndroidResource otherwise you’ll get a build error.

    Comment by Peter Foot — 06/07/2015 @ 10:44

  5. Really Helpful post.

    The Xamarin developer notes have a few vital steps missing for Forms apps.

    Comment by NMackay — 19/10/2015 @ 17:54

  6. Excellent post! It have been very useful for me.

    Regards,

    @seba47

    Comment by Seba Cabrera — 26/11/2015 @ 13:15

  7. Very useful!
    I have 1 problem however: my main activity has 1 button that takes up all space, and when I tap the splash screen the main activity will response to the button click once it shows. If I tap the splash screen multiple times it crashes when the main activity shows.

    It looks like it registers the touches and sends them all at once to the button when main activity opens.

    Any solution for this?

    Comment by Stan — 06/04/2016 @ 14:03

  8. I tried that in my Android project, but I couldn’t get it to work. The page always remains white.
    The SplashActivity is called, but it doesn’t seem to use the correct theme.
    I also tried to replace the splash image with a simple color, but this didn’t change anything either.

    @color/primary

    Could this be, because I use AppCompat and a theme based on Theme.AppCompat.Light.NoActionBar for my MainActivity?

    I also added some WriteLines to my activities to see what takes how long.

    18:12:53.042: SplashActivity.OnCreate[25]:
    18:12:53.416: MainActivity.OnCreate[32]: Started
    18:12:54.095: MainActivity.OnCreate[54]: Before LoadApplication
    18:12:55.212: MainActivity.OnCreate[56]: After LoadApplication

    How long should the SplashActivity be visible? Ideally it would be from SplashActivity.OnCreate until LoadApplication in the MainActivity (2 seconds) and not only until MainActivity.OnCreate (only 400ms). However, even if I leave your Sleep in, it does not show.

    Comment by Michael Rumpler — 07/04/2016 @ 18:04

  9. Somehow that doesn’t work for me on Android. The SplashActivity is called, but the screen stays white. I even changed the windowBackground in the theme to a simple color, but thats not used either.
    Could this be, because I use Theme.AppCompat.Light.NoActionBar as base theme for my MainActivity?

    Comment by Michael Rumpler — 08/04/2016 @ 11:06

  10. I ended up using the approach from Nathan Evans https://forums.xamarin.com/discussion/comment/91914/#Comment_91914

    Comment by Michael Rumpler — 14/04/2016 @ 12:52

  11. Any guidance on using a 9-patch image on Android so that the splashscreen looks good in both landscape and portrait orientations?

    Many thanks.

    Comment by John Hardman — 05/06/2016 @ 11:32

RSS feed for comments on this post. TrackBack URL

Leave a Response