How to Add iPhoneX Launch Image

Question

Using Xcode Version 9.0 (9A235), I am trying to add a Launch Image for iPhoneX at the requested 2436px × 1125px (landscape). Currently I am using a Storyboard and it looks like this:

'launchimage' is an Image View linked to an Image Set:

And the Image Set is as follows:

The only place I get an iPhoneX sized image is in a Launch Image set:

But when I try to select a Launch Image in the Image View on the storyboard it can't be selected:

Any help on how to add the correct sized launch image for iPhoneX or is it back to Launch Images? I would prefer the correct sized image, not a stretched one.

UPDATE:

I would like to explain why I want the image to be exactly the same pixel per pixel. Following the Guidelines in https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/ my launch image is a static version of the first page of the App. If the Launch Image is stretched then there is a noticeable switch from Launch Image to First Page. Which sort of defeats the object of the guidelines. Apple recommend using a storyboard launch, but it seems you can't follow their guidelines if you do. Typical, really.

Solution 1

Using Xcode Version 9.1 (9B55), thanks to the answers above (especially Stoull), however my experience is slightly different. My original question was basically: "How to get launch image (in storyboard or LaunchImage) which matches the bg of the first game scene without a rescaling blip on all resolutions?"

I have resolved this and it works using LaunchImage. However, there are complications.

Add a LaunchImage to the Assets folder, then specify it in the project settings:

Then you would expect to do this:

resulting in:

BUT on Build you get the warning:

so you need this for the LaunchImage:

resulting in:

and there is no warning.... and LaunchImage works on all iPhones/iPads.

The image sizes are:

iPhoneX (iPhone X Landscape iOS 11+) : 2436 x 1125

Retina HD 5.5" (iPhone Landscape iOS 8,9) : 2208 x 1242

2x (iPhone Portrait iOS 7-9) : 640 x 960

Retina4 (iPhone Portrait iOS 7-9) : 640 x 1136

1x (iPad Landscape iOS 7-9) : 1024 x 768

2x (iPad Landscape iOS 7-9) : 2048 x 1536

The system is clearly messy and needs a proper revamp by Apple.

Solution 2

If your used the LaunchImage.launchimage for Launch, the solution is (in Xcdoe 9.0):

1. Select Assets.xcassets, right click on middle pane, select App Icons & launch Images -> New iOS Launch Image . Then move the old LaunchImage.launchimage images to the new one, and add the image size with 1125×2436 px for the iPhoneX.

2. Also, you can add the following json object to Contents.json file which on LaunchImage.launchimage folder in your old project。Once Xcode refreshes, just drop in a 1125×2436px image. If you need landscape, you can add another with the orientation.

	{
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2436h",
      "minimum-system-version" : "11.0",
      "orientation" : "portrait",
      "scale" : "3x"
    }

Solution 3

To the 2018 lazy devs like me who has an existing project that has an old version of launchimage (with no iPhoneX variant), here's my solution to support iPhone X - this is a shortcut one for you.

1. Open Assets.xcassets in your Xcode.
2. Right click in your LanchImage then select Show In Finder.
3. Open the Contents.json
4. Paste the follow codes inside your "images" array.

 {
  "extent" : "full-screen",
  "idiom" : "iphone",
  "subtype" : "2436h",
  "filename" : "ipxportrait.png",
  "minimum-system-version" : "11.0",
  "orientation" : "portrait",
  "scale" : "3x"
},
{
  "extent" : "full-screen",
  "idiom" : "iphone",
  "subtype" : "2436h",
  "filename" : "ipxlandscape.png",
  "minimum-system-version" : "11.0",
  "orientation" : "landscape",
  "scale" : "3x"
},

Replace of course the filename with appropriate images. Voila!

Solution 4

If I understood correctly, you are using a storyboard as a Launch Screen with image view, right?

If so, in you Launch Screen storyboard select to view as iPhone X:

Then add your image view so it fills the entire area like this:

and pin it to the superview with constants of 0. It's important to do this with iPhone X selected, because otherwise you would probably pin to Top Layout Guide, which you don't want to, because it will leave you with a gap at the top.

Your constaints should look like this (pinned to Superview):

Solution 5

In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of iPhone 6, iPhone 7, and iPhone 8. The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20% additional vertical space for content.

Probably, your image is ok, but try to cleaning (cmd + K) and rebuilding the project.

If it does not helps, then remove this image from Xcode and re-add it again by dragging those images into Xcode. And re-build it. It should work.

View more solutions

Comments

[Anbu.Karthik]

type full launchimage and check once 3x is supported for iphone X

[David Nedrow]

Note that you should probably set the Content Mode to “aspect fit”.

[rmaddy]

Your issue is not specific to the iPhone X. Your "launchImage" asset (not to be confused with normal Launch images) won't work for your Launch screen since several differently sized iPhones use the 2x image. The iPhones 4, 5, 6, 6s, 7, 7s represent 3 different screen sizes that all use 2x images. Now the iPhones 6+, 6s+, 7+, 7s+, and iPhone X now represent 2 different screen sizes that all use 3x images.

