Layout safe areas for iOS in Xamarin Forms

Since the launch of the iPhone X there is a notch at the top of the screen on iOS devices that tend to be annoying to work around. You would have to add some sort of margin to avoid your controls to be overlapped by it. The problem with this approach is that you would have to take into consideration wether or not the phone was in landscape or portrait mode.

Trying to show a label with the text “Some Fancy content”

To avoid these frustrations Xamarin Forms introduces a SafeArea flag that you can set on your Page Layout to ensure it’s content will automatically adjust the margin depending on the orientation of the device.

You can set it with C#

Or using XAML, see the ios namespace declared bellow and then how we set the flag right after

And you will get something like this:

The text is at a healthy distance from the notch and you can clearly see it.

One very important thing to take into consideration is that you need to set this flag for every Page you have on screen. Say for example you have a MasterDetailPage that looks like this:

oh no! both the Master and the detail are being overlapped ):

To fix it you would have to set the safe area to both the Mater and the Detail Page as follows:

And now it will look like this:

No text is being overlapped! yey!

This is another short one but hopefully very useful. If you liked it please share it on social media or at your local church group if you are into that. I will really appreciate it. Have a good one.

The post Layout safe areas for iOS in Xamarin Forms appeared first on Enmanuel Toribio.