XAMARIN FORMS TIPS: iOS 15 Transparent TabBar and Safe Area

By

 

iOS 15, transparent TabBar


Since the release of iOS 15, some people had regression with their app, particularly because of the TabBar component.

In iOS 15, by default (while using Xamarin Forms), the TabBar comes with a Transparent background and the page's content can scroll behind this TabBar. So it's not user friendly  and I presume for all existing apps, it's not beautiful. See the next picture:

iOS 15, transparent TabBar

You can solve this problem by many ways, but the fastest solution / workaround that I found is the following:

=> manage iOS SafeArea directly into your XAML to constrain page's content to fit the free space of the page. 

You can do that in XAML in 2 lines of code:



<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="True"
...

iOS 15 using Page.UseSafeArea = true



As TabBar is transparent, you will see the color of the page behind it. So if you use theming, the color will be updated automatically.


Comments

Post a Comment

Popular posts from this blog

EMGU with Xamarin Forms guide [part 1]

By
Image
I- Introduction, OpenCV and EMGU Do you know OpenCV ( Open Source Computer Vision Library:  https://opencv.org/ ) ?  This open source library let's you work and play with images and videos with a lot of powerful image processing algorithms !  If you want some details, I suggest you to first navigate to the link above or search for 'OpenCV' on Google.  Examples of OpenCV processing found on the web (filters, object detection, edges...): EMGU is a .NET OpenCV wrapper. That means that you will be able to use OpenCV functionnalities in your .NET projects using C# for instance. EMGU is cross platform, so you will also be able to use it in your Xamarin projects ! That's great because there is no advanced image processing library in Xamarin. In this article, we will talk about EMGU and list the steps to setup a Xamarin Forms project using EMGU . It may help you because, we must say that it's not a trivial task...  II-What do I need to
Read more »

[Xamarin Forms] Custom bottom bordered entry (iOS & Android)

By
Image
Custom entry with renderers For my Xamarin Forms project I needed to render an 'Entry' control with a bottom border of a specific color. There are several possibilities but I will show you mine. For that, I used renderers. iOS one is particularly not trivial. The wished result look like that: iOS Renderer [assembly: ExportRenderer(typeof(ExtDatePicker), typeof(ExtDatePickerRenderer))] namespace MyCompany.iOS.Renderers { public class ExtDatePickerRenderer : DatePickerRenderer { protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e) { base.OnElementChanged(e); // Need to connect to Sizechanged event because first render time, Entry has no size (-1). if (e.NewElement != null) e.NewElement.SizeChanged += (obj, args) => { var xamEl = obj as DatePicker; if (xamEl == null) ret
Read more »

Xamarin.Forms device unique ID...

By
As in a lot of applications, you will probably need to get a unique identifier to identify a unique user . And it becomes a little more complicated when you have to deal with different platforms like Android, iOS and Windows Phone... Here is a simple solution that you can implement in Xamarin Forms that I found on this blog: http://codeworks.it/blog/?p=260 First define a service that you will use in your Xamarin Forms Application: // Your service interface definition public interface IDevice { string GetIdentifier(); } // How you get your service in your app IDevice device = DependencyService.Get (); string deviceIdentifier = device.GetIdentifier(); And here are the implementations for Android / Windows Phone and the most complicated, iOS platform: // WINDOWS PHONE [assembly: Xamarin.Forms.Dependency(typeof(WinPhoneDevice))] namespace XFUniqueIdentifier.WinPhone { public class WinPhoneDevice : IDevice { public string GetIdentifier() { byte[] myDeviceId = (
Read more »