Xamarin Guide 6: Add Splash Screen, Name and Version

Scope

This Xamarin Workshop Guide was created for the The Portuguese National Meeting of IT Students (ENEI) by Sara Silva and the original content is available here. To extend it to the global community, it was published in a new project called Xam Community Workshop and the main goal is for any developer, or user group to customize it to their events.

Before reading this article you must read:

Guide 6. Add splash screen, name and version

In this step you will learn how to create the splash screen for all platforms and how to define the name and version of the application.

Define the splash screen

The splash screen in mobile applications is the first screen that the user will see, in some applications it is used to load the initial data. It is defined in various ways for each platform and for each one you will learn how it works.

In ENEI.SessionsApps.iOS

In iOS and iPad applications it is possible to define launch images as a splash screen in the Info.plist. It is described in the following figures:

Figure 6-1: Defining Launch Images using Visual Studio

Figure 6-2: Defining Launch images in Xamarin Studio

In ENEI.SessionsApps.Android

By default, in Android applications, there is no concept of a splash screen. To solve it, is possible to create an Activity that will be a splash screen page.

In the ENEI.SessionsApp create the SplashScreen class, as in the following:

[Activity(Label = "1010 ENEI", MainLauncher = true, NoHistory = true, Theme = "@style/Theme.Splash", ConfigurationChanges = ConfigChanges.ScreenSize, ScreenOrientation = ScreenOrientation.Portrait)]
public class SplashScreen : Activity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
var intent = new Intent(this, typeof(MainActivity));
StartActivity(intent);
Finish();
}
}

In the Resources\Values folder create an XML file called Style, as in the following:

<?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="Theme.ENEI" parent="android:Theme.Holo">
</style>
</resources>

Then change the MainActivity to:

[Activity(Label = "1010 ENEI", Theme = "@style/Theme.ENEI", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
ActionBar.SetIcon(Resource.Drawable.ic_action_users);
LoadApplication(new App());
}
}

If you run the Android application you will get the “splash screen” defined, similar to the other platforms.

See more about it in this article Creating a Splash Screen.

In ENEI.SessionsApps.WinPhone

Windows Phone applications support splash screens by default, this way it only required a nice image that will be shown to the user.

Figure 6-3: The SplashScreenImage

Define the name and the version for each platform

To define the name and the version for each platform you will need: