Splashscreen icon not showing

Question

In my .NET MAUI App, I have an SVG that I wanted to use as my Splashscreen-Icon

...
<MauiSplashScreen Include="Resources\Splash\mysplash.svg" Color="#000000" BaseSize="128,128" />
...

When I change to the following in the .csproj of my App, I can just see a black screen on iOS (in iPhone 14 iOS 16.2 Emulator). The background should be black, yes. But, I should also show my SVG.

On Android, I even do not see the splash-screen at all. Is there something, I am missing?

Answer 1

I also did not display the image on the Splash Screen and the background color did not change (MAUI\Android).

If I specified in MainActivity.cs to use the Theme Theme = "@style/Maui.SplashTheme", then everything worked. It also worked if in styles.xml I prescribed (style name="AppTheme" parent="Maui.SplashTheme"), but unfortunately it broke other styles for an unknown reason.

In the project file, I have it specified as follows:

<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#000000" BaseSize="128,128" />

As a result, the problem was solved for me by installing such styles (android:windowBackground) in " Platforms/Android/Resources/values/styles.xml":

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme">
        <!--To turn off the highlight color-->
        <item name="android:colorControlHighlight">@android:color/transparent</item>
        <!--To turn off the application title bar-->
        <item name="windowNoTitle">true</item>
        <!--To enable working with SplashScreen-->
        <item name="android:windowBackground">@drawable/maui_splash</item>
    </style>
</resources>

In the Platforms\Android\MainActivity.cs class file, I checked that the desired style was used (Theme = "@style/AppTheme")

namespace MyApp
{
    [Activity(Theme = "@style/AppTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
    public class MainActivity : MauiAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
        }
    }
}

I found some styles here https://github.com/dotnet/maui...

Answer 2

After research, I came to a description of another customization for iOS and Android and hint for the use of Colors

iOS:

Navigate to folder \Platforms\iOS\ and edit Info.plist.

Add a new key/value-Pair with the folder and name of the splash screen image file without files extension, e.g. Resources\Splash\my_splash.png. What I found out in Changes in Info.plist not recognized anymore it only worked with PNG files in the end. I tried before and thought it was working with SVG files, but in the end only could get it running with a PNG. Also play with the right resolution that works for you.

Hint 1: Build action for your Image still has to be MauiSplashScreen. This also adds a <MauiSplashScreen ...> section to your csproj.

Hint 2: I tried with filenames having 2 underscrores like "my_splash_screen.png" which did not work anymore then. I don't know if this is not allowed in general or the filename/path was too long in the end, but it did not work for me.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>UILaunchImageFile</key>
    <string>Resources\Splash\my_splash.png</string>
</dict>
</plist>

Android:

I had to do some steps to have the Splash Screen with a custom Background Color on Android:

1. Add your Background Color in **colors.xml in file \Platforms\Android\Resources\values\colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    ...
    <!-- Just a red Color -->
    <color name="splashBackground">#FF0000</color>
</resources>

2. Add a file styles.xml if not existing: \Platforms\Android\Resources\values\styles.xml

3. Add your Background Color with the name used in colors.xml above, e.g. CustomSplashTheme. Should be derived from ``Maui.SplashTheme"```:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="CustomSplashTheme" parent="Maui.SplashTheme">
        <item name="android:windowSplashScreenBackground">@color/splashBackground</item>
        <item name="android:windowLightStatusBar">true</item>
    </style>
</resources>

4. Activate your CustomSplashTheme in \Platforms\Android\MainActivity.cs

using Android.App;
using Android.Content.PM;
using Android.OS;

namespace MyApp;

[Activity(Theme = "@style/CustomSplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
}

With these steps, I now have a full screen Splash Screen on iOS and also the typical SplashScreen with rounded Icon but a custom background color on Android.

Answer 3

From the docs Add a splash screen to a .NET MAUI app project:

1. You need to add your own svg file for the splashscreen, e.g. mysplashscreen.svg to replace the default splash.svg

<ItemGroup> 
      <!-- Splash Screen -->
     <MauiSplashScreen Include="Resources\Splash\mysplashscreen.svg"  Color="#000000" BaseSize="128,128" />

2. The build action of mysplashscreen.svg file the must be manually set to MauiSplashScreen in the Properties window if it' s not being automatically changed.

3. On iOS, when switching the simulator to the verison: iOS 16.0, the SplashScreen can be shown as expected, see below output:

iOS:

Android: