Splash Screen In Xamarin

Here we are going to make splash screen in xamarin forms for android, iOS and UWP.

All three platforms have different ways to make a splash screen. Let’s start from the easier one.

 

UWP:

In uwp you can easily make splash screen by just replacing SplashScreen.png icon in uwp Assets folder. or you can also update application splash screen icon from ‘Package.appxmanifest’ file.

Just open Package.appxmanifest file -> go to Visual assets -> select ‘Splash Screen’ from left panel and change icons there. As shown:

SplashScreen

iOS:

For iOS go to info.plist which is present in you iOS project and select visual assets here you can set app icons, launch screen icon & iTunes Artwork.

as Shown:

 

Here you can set Launch Images Source to None & Launch Screen to LaunchScreen. This LaunchScreen.StoryBoard is present in Resources folder of your iOS project. You can open this storyboard and design you launch screen from there. And if you are on windows than you need to connect to Mac to see this LaunchScreen.StoryBoard page.

This is how the story board Looks like. You can view story board on any device you want. Here is the preview on iPhone 8 Plus in portrait mode. You can adjust your launch screen from here.

iOS Launch Screen Story board

 

Android:

For android you need to add a new activity in your android project and than use this activity as your SplashScreen. For this you just right click on your android project and add new android activity and named it as SplashScreen.

 

After adding android splash screen activity you need to create a theme for you activity. This theme is defined in styles.xml which is present in Your android project -> Resources -> values -> styles.xml

Here you can define this style under the resources tag.

Styles.xml

 <style name="Theme.Splash" parent="android:Theme.Holo.Light">
<item name="android:colorBackground">@color/primary</item>
<item name="android:windowBackground">@drawable/splash_centered</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item> 
</style>

 

After defining the style you can add color in colors.xml and also add new xml file in drawables folder with the name of splash_centered.xml. This file contains your image.

In Colors.xml you can define background color of your application.

Colors.xml:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="primary">#4c565c</color>
</resources>

 

Now add a new file named splash_centered.xml in your drawable folder in this file you can add your image and also adjust its settings accordingly.

splash_centered.xml:

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="@color/primary"/>
</item>

<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/SplashScreen"
android:gravity="center"/>

</item>
</layer-list>

 

In this file a bitmap image in defined which is present in drawable folder with a name of SplashScreen.

Now for the final stage we need to set our SplashScreen.cs which we are going to use as our start activity.

SplashScreen.cs:

[Activity(Label = "Dart", Icon = "@drawable/dartlogo", Theme = "@style/Theme.Splash",
MainLauncher = true, NoHistory = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation, ScreenOrientation = ScreenOrientation.Landscape)]
public class SplashActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Thread.Sleep(3000);
StartActivity(typeof(MainActivity));
}

}

 

In this SplashScreen.cs you can set your app theme to @style/Theme.Splash  this is the theme which we create in our styles files. Also set MainLauncher & NoHistory = true. By setting MainLauncher this page will open first and by setting NoHistory this page will not open by pressing a back button so it contains no history. And on Create Method this Splash Screen will remains for 3 seconds and than our new activity is started with the name of MainActivity.

Don’t Forget to set MainLauncher = False in you MainActivity.

This is all you need to create Splash Screen in iOS, Android & UWP.

Hope this will help. Comment for queries.

 

XamarinWeb Founder | MVP – C-SharpCorner | Xamarin Forms Developer

Leave a Reply

Your email address will not be published. Required fields are marked *