How to Create a Splash Screen in 3 Steps for Xamarin.Android

Splash.

Most of the time Splashes in Android have been a complex topic that involved creating temporal Activities or Timers to emulate the behavior of it. An important reason why there was not a proper solution until 2015 is that Google discouraged them during the development of Android Apps, however, this changed with Material Design.

One of the reasons why you're reading this article is because your App might not be as fast as you expect and it takes a couple of seconds to load fully. This was my case for a while and I tested the options.

Not so far, I read an article in the Medium: The (Complete) Android Splash Screen Guide, where I found the perfect example of how to implement it in Android without extra libraries, timers, or activities that is reliable, simple, and fast.

There are some simple steps to consider:

1. Define a new Style.

Go to your project and identify your styles.xml file, if you don't have one, you need to create one in:
\com.mydomain.myproject\Resources\values\styles.xml

In this file you must have at least two styles: Launcher and MyCustomTheme where:
  1. The launcher is your Splash Screen.
  2. MyCustomTheme represents your custom configuration for your App.
Your basic styles.xml would look approximately like this one:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <!-- The launcher theme. It sets the main window background to the launch_screen drawable -->
    <style name="Launcher" parent="android:Theme.Material.Light">
        <item name="android:windowBackground">@drawable/launch_screen</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    <!-- Here you define your own theme and configuration -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your personal configurations -->
    </style>
</resources>

I defined my parent as Theme.Material.Light, but there are multiple options that you could try Theme.MaterialTheme.Material.Light.DarkActionBar or perform your own configurations with the AppCompact editions (I am still testing it).

There are two important points in the Launcher Style:
  • windowActionBar is false because you want to hide the bar that is by default with the Title of the App or View is shown.
  • windowNoTitle is true because of the same previous reason, you don't want to show the name of the App while loading.

1.1 Define a Drawable Launch Icon

This is fully optional because you could have created your own personal image and stored it in the Drawable folder with a name like launch_screen.png, however, you can define a nicer way — in my opinion — where you need to create a new file called launch_screen.xml.

This file contains a background in the section of drawable and your App icon in a larger size that generally has a size of 192×192px, this image is going to be centered when your app is launched.

<?xml version="1.0" encoding="utf-8"?>
<!-- The android:opacity=”opaque” line — this is critical in preventing a flash of black as your theme transitions. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"> 
  <!-- The background color, preferably the same as your normal theme -->
  <item android:drawable="@android:color/white"/>

  <!-- Your product logo - 144dp color version of your app icon -->
  <item>
    <bitmap
      android:src="@drawable/ic_splash"
      android:gravity="center"/>
  </item> 
</layer-list>

2. Set your new Splash.

Go to your manifest file in:
\com.mydomain.myproject\AndroidManifest.xml

There you need to define your new android:Theme as "@style/Launcher".

<application android:label="@string/ApplicationName" android:icon="@drawable/Icon" android:theme="@style/Launcher"></application>

3. Load your custom Theme.

In all your activities in the event OnCreate, it's important to set your custom Theme as follows:

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    SetTheme(Resource.Style.MyCustomTheme);
}

If it's not loaded in all of them your application is going to crash because the default one is the Splash.

And that's all, now you have a fully reliable, fast, and easy-to-implement Splash screen!



Now, some of the benefits of this method.

Pros:
  • Easy to implement in any kind of project.
  • No additional classes, timers, or activities.
  • Minor changes in the Styles.
  • Create your own style based on your custom Image.
  • Flexibility to choose colors and adapt them.

Comments