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

app center

Crashing like a pro with App Center

Accept your fate Face it, your app is going to crash at some point. No matter how well you test it or how great the QA team is nor the 100% code coverage or how extensive the device suite for testing you have. There are always going to be edge

Read More »
looks

Prettying things up with Styles

Using styles you can define a consistent UI for your app and is a great way to make your XAML files more readable and maintainable in the long term. Some neat characteristics of styles: They are very easy to define. Can be inherited to minimize code reuse. Can be defined

Read More »