Search code examples
mauiandroid-splashscreen.net-maui.shelldynamic-splash-screen

Implementing own SplashScreen in MAUI not working

I wanted to use a SplashScreen in my .NET MAUI App which is showing a JPG FullScreen and also just thinking of showing also Version Information on the same page.

When I double click on my Project-File, I can see an ItemGroup in which I set my jpg

<ItemGroup>
...
    <MauiSplashScreen Include="Resources\Splash\mySplash.jpg" BaseSize="128,128" Color="#FFFFFF" Aspect="AspectFill" />
...
</ItemGroup>

Okay, I've just set a small BaseSize here, but AspectFill did not work at all and also there is no possibility to set an additional Label do have Version information below.

The Version information for now is not a must, but would be nice. But, a must have for me is that my JPG is shown full screen. Currently, it is shown within a circle.

I tried with my own ContentPage and added it to App.xaml.cs Unfortunately, it wasn't shown as SplashScreen and just could see the typical Blue Screen with the ".NET"-Logo when my App was started in Pixel 5 - API 33 (Android 13.0 - API 33)-Emulator

public App()
{
    InitializeComponent();

    MainPage = new MySpalshScreen();
}

Is there a way to show my own ContentPage and after about 3 seconds move on to my normal Main-Page?

Added Screenshot to Comment

This is how it is displayed when I start my App:

  • First of all, I get the Standard-SplashScreen-Background where we would normally see the .NET-Logo
  • Then my own SplashScreen-ContentPage with the Dotnet_Bot.svg is loaded
  • First of all it shows the standard blue background where we would normally see the .NET-Logo as Splash-Screen. By double-clicking on my project, I already commented out <!--<MauiSplashScreen Include="Resources\Splash\dotnet_bot.svg" BaseSize="128,128" Color="#FFFFFF" Aspect="AspectFill" /> -->

Splash_Behavior

Solution

  • it still shows the Background-Color of the standard .NET-SplashScreen

    with the following settings I can show the exact appearance of my splash screen:

    <MauiSplashScreen Include="Resources\Splash\splashscreen.jpg" Color="#999" BaseSize="240,240"/>

    Example1

    by changing the Color to #000 in my case I get a seamless splash screen

    Example

    You can have a look at the official documentation for android splash screen dimentions to understand why its masked as a circle.

    Now if you get a .png (or better .svg) with transparent background, you can have your logo without the circle mask.

    <MauiSplashScreen Include="Resources\Splash\splashscreen.png" Color="#999" BaseSize="240,240"/>

    Example3

    Note that I had to reset the project in several ways until it really swapped the image to the png, some of the things I tried were Cleaning and rebuilding the project, deleting the obj folder in the file explorer and I tried removing Color property MauiSplashScreen and then I saw a difference, It had the primary colour of the theme on the background and the colour I just deleted in the image background, I gave back the Color property and it worked.

    To delay the change of page you could just await a delay such as

    await Task.Delay(ms);

    then invoke the main page

        public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MySpalshScreen();

            _ = EndSplash();
        }

        async Task EndSplash()
        {
            //delay 3 seconds
            await Task.Delay(3000);
            MainThread.BeginInvokeOnMainThread(() =>
            {
                MainPage = new AppShell();
            });
        }
    }

    Example