Monday 22 September 2014

iPhone 6 and 6 Plus Launch Images for Xamarin

I was initially stumped by how to get my Xamarin.iOS and Xamarin.Forms apps to size correctly on the iPhone 6 and iPhone 6 Plus. Thanks to this StackOverflow question & answer I have a solution - reposting here because the solution that works best for me right now is only the 3rd most popular answer there.

Simply create two new default images (this is for portrait only, but landscape will become obvious later):

Default-667h@2x.png for iPhone 6; dimensions 750x1334

Default-736h@3x.png for iPhone 6 Plus; dimensions 1242x2208

and place them in the application root or the Resources folder. Notice the filename format is similar to the Default-568h@2x.png image that Apple introduced for the iPhone 5 screen.

Now edit the source of your Info.plist file (open in a text editor so you can type XML directly) and add the following UILaunchImages key (the first two items are for iPhone 6, the others are for the older default image configuration):

<key>UILaunchImages</key>
<array>
<dict>
<key>UILaunchImageMinimumOSVersion</key>
<string>8.0</string>
<key>UILaunchImageName</key>
<string>Default-667h</string>
<key>UILaunchImageOrientation</key>
<string>Portrait</string>
<key>UILaunchImageSize</key>
<string>{375, 667}</string>
</dict>
<dict>
<key>UILaunchImageMinimumOSVersion</key>
<string>8.0</string>
<key>UILaunchImageName</key>
<string>Default-736h</string>
<key>UILaunchImageOrientation</key>
<string>Portrait</string>
<key>UILaunchImageSize</key>
<string>{414, 736}</string>
</dict>
<dict>
<key>UILaunchImageMinimumOSVersion</key>
<string>7.0</string>
<key>UILaunchImageName</key>
<string>Default-568h</string>
<key>UILaunchImageOrientation</key>
<string>Portrait</string>
<key>UILaunchImageSize</key>
<string>{320, 568}</string>
</dict>
 <dict>
  <key>UILaunchImageMinimumOSVersion</key>
  <string>6.0</string>
  <key>UILaunchImageName</key>
  <string>Default</string>
  <key>UILaunchImageOrientation</key>
  <string>Portrait</string>
  <key>UILaunchImageSize</key>
  <string>{320, 480}</string>

 </dict>
</array>
If you wish to support landscape images, add matching keys with Default-Landscape-???h filenames and specify the correct orientation and size.

Note that this is not Apple's preferred way of indicating support for the screen sizes. Their Launch Images doc says:

You use a launch XIB or storyboard file to indicate that your app runs on iPhone 6 Plus or iPhone 6.

which requires you to create a Storyboard or XIB using size classes. More on how to do that in this post, or head back to that StackOverflow post!

p.s. this iPhone 6 Screens Demystified post by PaintCode is awesome!

UPDATED: @jamesmontemagno informs me that you need to add the original 320x480 into the plist too, so I've added to the example above. 
at

14 comments:

  1. Unknown24/09/2014, 09:17

    Thanks, Craig. Exactly what I was looking for. Note that file name "Default-763h@3x.png" should actually be "Default-736h@3x.png". I copied and pasted from your post when renaming my files, so this will probably throw others off as well.

    ReplyDelete
  2. Craig Dunn24/09/2014, 09:43

    Ooops, updated! thanks :)

    ReplyDelete
  3. Unknown24/09/2014, 20:37

    corret dimensions is 1242x2208

    ReplyDelete
  4. Unknown24/09/2014, 20:38

    why xamarin studio have not got this function?

    ReplyDelete
  5. Craig Dunn24/09/2014, 20:55

    Xamarin Studio support is coming - Apple didn't give us much notice about these dimensions... wasn't clear until after the phones were available!
    Thanks, I've updated the dimensions too.

    ReplyDelete
  6. Anonymous25/09/2014, 08:05

    This post will be on Xamarin Weekly Newsletter Issue #7

    ReplyDelete
  7. Unknown04/11/2014, 20:03

    Pretty sure the dimensaion of the launch image are 750x1334, NOT 752x1334 ?

    ReplyDelete
  8. Craig Dunn04/11/2014, 20:57

    Oops, also my bad :-/ I've updated to the correct dimensions (thanks)!

    ReplyDelete
  9. Unknown10/12/2014, 07:19

    Hi,

    i use Visual Studio with Xamarin.iOS plugin. I made the appropriate files, named them as you say and put them in Resources folder. In all emulators choices (4s, 5, 5S, 6, 6+), they seem to be working correctly for iOS 8 but without editing info.plist file.

    I mean, i did not do any edit on that file and still it is working fine. Do you think that editing info.plist is necessary ?

    ReplyDelete
  10. Craig Dunn10/12/2014, 17:58

    I'd always recommend testing on real devices rather than just emulators, just to be sure. This post is already a month old, so Xamarin's support for the new image sizes has probably improved since I wrote this. If I get a chance I'll test myself and update the post if I find anything interesting.

    ReplyDelete
  11. Unknown11/12/2014, 01:44

    Ok, i always test on a real device, i just did not get the chance yet. When i do (today or tomorrow), i post here the findings.

    ReplyDelete
  12. Fran29/06/2015, 06:49

    Ok, now I see the splash screen in iPhone 6, but now I don't see it in iPad Air...what can I do?

    Thanks.

    ReplyDelete
  13. Craig Dunn07/07/2015, 13:26

    If you want the iPad too, you should probably use the storyboard approach

    http://conceptdev.blogspot.com/2014/09/iphone-6-and-6-plus-launchscreenstorybo.html

    OR provide Default-Portrait and/or Default-Landscape images ... see this doc

    http://developer.xamarin.com/guides/ios/application_fundamentals/working_with_images/launch-screens/

    ReplyDelete
    Replies
    1. DCB2B16/06/2017, 11:48

      I able to use this method to get launch screen. I wonder know is there a way edit in this method and add ipad launch screen. I tried story board, and it still makes app upscale.

      Delete

Note: only a member of this blog may post a comment.