MAUI Splash Screen

Mugileeshwaran J S 20

Hi, I need help

Im building a maui application, I need a splash screen as a background image.png which fits to the whole screen, but the default behavior of MAUI be like getting my primary color as my background view and image as Foreground img

Can anyone help me with this one?

robin 75 Reputation points

2023-11-15T14:10:54.1433333+00:00
Certainly! In Maui, you can customize the splash screen by setting the background image and foreground color. Here's how you can achieve this:

Add Background Image: Place your background_image.png in the appropriate directory (e.g., Resources directory).

Set Background Color: In your MauiProgram.cs or MainPage.razor, you can set the background color. Here's an example using XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="#your_primary_color">  </ContentPage>

Set Foreground Image: Use an Image element for the foreground image, and adjust its layout as needed:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="#your_primary_color"> <Image Source="background_image.png" Aspect="AspectFill" />  </ContentPage>

Adjust the Aspect property based on how you want the image to be displayed.

With this setup, your splash screen should display the background image as the foreground, and the primary color as the background. Adjust the color codes and image paths according to your project specifics.
Mugileeshwaran J S 20 Reputation points

2023-11-15T14:19:14.0866667+00:00

But, I need single png image as my whole splash screen, any help is much appreciated!
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 72,251 Reputation points Microsoft Vendor

2023-11-16T03:13:55.6666667+00:00

Which platform do you want to achieve this function?

As note: you can edit their post with clear and up-to-date info not to post it in comments.
Mugileeshwaran J S 20 Reputation points

2023-11-16T03:52:17.62+00:00

Android 10+ Higher versions.
Mugileeshwaran J S 20 Reputation points

2023-11-16T03:54:21.76+00:00

I want the above feature in Android 10+ Higher versions.

1 answer

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 72,251 Reputation points Microsoft Vendor

2023-11-16T05:37:38.0633333+00:00
Hello,

For Android 10 and 11, you can use the following code to make the image full full the splash screen.

Delete the old splash image in the Resources/Splash folder.

Put your image in it and set it's build action as MauiSplashScreen

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 android 12 or later, this is by Google's design, we cannot make the full screen. See this google's doc:Splash Screen

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

MAUI Splash Screen

1 answer