Creating a Splash Page for Xamarin.Forms Android

Unlike iOS, Android does not ship with a built in launch screen or splash screen, so it looks particularly ugly when we start up a Xamarin.Forms app and wait for everything to initialize.

Here’s a quick tip to add a Splash screen to your Android app while it loads up your Xamarin.Forms Application.

First thing we are going to do is create a new drawable: Resources > drawable > splash.xml


<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#3498DB" />
        </shape>
    </item>
    <item>
        <bitmap
            android:src="@drawable/icon"
            android:gravity="center"
            android:layout_gravity="center"/>
    </item>
</layer-list>

Now we need to create a style that uses this drawable as the background: Resources > values > styles.xml


...

<style name="Theme.Splash" parent="android:Theme">
    <item name="android:windowBackground">
        @drawable/Splash
    </item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowIsTranslucent">false</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:colorPrimaryDark">#FFFFFF</item>
</style>

...

Lastly we are going to create a new Activity, remove the MainLauncher property from our MainActivity, and add it to our new SplashActivity. Our SplashActivity is going to immediately start up the MainActivity, but use our theme to show the drawable as the background.


[Activity(Label = "myApp", Icon = "@drawable/icon", Theme = "@style/Theme.Splash", MainLauncher = true, NoHistory = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class SplashActivity : Activity
{
    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
    }

    protected override void OnResume()
    {
        base.OnResume();
        var startUp = new Task(() =>
        {
            var intent = new Intent(this, typeof(MainActivity));
            StartActivity(intent);
        });
        startUp.ContinueWith(t => Finish());

        startUp.Start();
    }
}

Also note the NoHistory flag which disables the back button from going back to this activity, it will destroy itself on leaving.

 

Now when we run our app, we should see our splash screen before the app loads up!

 

simulator-screen-shot-feb-7-2017-3-26-53-pm

Advertisements