Hello friends, here is a quick post under my series of Xamarin Forms tips where I share with you tips and tricks which make you a better Xamarin Forms developer. Today we are going to look at how to leverage iOS’ safe area to our advantage. In addition to what Xamarin Forms offers by default to manage safe areas, we will explore a more flexible approach to manipulate iOS safe area insets with Xamarin Forms.

This post is part of a series of posts I’ll make on building this pretty chat app UI with Xamarin Forms. The source code can be found here on Github. This app is built using Reactiveui here is a great getting started guide to understand how awesome the reactiveui MVVM framework is.

The problem

On iOS certain areas on the screen are to be avoided when building your app’s UI. These are safe areas. But in some cases, instead of avoiding these safe areas, you might need to make your UI overlap those portions of the screen while respecting the margin between these areas and your layout. The later is what we want to accomplish.  

If you like this post, don’t hesitate to follow me on Twitter or Github and subscribe to this page’s notifications to stay updated with new articles or like my page on Facebook.

The solution

You might already know that by default Xamarin forms offer’s platform specifics API to avoid these safe areas. You can read more about this here. But that is not what we want.

We want to know the number of pixels separating our UI from the safe areas and leverage this to make our UI prettier. Here for example, we have a custom tab which we want to place at the bottom of our page, below the bottom safe area on iOS.

Getting the number of pixels which separates the bottom of our layout with the safe inset is easy on iOS. But we want to apply it to out layout on Xamarin Forms. Here are two solutions which you have.

Platform Specifics Code Behind with C#

As mentioned earlier, Xamarin Forms provides a way of adjusting your layout to iOS’s safe area by default. Here is how we use it to our advantage here.

Effects and XAML

You can use an effect and apply these separations on the control in the iOS project. Effets area a great way of modifying your application’s

Here is how you apply the effect.

ios safe area inset with xamarin forms after
Before
ios safe area insets with xamarin forms after
After
If you find this article useful, please follow me on Twitter,  Github, Linkedin, or like my Facebook page to stay updated.
Follow me on social media and stay updated

Conclusion

These are ways to manipulate iOS safe area insets with Xamarin Forms. You can leverage this to your advantage to build pretty Xamarin Forms applications.

Refferences

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout

https://github.com/jfversluis/TravelMonkey

Follow me on social media and stay updated

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.