Seeing black bars at the top and bottom of the iPhone X Simulator

Asked 12/9, 2017 at 20:30 Answered 7/12, 2021 at 8:27

Solved ios uinavigationbar ios-simulator xcode9 iphone-x

136

Running my App in the iPhone X Simulator (GM Seed) I am noticing two strange effects:

the App does not use the full screen space (top and bottom area is black)
a strange white bar beneath the title bar

Does anybody know what is happening here and how to resolve this? I can't find any new settings in Interface Builder.

Gosney answered 12/9, 2017 at 20:30 Comment(14)

Are you using a Launch Screen file or launch images? Are you using auto layout? – Supplicate 12/9, 2017 at 20:38

Launch images and auto layout – Gosney 12/9, 2017 at 20:38

Why are you using the old style launch images instead of the much easier Launch Screen file? Anyway, have you added the new launch image needed for the new screen size? – Supplicate 12/9, 2017 at 20:39

I can't find a launch image for the iPhone X size. But using a launch screen solved both issues. Please edit your response and I will mark it as answered. Thanks! – Gosney 12/9, 2017 at 20:44

PS: There is a good reason for using lauch images until now, it's hard to explain. Basically I am extending the showing of the launch image until the initial network load of the initial viewcontroller has finished. To present the user immediately content without a loading indicator. And it worked perfectly until now, I saw no reason to change this. But now I have to change it. – Gosney 12/9, 2017 at 20:50

I just created a new sample iOS project with Xcode 9GM and there are slots for the iPhone X launch image. You might need to add a new launch image asset to see the new iPhone X slots. – Supplicate 12/9, 2017 at 21:58

You SHOULDN'T USE launch images. USE Launch Screen.storyboard instead – Draftsman 13/9, 2017 at 7:52

I use Launch Screen storyboard (UIImageView with AspectFill setting), but I have the same problem with iPhone X. When launching app -> top and bottom are white. – Ducky 17/9, 2017 at 7:31

@Ducky Do you use navigation bars? Auto layout? Safe areas? – Gosney 17/9, 2017 at 9:26

Yes, both. Launch Screen storyboard + UIImageView (AutoLayout pinned to safe-area). I have those black-bar issues only with iPhone X when launching app. After I launch the app everything is ok. – Ducky 18/9, 2017 at 5:32

Are you sure the LaunchScreen is really used? Try to add a label and see if the label appears. – Gosney 18/9, 2017 at 13:59

Yes, I am 100% sure :). Only on iPhone X is the problem when launching app with Launch Screen storyboard. – Ducky 19/9, 2017 at 9:1

Have anyone succeeded in using full screen area of iPhoneX with a iOS 10 Base SDK build ? When iPhone 4 was released, using the extra area only required to add a Default-568h.png regardless of the base SDK. – Nett 29/10, 2017 at 1:0

Did not try that. But did you try just using a launch screen on the iOS 10 SDK instead of launch images? – Gosney 29/10, 2017 at 5:15

188

When using launch images (instead of the much easier Launch screen file), you need to provide the properly sized launch image for each device size you wish to support. Once you add the additional launch image, your app should take advantage of the new screen size.

The new iPhone X requires a launch image sized at 1125px × 2436px which is a 3x image for 375pt × 812pt.

Of course if you switch over to using a Launch screen file instead of individual launch images, your app will automatically adapt to all device sizes without any additional work.

Supplicate answered 12/9, 2017 at 20:41 Comment(9)

can you go into more detail on how to integrate the new iphoneX image into a Launch Screen? Any Image Sets I add to Xcode 9 don't have iphoneX slots, only Launch Image sets. – Nedrud 13/9, 2017 at 6:49

@ChristianCerri Image sets are not tied to devices. They just give you 1x, 2x, and 3x options. I was referring to launch images. Those are the only device specific images. If you have a question about adding different sized images to a Launch screen then please post your own question specific to that issue. – Supplicate 13/9, 2017 at 6:52

just did as you asked: #46192022 – Nedrud 13/9, 2017 at 8:19

How the hell launch images related to blackbar on top and bottom of iPhone X simulator ??! – Fastening 23/9, 2017 at 18:46

@Fastening If your app doesn't use a Launch screen storyboard then the launch images determine what screen sizes your app supports. – Supplicate 23/9, 2017 at 18:50

It's working only the problem is my navigation bar not show properly. – Paramagnet 10/10, 2017 at 8:19

See answer from @Ducky if you're still seeing black bars and using a launch screen. Would be great if this answer could be supplemented with the tidbit about how to design the launch screen properly for iPhone X. – Hyrax 9/11, 2017 at 10:3

Some of us are working for clients that refuse to adopt the new systems. So sure, I agree, it's much easier and preferable, but we don't all have choice. – Finnegan 5/12, 2017 at 0:57

