Working with Splash Screen in .NET MAUI

In this article, we will learn How to create and customize the splash screen in .NET MAUI. In case you are new to .NET MAUI, I will recommend you to go through the below articles of this series.

A splash screen is displayed immediately when the app is launched, till the application initialization process is complete. Once the application is ready for use, the Splash screen is dismissed.

Let’s create a new .NET MAUI Project to learn How to create or customize the Splash Screen. I have created a new project and named it SplashScreenExample.

Splash Screen Example

On running the application on an Android device, you will see a default Splash Screen as shown in the below image.

Hello world example in splash screen .NET MAUI

In .NET MAUI, a splash screen can be specified at a single location in the application. Go to the "Resources\Splash folder", and you will see a scalable vector image i.e., splash.svg in the folder with a build action as MauiSplashScreen in the properties window.

Splash screen in property window

The benefit of scalable vector graphics is that these images can be resized to the correct resolution for the target application. Let’s change the splash screen icon to something different. I already have an icon related to medical which I will show on the Splash Screen. I have deleted the splash.svg icon and added another icon i.e. medical.svg image with the build action as MauiSplashScreen. Make sure the name of the icon that you are adding for the Splash screen must be lowercase, starts and ends with a letter character, and contains only alphanumeric characters or underscore.

Splash screen example .NET MAUI

Now edit the .csproj file of the project as shown in the below image.

Edit project file

Add BaseSize of a splash screen which represents the baseline density of the image. If you don’t specify a base size for the vector image then dimensions specified in the image are used as the base size. BaseSize is specified with BaseSize=”W,H” format where W is the Width and H is the height of the image. The value specified in the BaseSize must be divisible by 8. In my example, I use BaseSize=”128,128” which is divisible by 8.

To change the color of the SVG icon, use the TintColor property and to change the background color, use the Color property.

Code example

<!-- Images -->		
<MauiSplashScreen Include="Resources\Splash\medical.svg" BaseSize="128,128" Color="#F5F7F8" TintColor="#BE3144"/>

Now, Let’s build and run the application in the Android emulator. You will see that Splash Screen with medical.svg icon is displayed as per the configuration done for the MauiSplashScreen.


Similar Articles