Xamarin Forms Creating Splash Screen

Xamarin Forms creating Splash screen:

Splash screen is an important screen of your application. It is the very first screen a user will see when the app is ran on his/her smartphone. It is necessary to keep splash screen of your application simple and attractive at the same time. In this post we will screen how we can create Splash screen in Xamarin forms application (both with Light and Dark theme). I have also posted a video tutorial on YouTube for this.

The final splash screen will look like the below images. The image will fade-in in 3 seconds and take users to the next screen.

You can use your own images, or download the example using the link provided below:

DOWNLOAD EXAMPLE

Project structure:

Edit your MainPage.xaml design as below:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.MainPage"
BackgroundColor="#fff">

<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
<Image Source="android.png" x:Name="imgLogo" HeightRequest="150" WidthRequest="150"/>
</StackLayout>
</ContentPage>

And its code-behind like below:

MainPage.xaml.cs:

using System.Threading.Tasks;
using Xamarin.Forms;

namespace XamSample
{
public partial class MainPage : ContentPage
{

public MainPage(string image)
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
LogoAnimation(image);
}

public async Task LogoAnimation(string image)
{
if (string.IsNullOrWhiteSpace(image))
{
imgLogo.Source = "android.png";
}
else
{
imgLogo.Source = image;
}

imgLogo.Opacity = 0;
await imgLogo.FadeTo(1, 3000);
Application.Current.MainPage = new NavigationPage(new Page1());
}
}
}

This will create a light themed xamarin forms splash screen. We are passing the image name as CommandParameter because of which we can display different images on clicking buttons (only for example). You can remove the image parameter and use a static image as per your requirements. Create two new layout xaml content pages with names:

1. Page1.xaml
2. DarkScreen.xaml

Page1.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.Page1"
Title="Xamarin Forms">
<ContentPage.Content>
<StackLayout>
<Label Text="Xamarin Forms Splash Screens" HorizontalOptions="Start" VerticalOptions="Start" Margin="5"/>

<Button x:Name="btnAndroid" CommandParameter="android.png" Text="Android" Clicked="BtnSplash_Clicked"/>
<Button x:Name="btnApple" CommandParameter="apple.png" Text="Apple" Clicked="BtnSplash_Clicked"/>
<Button x:Name="btnXamarin" CommandParameter="xamarin.png" Text="Xamarin" Clicked="BtnSplash_Clicked"/>
<Button x:Name="btnWhatsapp" CommandParameter="whatsapp.png" Text="Whatsapp" Clicked="BtnSplash_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

We are passing commandParameter on each buttons (which is the logo names). The code-BtnSplash_Clicked functions will call MainPage.xaml with the image name parameter passed to it.

Page1.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamSample
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Page1 : ContentPage
{
public Page1 ()
{
InitializeComponent ();
}

private void BtnApple_Clicked(object sender, EventArgs e)
{

}

private void BtnSplash_Clicked(object sender, EventArgs e)
{
try
{
Button btn = (Button)sender;
string commandParam = btn.CommandParameter.ToString();
if (commandParam.Equals("whatsapp.png"))
App.Current.MainPage = new DarkScreen();
else
App.Current.MainPage = new MainPage(commandParam);

}
catch(Exception ex)
{

}
}
}
}

Edit the DarkScreen.xaml as below:

DarkScreen.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamSample.DarkScreen"
BackgroundColor="#000">

<StackLayout HorizontalOptions="Center" VerticalOptions="Center" Padding="10">
<Image Source="whatsapp.png" x:Name="imgLogo" HeightRequest="100" WidthRequest="100"
Margin="5"/>
<Label Text="WHATSAPP" FontSize="Large" TextColor="#f7f7f7" Margin="5"/>
</StackLayout>
</ContentPage>

This dark themed splash screen design (it is a simple design, you can change it as per your splash screen requirements).

DarkScreen.xaml.cs:

using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamSample
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class DarkScreen : ContentPage
{
public DarkScreen ()
{
InitializeComponent ();
NavigationPage.SetHasNavigationBar(this, false);
LogoAnimation();
}

public async Task LogoAnimation()
{
imgLogo.Opacity = 0;
await imgLogo.FadeTo(1, 3000);
Application.Current.MainPage = new NavigationPage(new Page1());
}
}
}

Edit the App.xaml.cs as below to start the DarkScreen.xaml page on start-up of our Xamarin app.

App.xaml.cs:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamSample
{
public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new DarkScreen();
}

protected override void OnStart()
{
// Handle when your app starts
}

protected override void OnSleep()
{
// Handle when your app sleeps
}

protected override void OnResume()
{
// Handle when your app resumes
}
}
}

Once you run this app, you will be seeing Whatsapp splash screen and then it will take you to the Page1 screen from where you will be able to select different splash screen options and run it. You can download source code for free using the link below:

DOWNLOAD EXAMPLE