Creating A Splash Screen In Xamarin.Forms

A splash screen is an image or page that shows up when you first load your app. When the application is initializing, Xamarin.Forms does not have any functionality to add a splash screen. You should do this with platform.

To create the splash screen, we will use a local image and as the local image processing differs in each platform, we will have to make adjustments in each platform to create and use this feature.

For the example of this article, I'll use the splash.png image below to be displayed on the splash screen (Feel free to use your preferred image).


Make sure that you have made your environment ready with Visual Studio 2015 and Xamarin.

Creating the Project

Open Visual Studio Community 2015 and click New Project. Select Visual C# >> Cross Platform template >> Blank App (Xamarin.Forms Portable).

Note - The Portable Class Library (PCL) option includes all common code in a dynamic-link library (DLL) that can then be referenced from other projects.

Enter the name "XF_SplashScreen" and click the "OK" button. The common project has the App.cs class which will contain the shared code and which we will use in this article. At the end, we will have the references included in all the projects of our solution.

Preparing Android platform

Open the Android project and copy the image you want to display to the Resources /drawable folder. For the example of this article, I am going to copy the file splash.png.

We will have to create images in each resolution as below.

MDPI is 320 × 480 dp = 320x480px (The Default x1)
XHDPI is 2 x MDPI = 640x960px
XXHDPI is 3 x MDPI = 960x1440px
XXXHDPI is 4 x MDPI = 1280x1920px
and put them in their respective directories in the Resources folder.

Then, open the MainActivity.cs file and change the MainLauncher attribute of the file to "false".

    [Activity(Label = "XF_SplashScreen", Icon = "@drawable/icon", Theme = "@style/MainTheme",   
          MainLauncher = false, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]  
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity  
        {  
            protected override void OnCreate(Bundle bundle)  
            {  
                TabLayoutResource = Resource.Layout.Tabbar;  
                ToolbarResource = Resource.Layout.Toolbar;  
                base.OnCreate(bundle);  
                global::Xamarin.Forms.Forms.Init(this, bundle);  
                LoadApplication(new App());  
            }  
       }  

Now, from the Project menu, click "Add New Item". Select the Activity template and enter the name "SplashActivity.cs".



Add the following code to this file.

    using Android.App;  
    using Android.OS;  
    namespace XF_SplashScreen.Droid  
    {  
        [Activity(Theme = "@style/Theme.Splash",  
            MainLauncher=true,  
            NoHistory = true)]  
        public class SplashActivity : Activity  
        {  
            protected override void OnCreate(Bundle savedInstanceState)  
            {  
                base.OnCreate(savedInstanceState);  
                System.Threading.Thread.Sleep(3000);  
                StartActivity(typeof(MainActivity));  
            }  
        }  
    } 

In this code, we define a theme: Theme = "@ style / Theme.Splash” and assign the value "true" to the MainLauncher attribute so that this Activity will now run first. We included a delay of 3 seconds (3000) in the code using the Sleep() method and called the activity MainActivity.

Now, let's set the theme in the styles.xml file in the Resources/Values folder.

Open the styles.xml file and include the following code (in blue).

<?xml version="1.0" encoding="utf-8" ?>  
<resources>    
  
  <style name="Theme.Splash"  
         parent="android:Theme">  
    <item name="android:windowBackground">@drawable/splash</item>  
    <item name="android:windowNoTitle">true</item>  
  </style>  
    
  <style name="MainTheme" parent="MainTheme.Base">  
  </style>  
  <!-- Base theme applied no matter what API -->  
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">  
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->  
    <item name="windowNoTitle">true</item>

Here, we defined the theme, location, and name of the image used in the splash screen in the Android project: drawable/splash.

Preparing iOS Platform

iOS uses an image to display a splash screen depending on the screen size the application is running on.

1. Create a splash screen image in the following sizes.
1. 320×480
2. 640×960
3. 640×1136
2. Go to Properties -> iOS Application -> Launch Images and import the images. It will automatically add them to the "Resources" folder in your iOS Project.

Add the images with the appropriate resolutions that you want to display on the splash screen.

Preparing Windows Phone Platform

Open WinPhone project and copy the image to the "Assets" folder. Then, click on the "Package.appxmanifest" file.

Click "Visual Assets" and set the image to be displayed with the appropriate resolution.



So, we have all the platforms configured to display the splash screen.

I'll test only for the Android platform. Executing the project using Genymotion emulator for Android, we get the following result.

Thus, we have successfully created a Xamarin.Forms splash screen.

Reference:

Creating A Splash Screen In Xamarin.Forms