How to Center Xamarin iOS Splash Screen Logo

I was developing an app for a client and based on tutorial from Microsoft Doc, which I have followed, it works, except on iPhone 8. But it works on iPhone 8 Plus. I mean the logo centered properly. But if I tried to re-center on iPhone 8, iPhone 8 Plus did not get center properly again.

The Museum

iPhone 8 , centered by me

The St

iPhone 8 Plus

Then it got me thinking, how about iPhone 11 and iPhone 12. Well, they don’t centered good too. After googled for a while, I noticed after adding the image, I need to add constraints. So here is what I do to make the image centered.

  1. Put in your image view in the Splashscreen.storyboard. Make sure you centered your image using the guidelines shown.
  2. You can change the image to the logo you want at the Properties Window -> Image View -> Image.
  3. Switch to Constraint Editing Mode.
  4. When you are on Constraint Editing Mode, your picture will have little T-shaped tool icon.
  5. Make sure you have your Document Outline Window shown. So you can see what constraint you added. If conflicted, this will not work.
  6. Start making constraint for top, right, bottom and left by dragging the T-shaped tool icon to their respective end.
  7. Once you set up your constraints properly, you should see the image like this.
  8. Let check if other iPhone model splash screen logos are now loaded properly.

Things you should take notes when using constrainst to center the logo:

  1. Try to use transparent background.
  2. Try to use logo image file that is square.
  3. You can add other elements like text too.
  4. Set the image Content Mode to Aspect Fit if you want show the logo fully at any resolutions of iPhone.

Well, that’s it. Thank you for reading and stay safe.

By melicaster

Avid programmer. Was a system analyst who worked with financial industry. Now working as consultant capacity to help companies across Asia and Australia to do digital transformation.

Leave a comment

Your email address will not be published. Required fields are marked *