Correctly Display Your App on iPhones with a Notch

Almost any app that you may have developed looks wrong on iPhones with a notch if you didn't correctly configure it. All those iPhones that have launched after the iPhone X back in 2017 have notches that caused Apple to change the way apps look just a little bit.

It is your job as a developer to adapt your applications to this change. Thankfully, it is quite easy to do; it takes only one line of code in your Page’s files, and that is it.

The Problem

Now, before we take a look at that line that we need to add, why don’t we take a look at the problem first? Say you have an app that displays a StackPanel with a bunch of elements. It may look decent on Android and on that iPhone 8 you are using to test the iOS version. However, run it on an iPhone with a notch, and it looks awful!

Look at that notch, getting in the way of that first entry.

Sure you can always add some more margin, but then on regular iPhones that margin would look too big, wouldn’t it?

Also, notice that the cancel button looks to close to the “home gesture control.” That black line at the bottom that serves as the replacement to the home button.

A solution?

If you don’t see a problem similar to this, it may be that your interface is using some native elements that already respond well to the new iPhones. They add some spacing to the bottom and the top, so the interface gracefully adapts to these changes:

• The TabbedPage, for example, renders a TabView, which adapts itself, so each tab button is far enough from the “home gesture control”.

• The NavigationPage is another example; it renders a taller title bar so that the title and the toolbar items are lower in the interface, giving the notch enough space and preventing it from interfering with the experience.

So, is that the solution?

No, not at all. For two reasons: One, not all pages display a title bar or a tab bar. And two, even for those who do, notice what happens when the user rotates the phone:

Now the notch is interfering with the left part of the UI! So of course, if the user rotates the phone to the other side, so the notch is on the right, the same thing happens.

The actual solution

So the only way to solve this is to implement the use of a “safe area.” When we define that the pages (which translate to ViewControllers when rendered on iOS) have to use the safe area, iOS reserves some pixels for that notch and the “home gesture control.”

My favorite way of defining that setting is in the XAML definition for each Page. For that Page that I have been showing you, for example, the definition now looks like this:

<ContentPage ...
             xmlns:iOS="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             iOS:Page.UseSafeArea="true">

I am first adding a namespace reference to that iOSSpecific namespace. Then, I use the Page in that namespace to access the UseSafeArea property so I can set it to true. I recommend you add this to all the pages, but ultimately is your decision which pages should do this. For example, the YouTube player does not use this so that the video player can use the entire screen.

As you can see in the image below, the result is much better:

With just setting that UseSafeArea property to true, the page now adds some spacing to the required sides. That easy is to adapt your app to iPhones with notches.