@rmaddy, I have a legacy code which uses auto resizing and is built for iPhone 5 and it scales for iPhone 6 and 6 Plus but it doesn't scale for iPhone X and black space is shown on top and bottom of the screen. Could you please tell me if there is a way that scaling can be done on iPhone X or is it not possible to scale the app for iPhone X. – Th 24/5, 2018 at 11:7

I have figured out this issues in iPhone X. Launch image size (1125*2436px) Please flow this below steps. 1.i)Choose your project name in Xcode. ii)Select your project target iii)Then select Launch images source

You can get Migrate popup i) Choose Assets ii)Select Migrate

After that select your Assets.xcassets in your project
Then select Launch image in assets i)Then select attribute inspector
finally check your Launch image source. you can see set Launch image.

Hypogastrium answered 25/10, 2017 at 6:47 Comment(4)

Upvoted for the pictures. But you should clear out the "LaunchScreen" Text from the Launch Screen File text field in your last image. – Basidiomycete 28/10, 2017 at 18:51

Thank's @NadtheVlad. Please clear the "LaunchScreen" text from Launch Screen File and delete LaunchScreen.Storyboard file from Xcode. – Hypogastrium 31/10, 2017 at 12:37

Thanks! It was landscape checkbox from Launch Image that was causing problem since my app is only portrait. – Nashoma 4/1, 2018 at 19:20

Thank you, had the same issue and resolved it by adding launch images (an SDL2 application) – Colettecoleus 23/6, 2019 at 21:26

iPhone X needs different launch image sized 1125px x 2436px (375pt x 812pt @3x).

Check human interface guidelines for more details.

Bungalow answered 15/9, 2017 at 4:30 Comment(0)

I have figured out how to fix (though I still don't understand why this happened only on iPhone X) LaunchScreen storyboard on iPhone X with seeing black top&bottom bars.

I have LaunchScreen storyboard with one UIImageView.

UIImageView's top&bottom has to be pinned to SuperView's top&bottom. NOT to SafeArea.

Ducky answered 23/9, 2017 at 6:44 Comment(3)

This solved my problem with LauchScreen with Autolayout. But instead of pin to the borders, I centered horizontally and vertically and equal the width/height to SuperView. – Storms 27/9, 2017 at 14:0

This only worked after also pinning views in other storyboards to the view top/bottom as opposed to the layout guides. Be sure to check storyboards while in iPhone X mode. – Hyrax 9/11, 2017 at 10:29

why i can't see superview in my storyboard when i go to give that constraint – Wilk 8/10, 2018 at 6:44

I fixed it by simply inserting some random text in the Lanch Screen File textfield. I dont even have a Launch Screen File... XCode is so buggy.

update

Although this fixes it in simulator (still very weird and unexpected) when uploading a binary to iTunes Connect it will fail due to not finding a LanchScreen file of name "random-name"

Rhinal answered 4/11, 2017 at 11:43 Comment(2)

Right its working for iphone x . but its not working for any other devices bro. – Valvular 28/11, 2017 at 6:11

Yes yes! this fixes it in xcode. Thanks! That's good enough for testing. Will buy a real iphone X to avoid the xcode issue in future to test on. – Ovariotomy 31/8, 2018 at 16:22

Just ran into this while trying to update an app I hadn't worked on in a while.

On Xcode 9.4, I was able to fix this by doing the following:

Add a launch screen by going to File -> New -> File... -> Launch Screen

Make sure the newly added launch screen storyboard is selected as the launch screen file under project settings.

Limousin answered 23/12, 2018 at 6:26 Comment(0)

If you already have a 1125px × 2436px launch image but the app is still not using the full screen check to make sure that your image is PNG.

Cootie answered 28/3, 2018 at 15:16 Comment(0)

if you removed LaunchScreen.storyboard; Choose your project, select your project target, General -> App Icons and Launch Images -> Launch Screen File: Select here Main.storyboard instead of LaunchScreen.storyboard

Polenta answered 25/6, 2018 at 19:22 Comment(0)

Just had this problem... When I selected the project & the correct target I had a blank for the 'launch screen file' under the app icons and launch screen images tab. I set it to the default LaunchScreen and the resizing issue I faced was taken care of.

Faught answered 22/5, 2019 at 15:54 Comment(0)

You may check in project target launch screen file is not set to empty if it is empty it may cause problem.

Haphtarah answered 17/2, 2020 at 19:33 Comment(0)

Yes me too face that top spacing issue in iOS 15,

iOS 15 needs some new size of the Launch images

So you please check your all the launch screen images

Check your Attribute inspector is portrait for Launchscreen

Chessman answered 7/12, 2021 at 8:27 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags