Layout safe areas for iOS in Xamarin Forms

Screen Shot 2019-04-24 at 5.57.45 PM
Share on facebook
Share on twitter
Share on linkedin

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.

Did you like the post and would like to leave a reply? You can mention me on twitter @eatskolnikov so we can have a conversation about it

Share it with your friends

Share on facebook
Share on twitter
Share on linkedin

Want to get these post in your inbox?

Type your email down here and you will get a weekly digest of the post here

Other articles on the site


Handling Excel Files with NPOI

NPOI is a library for working with Office documents like Word and Excel. I mainly been using it for reading and writing Excel files so that’s what I’m going to write about. It works with .csv and .xlsx formats and is based on the Apache POI project for Java. It

Read More »