Xamarin.iOS Splash-Screen: How to fill the Background with a Image

Splashscreens: One of my fewest beloved app development topics ;-)

A recurring problem in mobile apps are splash screens. I work with Xamarin for Android and iOS mostly but for creating the splash screen you need to use the native tools. That’s not always that easy.

One of the problems that was really taking me a lot of time was just this seemingly easy task: Have a splash screen consisting of two parts: A background image that fills the whole screen of my app and the logo that sticks in the center and always has the same size. Especially the “fill the whole screen” part took me a lot of time to figure out, because I work on Visual Studio for windows and had no idea of how to use XCode and its editor.

But fortunately it’s quite easy if you know how to do it:

1. Open the project and the splash screen file
2. Place the image on the main view
3. Drag it so it fills the whole screen
4. Browse the settings as seen in the following screenshot and make it autoresize to the full size. The red moving rectangle on the right shows you how it will behave.

Easy if you know it … otherwise it can be really time consuming if you don’t work with XCode usually.

5. And now just try different phone screen sizes from the devices menu.