Xamarin Forms – iOS floating tabbar

Sometimes the design of our apps requires us to create custom elements inside of Xamarin Forms.
One thing I wanted to try out, was using a floating tabbar instead of a bottom fixed one.

The end result should be this:

Let me show you how you can achieve this in Xamarin Forms targeting iOS.

We actually don’t want to create our own page panel switcher or view host, rather, we would love to reuse the current TabbedPage that is provided by Xamarin Forms. So if we want to alter the one given by Xamarin, we need to create a Custom Renderer for it.
In this custom renderer we will be hide the default TabBar that is provided by iOS and instead we will load a Xamarin Forms ContentView and place it inside the UIView that is currently loaded; placing it somewhere on the bottom of the page.

Meaning we need to convert the ContentView to a iOS native control! This is possible all thanks to Michael Ridland his code shown here https://michaelridland.com/xamarin/creating-native-view-xamarin-forms-viewpage/

The end result Custom Renderer looks like this:

Now that our view is visible and the default tabbar is hidden, we only need to trigger the actual tab switching.
This is done inside our ContentView!
Inside of the new TabBar view, we have defined 3 buttons. Each button will trigger a page switch, doing this through use of the Xamarin Forms Tabbed Page. We just switch the CurrentPage property of the TabbedPage and this will trigger the normal tab switching.

That is basically it!
As you can see the overlay tabbar is just XAML, so you can do whatever you want in it… of you would like to animate the selection or use images, you can just change it.

The end effect is like so:

As always the code can be found on GitHub here…