How to prepare your apps for the iPhone X
The iPhone X is here, and its all-screen design changes the way your apps will look. We’ll show you how to alter your existing apps to fit the 'future of the iPhone'!
UPDATED April 3, 2018. After months of using this process, we’ve added some clarifications and fine-tuned our tutorial. We also created an open-sourced tool to help you in the process, which we explain in more detail below!
Celebrating the iPhone’s tenth anniversary, Apple just released the iPhone X. But how does its new proportions and different screen shape affect existing iOS apps? Will an existing app in the store today work properly on the iPhone X with its weird display shape?
We break it down for you.
The problem areas: navigation and tab bars
On iOS11, the navigation bar (the bar on the top) is already significantly taller than it was on iOS10. On the iPhone X it’s even taller, and so is the tab bar on the bottom.
Apple’s own apps always make use of the standard UINavigationBar and UITabBar, which will both automatically make adjustments for the iPhone X. They also paid attention to detail to make sure that the content is never obstructed by the screen’s rounded corners, another first on an iPhone.
But what does this mean for us as developers, and for our apps?
Apple has released two new videos to demonstrate: Designing apps for iPhone X and Building apps for iPhone X. Based on those, it becomes clear that adapting existing apps to make full use of the iPhone X display will require extra work for us developers.
Luckily, the latest Xcode 9 includes an iPhone X Simulator. So to take a first look at what an iPhone X does to our apps, we took a version of our VTM application, built using the iOS10 SDK, and tested it on the simulator.
Similar to when Apple first released the iPhone 5 ( the first larger screen size), the existing app is automatically centered on the display, with the top and bottom simply shown as black. Of course, this doesn’t look ideal, but at least this means that people can purchase an iPhone X knowing that their favourite apps won’t be messed up.
As soon as you start building apps with the iOS 11 SDK, Apple (unsurprisingly) expects you to take full advantage of the iPhone X screen. A quick (and dirty) fix would be to always make the status bar on the top black, similar to how it used to be pre-iOS7. However, this is against Apple’s human interface guidelines:
“Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.”
So obviously, we’re not going to do that.
Instead we’ll go the official route and use a new feature in Xcode 9, called Safe Area Layout Guides, to update the layout of our UI so that it looks great on the iPhone X — without breaking things on other iPhone devices.
But there’s a catch (isn’t there always). To use this feature, we have to drop support for iOS8!
Right now, most of our apps still support iOS8 — for some, we event chose to keep supporting iOS7. This means our clients will have to make a choice: either submit applications using the iOS10 SDK, not optimised for iPhone X, for as long as Apple allows it; or only support iOS9 and up and have an app optimised for iPhone X. The number of pre-iOS9 users vs the number of iPhone X users will no doubt be the deciding factor here.
Of course, adaption of new iOS versions tends to go up quickly, and we would prefer to optimise — it would be a shame not to use that screen fully!
We also discovered that by enabling Safe Area Layout Guides in XIBs (which we use throughout all apps to configure our views), we lose backwards compatibility for iOS9 or iOS10. Apple responded to a post on this thread to present a few options to get around this issue:
- Move the view and layout to a storyboard view controller
- Use IB Outlets to the relevant (top and bottom) constraints, and programmatically replace them with constraints to top/bottom layout guide once the view gets installed
- Install the view as a subview, and programmatically add constraints to top/bottom layout guides and sides.
We decided to go for option 1, and started to move all our views to storyboards. While doing this, however, we discovered it’s really time-consuming: IBOutlets, IBActions, etc. all had to be reconnected. To tackle this issue, we created a tool that converts xibs to storyboard. You can read all about it in our blogpost or download it from our GitHub page.
Knowing all this, we then tried building two of our apps, using the iOS11 SDK, to find the easiest way to adapt them for the iPhone X.
And our next news item is…
The first app we tried to adapt is the one we built for De Tijd, a popular Belgian newspaper.
Let’s start by running the app as-is on the iPhone 8 and the new iPhone X side by side. The ‘Mijn Tijd’ section makes use of a UINavigationController with a standard UINavigationBar.
On the top, everything looks like it should. Because the ‘Mijn Tijd’ section uses a standard UINavigationBar, iOS automatically lays out the navigation bar title and buttons like it would for Apple’s own apps.
On the bottom, however, we’re seeing a pretty big gap. This is because Apple has introduced a safe zone, in which content can be shown without being cut off by the rounded corners or the indentation at the top of the screen. This zone appears to be 44pt high on both the top and the bottom.
Because the tab bar is attached to the bottom of the view, it is now being attached to the bottom of the safe zone. We could easily fix this by making the tab bar taller and moving it down. However, if we were to do that, we would also make it taller for all other iPhone models, which is of course not what we want.
Enter Safe Area Layout Guides, a new feature in iOS11. By enabling it, a view will now receive a Safe Area which can be used to attach constraints.
This Safe Area is the size of the safe zone on iPhone X and the size of the entire screen on all other iPhones. By attaching constraints to the Safe Area, we can now create a situation that works for both types of displays.
We create a new view and attach the bottom to the main view’s bottom. Make sure it’s not attached to the Safe Area. You’ll see an error, saying the new view needs a specific height – don’t worry about this, we’re going to fix it in a few seconds.
Next, we place the actual tab bar inside this new view. We give it a height (in our case 49pt) if it didn’t have one yet, and attach its top to the top of the new view and its bottom to the bottom Safe Area Layout Guide. The error we had before should be gone now.
The result is that the height of the new view will now change depending on the device your app is running. On the iPhone X, this will be 44pt plus the the tab bar’s height; on other iPhones, this will be just the the tab bar’s height because in this case the height of the Safe Area at the bottom is 0. When we give this new view the same background color as our tab bar, the result on both iPhone 8 and iPhone X looks like this:
Exactly what we need!
More custom components, more fun?
Our app for De Tijd uses a lot of standard components, making these alterations easier. This is why we tried a second example: our popular VTM application, which uses mostly custom components.
Let’s take the first screen, the ‘Ontdek’ section, as an example. Here we have both a custom navigation and tab bar, which either fade in or have a different blurriness based on the position of the content. Here, we ran the app as-is.
You can immediately see a few different issues in this application. The custom top and bottom bars have the same size on the iPhone X and on the iPhone 8. That makes sense since the system won’t make any automatic adjustments here, but it doesn’t exactly look pretty.
Just like before, we’ll solve this by enabling the Safe Area Layout Guide for this screen.
To fix the issue with the tab bar at the bottom, we just just follow the exact same steps as we did with De Tijd. We create a new view and attach it to the bottom of the main view. Next, we insert the original tab bar view, give it the height we want, and attach its top to the container view and its bottom to the bottom Safe Area Layout Guide of the main view. The only additional step here is to attach the visual effect view to all sides of the container view, and make sure the backgrounds of the container view and the tab bar are transparent. This creates a nice blur effect when content scrolls below it.
For the navigation bar, we’ll do the exact same thing – only in reverse. As before, we create a new container view, but this time we attach its top to the main view, instead of the bottom. Next, we add the original navigation bar. Again, we give it a height (default 44pt) but now attach its bottom to the container view and its to top to the top Safe Area Layout Guide.
The height of the navigation bar will change depending of the device, just like the tab bar on the bottom. On an iPhone 8, the total height will be 64pt, and on an iPhone X it will be 88pt.
By following this approach, we’re sure that when Apple decides to release a new iPhone with strange new dimensions and a strange notch, we will be ready ;)
After making these adjustments, we finally have the expected result. Our top & bottom are still the same height and the VTM logo and search button are nicely centered in the top bar.
Where do we go from here?
As we’ve seen from our test cases, updating existing apps isn’t hopelessly complicated but will require different degrees of effort based on the UI components used. Luckily, the iPhone X isn’t released immediately like the iPhone 8; with a release in early November, Apple has given us developers some time.
For us, the logical next steps will be to test each screen of all our applications, running all them through the necessary layout changes to properly use the Safe Area Layout Guide.
We expect to see plenty of these updates in the app stores soon — it would be a shame to offer iPhone X owners messed up toolbars and views.
Are you planning to update all of your apps for the iPhone X right away, or will you be holding off?