Animated Splash Screen in .NET MAUI

In .NET MAUI, you can create an animated splash screen by combining a splash screen image with animation effects. Here's a comprehensive guide to implement this:

Basic Implementation

1. Add Splash Screen Image

First, add your splash screen image to the Resources\Images folder in your MAUI project.

2. Update MauiProgram.cs

Configure your app to use the splash screen:

csharp

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts => {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });
    
    // Register your splash screen page
    builder.Services.AddTransient<SplashPage>();
    
    return builder.Build();
}

Creating an Animated Splash Page

1. Create SplashPage.xaml

xml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.SplashPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    
    <Grid>
        <!-- Your splash content -->
        <Image Source="splash_logo.png" 
               x:Name="SplashImage"
               HeightRequest="200"
               WidthRequest="200"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
        
        <!-- Optional loading indicator -->
        <ActivityIndicator IsRunning="True"
                           Color="{DynamicResource PrimaryColor}"
                           HorizontalOptions="Center"
                           VerticalOptions="End"
                           Margin="0,0,0,50"/>
    </Grid>
</ContentPage>

2. Create SplashPage.xaml.cs with Animation

csharp

public partial class SplashPage : ContentPage
{
    public SplashPage()
    {
        InitializeComponent();
        
        // Start animations when page appears
        this.Appearing += OnAppearing;
    }

    private async void OnAppearing(object sender, EventArgs e)
    {
        // Scale up animation
        await SplashImage.ScaleTo(1.2, 1000, Easing.SinInOut);
        
        // Scale back to normal
        await SplashImage.ScaleTo(1.0, 1000, Easing.SinInOut);
        
        // Fade out
        await SplashImage.FadeTo(0, 500);
        
        // Navigate to main page
        await Shell.Current.GoToAsync("//MainPage");
    }
}

Platform-Specific Customizations

Android

In Platforms/Android/Resources/drawable/splash_screen.xml:

xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/maui_splash_color" />
        </shape>
    </item>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash_logo" />
    </item>
</layer-list>

Update MauiSplashScreen in your Android manifest.

iOS

In Platforms/iOS/Resources/LaunchScreen.storyboard, you can customize the launch screen.

Advanced Animation Example

For more complex animations, you can use Lottie:

1. Add the MauiLottie NuGet package

2. Add your Lottie JSON file to Resources/Raw

3. Use it in your splash page:

xml

<lottie:LottieAnimationView 
    AnimationSource="EmbeddedResource"
    Animation="YourNamespace.Resources.Raw.animation.json"
    Loop="True"
    AutoPlay="True"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"/>

Transition to Main Page

Modify your AppShell.xaml.cs to show the splash screen first:

csharp

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        
        // Show splash screen first
        CurrentItem = new SplashPage();
    }
}

Remember to handle any initialization tasks during the splash screen display if needed.

This implementation provides a smooth, animated transition from splash screen to your main application content while maintaining platform-specific best practices.