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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s