How to add a custom splash screen in MAUI?

Question

I have a basic MAUI project and I want to set an SVG file as the splash screen.

I have tried to modify the csproj file using the code below:

As you can see the photo is cropped in a circle

How can I make the splash screen display the entire photo?

Answer 1

You cannot (at least not without going a long way using a separate splash screen activity).

That's a limitation of Android: https://developer.android.com/develop/ui/views/launch/splash-screen

The picture also needs to fit into the frame and should be squared. You can set the base size for that in the <MauiSplashSceen> build action in your .csproj file.

You may also be interested in this: Custom NET MAUI Splash screen

There currently also is a bug in MAUI's resizetizer which requires giving the SVG file an entirely new name each time you want to change it: https://stackoverflow.com/a/74336491/4308455

I've written a blog post about the Splash Screen in MAUI, which might also be of interest: https://ewerspej.hashnode.dev/lets-customize-the-splash-screen-of-a-maui-app

Answer 2

For the device which android version is lower than 12.0, you can use the following code to make the image full full the splash screen.

1. Delete the old splash image in the Resources/Splash folder.
2. Put your image in it and set it's build action as MauiSplashScreen
3. Create a xml file in the Platforms\Android\Resources\drawable\maui_splash.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item>
    <bitmap
        android:src="@drawable/splash" //the splash is your image's name 
        android:dither="true"
        android:gravity="fill"/>
</item>
</layer-list>

And then, your image will show in the full splash screen.

For the device which android version is lower than(or =) 12.0, the android system changed the api about the splash screen. The resource code about is the FrameLayout contains a ImageView and we can't set the ImageView layout_width and layout_height. For more information, you can check the answer in this link.