[Christian Cerri]

@maddy true, but correct sizes are working for all 6 and 7 series, which was acceptable. You know, we try to support the X correctly, but we don't get given the tools to do it. What's that about?

[Aaron Brager]

"Apple recommend using a storyboard launch, but it seems you can't follow their guidelines if you do. " — that's not true at all. You just should build a flexible, adaptive UI in your launch storyboard, like you would in any other storyboard.

[H R]

@AaronBrager what if I don't want a UI, I want static image to be my launch screen. If I use storyboard, then I'm screwed, since it will be stretched vertically for iPhone X. If I use image set, even then I'm screwed, coz I like using launch image time to load some of my remote resources. I use another viewcontroller after launch screen with identical image, so that it makes user see the same launch page while I'm loading resources

[Aaron Brager]

@HR You are not following the Apple design guidelines, so you shouldn't be surprised if the tools don't make it easy to do what you want. I'm not sure what your image looks like, but is it possible to replicate what you want by having a launch storyboard with a few image views instead of one? e.g. a background image (Aspect Fit), a foreground image like a logo, etc.?

[Aaron Brager]

Keep in mind, you can use the Safe Area Layout Guide iPhone X constraints in the Launch Storyboard (just like any other storyboard)

[Christian Cerri]

@Aaron Brager No one follows the Apple Guidelines (for games). Period. And if you do try, the tools make it almost impossible. A static launch image (in storyboard or LaunchImage) which matches the bg of the first game scene without a rescaling blip on all resolutions. If you have an answer post it. Otherwise you’re not adding much to this answer.

[Zalak Patel]

@ChristianCerri Did you got solution to this issue? I am also facing same issue. Thanks

[Christian Cerri]

@ZalakPatel check out my answer below and Stoull's answer below as well. Issue is resolved but you need to use Launch Images.

[Christian Cerri]

yes, currently the iphoneX simulator shows a letterboxed image. You don't explain how to add a 2436x1125 image to my launch screen storyboard.

[thibaut noah]

would like to know that aswell

[Christian Cerri]

as per maddy's comment above, the 3x is used for 2 sizes (iPhone Pluses @ 2208px × 1242px and and iPhone X @ 2436px × 1125px) so one or other will be stretched.

[Christian Cerri]

thanks @jonaszmclaren however this is not the solution. 1) I want to specify a 2436x1125 image for iPhoneX AND a 2208x1242 image for iPhones 6/7/8/plus AND a 2048x1536 for iPads... sure I can get it to work JUST on X, but not on everything. 2) selecting in the image view refers to selecting a LaunchImage type, not an Image type and Cleaning/Re-adding does not fix this (I mention it because in LaunchImage type you CAN specify all three images correctly - but you can't add it to a storyboard).

[jonaszmclaren]

You either use Launch Image by providing proper images in asset catalog, or you build your "launch view" using LaunchScreen.storyboard. I don't know why you want to select launch image in storyboard? If you add Launch image set to asset catalog it cannot be selected as image in storyboard, it is used by iOS during launch.

[jonaszmclaren]

The last image on your screen is of type "Launch Image" (look top right), and the other images are "normal" images. Normal images can be used by you in the app, launch images are used by system during launch.

[Christian Cerri]

Yep, understood, but LaunchImage is the only place you can select an X and a 6/7/8 and an iPad image... think I'll just drop this silly storyboard and use LaunchImage!!! Thanks

[Christian Cerri]

If you add a solution saying you can't support all models in a Universal App with a Launch Screen Storyboard with precise non-stretched images, I'll mark it correct - seems to be the case.

[jonaszmclaren]

Oh, I see your point now. If it's just an image during launch, it will be probably the best solution.

[jonaszmclaren]

Let us continue this discussion in chat.

[Christian Cerri]

woo hoo! back to Launch Images!

[Christian Cerri]

for anyone else reading this... I tried using Launch Images and keep getting a warning "must supply Retina 4 image for iOS 7'... but there is no slot for it in LaunchImage asset item, although there is one for Portrait. Suffice it ti say, I have for the time being given up supporting the iPhone X for launch images.

[andrew k]

This is incorrect, you can use an asset catalog as described in Stoull's answer below.

[jonaszmclaren]

If I understand Stoull's answer correctly, he uses Launch Image, right? So my answer says it is possible by using Launch Image, but not "normal" image in Asset Catalog.

[jonaszmclaren]

Why is this answer being down-voted? I didn't say it's impossible to add Launch Image for iPhone X (I actually suggested using it), but that it's impossible to add NORMAL image to asset catalog specifically for iPhone X. This is what @ChristianCerri wanted to achieve, by using Image View in LaunchScreen Storyboard

[Christian Cerri]

@jonaszmclaren agree completely - you are correct that what I wanted cannot be achieved with StoryBoards. You got my upvote. And although answers have been expanded upon below, this was originally the correct answer.

[Javier Delgado]

I have read like 100 posts about iphone X layout and this is the only answer that solved my issue

[JERC]

with this approach, did you have problems when you submitted your app to Appstore?