Xamarin.Forms - Handle The Safe Area On iPhone X And Higher Models

Introduction

The most recent iPhone devices, such as the iPhone X, XS, and XR, don't have the system button anymore and provide a larger screen area.

When you build apps for these devices, you must now consider this larger screen area in order to ensure your contents properly fit into the page.

Generally speaking, the area of the screen where your contents should go is called the Safe Area. Please refer to the link to understand the physical size of the safe area on different screen resolutions.

In this article, I will explain how to handle the safe area on iPhone devices in Xamarin.Forms, making some step forwards on the official documentation, based on my real-world experience. This article is based on Microsoft Visual Studio 2019 on Windows, but you can certainly use Visual Studio for Mac and Visual Studio 2017.

Implementation

Assuming you already have created a new Xamarin.Forms blank project, you might want to update the NuGet packages in your solution. Notice that, if you are using Visual Studio 2017, you will need to manually install the Xamarin.Essentials package which is required to detect the device model.

The Xamarin.Forms.PlatformConfiguration.iOSSpecific namespace extends the Page object with a method called SetUseSafeArea, which can be invoke to make your pages fit into the safe area. This could be good enough, but it's not.

In fact, you need to detect the device model your app is running on, otherwise the method would apply the safe area to all the devices, including those which don't actually have the safe area but might have a larger screen form factor.

So the approach I have used in my projects is to,

Create an extension method for page objects I'll need to display in the safe area, favoring code reuse and readability
Detect the device the app is running on and call SetUseSafeArea only when required.

Here's the code for the extension method,

public static class Extensions
{
public static void SetIPhoneSafeArea(this ContentPage page)
{
string phoneModel = DeviceInfo.Model;
//DeviceInfo.Model => Real device Model
//iPhone7,1 => iPhone 6+
//iPhone7,2 => iPhone 6
//iPhone8,1 => iPhone 6S
//iPhone8,2 => iPhone 6S+
//iPhone8,4 => iPhone SE
//iPhone9,1 => iPhone 7
//iPhone9,2 => iPhone 7+
//iPhone9,3 => iPhone 7
//iPhone9,4 => iPhone 7+
//iPhone10,1 => iPhone 8
//iPhone10,2 => iPhone 8+
//iPhone10,3 => iPhone X
//iPhone11,2 => iPhone XS
//iPhone11,4 => iPhone XS Max
//iPhone11,8 => iPhone XR
if (phoneModel.ToLower().Contains("iphone11") ||
phoneModel.ToLower() == "iphone10,3")
page.On<iOS>().SetUseSafeArea(true);
}
}

As you can see, the Model property from the Xamarin.Essentials.DeviceInfo class allows understanding the physical device the app is running on and decides which devices on which to use the safe area. Notice that for this example I have extended the ContentPage object, simply because this is the page type I normally use at work. Of course you could more generically extend the Page object or different page types.

The next step is invoking this extension method. This can be easily done in your page's constructor, as follows,

public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.SetIPhoneSafeArea();
}
}

In this way, your app pages will fit into the iOS' safe area and you won't need to worry about anything else.

The source code is attached to this article for your convenience.