Right way to create splash screen for Android in Xamarin Forms app

Usually Splash screen for Android is done with separate activity and even official docs on Microsoft website suggesting this way for Xamarin.Forms but it is not correct as splash screen is needed only to fill the time gap between the moment when user taps the icon to start the app the the moment when app is ready for interaction. Creating separate activity, showing it and then switching to actual activity makes the start even longer.

Below is the correct way of splash screen implementation for Xamarin Forms for Android, the app will start without any delay if you follow the tutorial below.

Step 1: Create cool splash screen

I found the image below somewhere in Internet, I hope that its author does not mind using it in my tutorial.

splash

Step 2: Add the splash screen into the Android part of the project

I named the file “splash.png“, it is necessary to place it into the folder Resources/drawable

Screen01.png

Step 3: Create layout for splash screen background:

Create appropriate layout in the same folder (I named it “splash_background.xml“), so our image is shown correctly on any phone, use the bitmap properties as shown below.

Screen06.png

Content of splash_background.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
     <bitmap
       android:src="@drawable/splash"
       android:tileMode="disabled"
       android:scaleType="centerInside"
       android:adjustViewBounds="true" />
   </item>
 </layer-list>

Step 4: Add theme for the splash screen in the file Resources/values/styles.xml

I called new theme “SplashTheme”, we will assign this theme on main activity start. Our image is used as background on this theme

Screen04.png

Added xml source code

<!-- Splash Screen theme -->
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
 <item name="android:windowBackground">@drawable/splash_background</item>
 <item name="android:windowNoTitle">true</item>
 <item name="android:windowFullscreen">true</item>
</style>


Step 5: Change main activity, set newly created theme as default

And here is the trick! We need new theme with splash screen only on the start (set it in the properties), but change it immediately to the standard theme right before the call of base.OnCreate().

Screen08.png

Step 6: Start the app on your Android device and enjoy your perfectly done splash screen!

I stored the xamarin project created for this tutorial on github.com to save your time, download and use it without any restrictions:

https://github.com/bykovme/xamarinsplash4droid

 

 

, , , , , , , , ,

  1. Leave a comment

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: