Home » Xamarin

How to add a Splash Screen using Xamarin?

In this article, we are going to learn how to design (add) a splash screen using Xamarin?
Submitted by Ridhima Agarwal, on November 29, 2017

A splash screen is a screen which appears before the application is launched. It is displayed for few seconds and after that, the application starts.

The main purpose of the splash screen is to give some time to the application for loading. It is the front screen which may contain the name of the application, logo, version name etc.

For example, whenever we open the facebook application we came across the screen which contains the Facebook logo and it takes few seconds to load the application and after that, the login page appears.

So for writing the code for Splash screen, we have to follow the following steps: First, we will insert the splash screen image for which go to the Drawable folder in Android. A drawable folder will come with the Resources. We will paste our image along with the extension.

Android → Resources → Drawable → Paste the image

After that, in MainActivity.cs of Android we will make MainLauncher = false

[Activity(Label = "MTTPeople", Theme = "@style/MainTheme", 
Icon = "@drawable/icon", MainLauncher = false, 
WindowSoftInputMode = SoftInput.AdjustPan, 
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

Then we will make an Activity in Android and add the following code:

[Activity(Label = "TipTop Mail", MainLauncher = true, NoHistory = true, Theme = "@style/Theme.Splash")]
    public class SplashScreen : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            StartActivity(typeof(MainActivity));
        }
   }

Finally add a Style in the style.xml:

Android → Resources → values → style.xml

<style name="Theme.Splash" parent="android:Theme">
	<item name="android:windowBackground">@drawable/splashscreen</item>
	<item name="android:windowNoTitle">true</item>
</style>

Add these lines in which splashscreen is the name of the image, which is given to the splashscreen image.

Here is the splashscreen of the Facebook Application: