Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

.NET Maui splash screen on iOS does not resize

I'm working on a .NET Maui project. I am currently trying to implement a splash screen with a custom logo and background colour. Android displays well after setting the correct value on the BaseSize property within the project file.

The problem is on iOS where the beginning and end of the logo appear off the screen. No matter what I set the BaseSize to the image doesn't update in size, it remains the same.

Your help would be much appreciated.

like image 390
Sach K Avatar asked Oct 25 '25 05:10

Sach K


1 Answers

You could design your own LaunchScreen-Storyboard in XCode and add the Source-Code to your App-Projects' LaunchScreen.storyboard file:

enter image description here

  1. Add your SplashScreen-Image as PNG e.g. YourSplashImage.png to folder \Resource\Splash\ in XCode.

  2. In your LaunchScreen within XCode add an Image View and reference your Image there.

  3. Design your SplashScreen in XCode. Do it also for different Views and Orientations (Regular/Compact), e.g. for iPad 10th generation or iPhone 14 Pro Max setting Constraints for the corresponding View and Orientation (Portrait/Landscape). This will help to have the layout you want and display your SplashScreen correctly on different devices and also different orientations when you start your app in Portrait or Landscape orientation. You could also have a totally different design for Portrait and Landscape Orientation if you want:

enter image description here


enter image description here


enter image description here

  1. Use the Source Code from your XCode LaunchScreen and copy it to a File named LaunchScreen.storyboard in your Visual Studio App Project. This File has to be located right in your App Project folder like this:

enter image description here

  1. Add your Image File for your SplashScreen YourSplashImage.png in this example to your \Resources\Images\.. folder as a PNG:

enter image description here

  1. Edit file Info.plist in your app folder \Platforms\iOS\..

enter image description here

  1. Add your LaunchScreen.storyboard:
<?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>UILaunchStoryboardName</key>
    <string>LaunchScreen.storyboard</string>
</dict>
</plist>

  1. In your App Project File you have to reference your LaunchScreen.storyboard as an InterfaceDefinition like here as this is not possible as an Option via Properties within VS, so you have to do it in your project file directly. You can have the MauiSplashScreen reference in there to be used as Android SplashScreen File Reference. Also YourSplashImage.png has to be added as a BundleResource here in source code:
<Project Sdk="Microsoft.NET.Sdk">

    ...

    <ItemGroup Condition="'$(TargetFramework)'!='net7.0-ios'">
      <MauiSplashScreen Include="Resources\Splash\YourSplashImage.png" Color="#000000" BaseSize="1024,1024" Resize="false"/>
    </ItemGroup>

    <ItemGroup>
      <None Remove="Resources\Images\YourSplashImage.png" />
    </ItemGroup>

    <ItemGroup Condition="'$(TargetFramework)'=='net7.0-ios'">
        <InterfaceDefinition Include="LaunchScreen.storyboard" />
        <BundleResource Include="Resources\Images\YourSplashImage.png" />
    </ItemGroup>
    
    ...

</Project>
like image 200
OXO Avatar answered Oct 26 '25 19:10

OXO