Xamarin Forms – How to Create Splash Screen?

Hi Developers,

In this post We will create an Animated Xamarin Forms Splash Screen. The Splash screen will be having a logo in the center of the screen and it will fade in 4 seconds and then move to another forms. So Let’s see how we can create Xamarin forms splash screen.

You can download the Logo used from Iconfinder.com.

xamarin screen splash screen logo

Splash Screen in Xamarin Forms: Download Source code

Edit your MainPage.xaml page 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"
xmlns:local="clr-namespace:XamarinSplash"
x:Class="XamarinSplash.MainPage"
BackgroundColor="#fff">

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

</ContentPage>

And its code file as below:

MainPage.xaml.cs:

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

namespace XamarinSplash
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
LogoAnimation();
}

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

imgLogo.FadeTo(1,4000) will make our logo to fade-in within 4 seconds time. We are setting the image opacity to 0 just before that line of code.

Screenshot of the Splash screen:

 

Create a new Content Page in your Xamarin project with name Page1

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="XamarinSplash.Page1">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Download Source code.
Thanks For reading. Hope you found this post helpful. 🙂