.NET Maui support - Splash image size

Question

I'm using .NET Maui and would like to add the splash screen. Now Maui uses a single svg file.

Checking the Android documentation, there's a new size for the splash https://developer.android.com/develop/ui/views/launch/splash-screen for Android v12 and above.

GitHub issue reference: https://github.com/dotnet/maui/pull/9797

Is there a defined/suggested size for the splash screen (Android and iOS)?

I am running Windows 11, VS 2022 Version 17.5.4, and Maui project with .NET 7

Thanks in advance.

Answer 1

Hello,

Is there a defined/suggested size for the splash screen (Android and iOS)?

The problem of setting the size of images in SplashScreen has been described in detail in MAUI's official documentation.

The base size of the splash screen can be specified by setting the BaseSize attribute to values that are divisible by 8:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" BaseSize="128,128" />

The value of the BaseSize attribute represents the baseline density of the splash screen, and is effectively the 1.0 scale factor for the splash screen from which all other density sizes are derived. This value will be used to ensure that splash screens are correctly resized to different display densities. If you don't specify a BaseSize for a bitmap-based splash screen, the image isn't resized. If you don't specify a BaseSize value for a vector-based splash screen, the dimensions specified in the SVG are assumed to be the base size. To stop vector images being resized, set the Resize attribute to false:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Resize="false" />

Please refer to Add a splash screen to a .NET MAUI app project for more details.

Update:

After testing, the images displayed in MAUI do appear smaller than in Xamarin, and you could solve this problem in MAUI in a way that is native to Android.

Step 1. Create styles.xml at Platforms/Android/Resources/values folder, and add the following code to customize style.

<?xml version="1.0" encoding="utf-8" ?>
<resources>
      <style name="MyTheme.Splash" parent ="Maui.SplashTheme">
            <item name="android:windowBackground">@drawable/splash_screen</item>
            <item name="android:windowNoTitle">true</item>
            <item name="android:windowSplashScreenAnimatedIcon">@drawable/splashscreenanimatedicon</item>
            <item name="android:windowFullscreen">true</item>
            <item name="android:windowContentOverlay">@null</item>
            <item name="android:windowActionBar">true</item>
      </style>
</resources>

Step 2. Create a drawable folder under the Resources folder and a drawable-v26 folder under drawable.

Step 3. Copy the vd_vector.xml to the drawable folder you just created and rename it to planetsplash.xml.

Step 4. Create a splash_screen.xml file under the drawable folder and copy the following code into it.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
      <item android:drawable="@color/colorPrimary"/>

      <item
        android:width="440dp"
        android:height="440dp"
        android:gravity="center">

            <bitmap
            android:src="@drawable/planetsplash"
            android:gravity="fill" />
      </item>
</layer-list>

Step 5. Create the splashscreenanimatedicon.xml file under the drawable-v26 folder, and copy the following code. The purpose of this is to adapt to the splash screen interface in higher versions of Android.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
      <!-- Change this value to be any Hex value or to refer to a custom color from your colors.xml file, eg `@color/colorPrimary` -->
      <background android:drawable="@color/colorPrimary" />

      <!-- Change this value to point to the newly created images added above in Step 1; e.g. for /drawable-hdpi/newsplashscreenimage.png, set this value to `@drawablenewsplashscreenimage` -->
      <foreground android:drawable="@drawable/planetsplash" android:width="240dp" android:height="240dp" android:gravity="fill" />
</adaptive-icon>

Step 6. Use this custom style in MainActivity.

[Activity(Theme = "@style/MyTheme.Splash", ...

Best Regards,

Alec Liu.

---

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.

Answer 2

Hi @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)

I want a scenario, where i want a whole png to be my splash background, without any background color and foreground image, can you please give you answer for this?