Xamarin Forms navigation bar with rounded central button - xamarin.forms

Question

Is it possible to reproduce a bottom navigation bar like this in Xamarin Forms ?
Not with a Grid for example, but with a real navigation bar so this content stay static and navigation occurs in navigation area.

Answer 1

You can use custom renderer to achieve this in iOS:
In Xamarin.forms, create a TabbePage with 5 pages there:
<ContentPage Title="Tab 1" />
<ContentPage Title="Tab 2" />
<ContentPage Title="" />
<ContentPage Title="Tab 3" />
<ContentPage Title="Tab 4" />
In the TabbedRenderer, add the round button there:
[assembly : ExportRenderer(typeof(TabbedPage),typeof(MyRenderer))]
namespace App325.iOS
{
public class MyRenderer : TabbedRenderer
{
public override void ViewDidLoad()
{
base.ViewDidLoad();
UIButton btn = new UIButton(frame: new CoreGraphics.CGRect(0, 0, 60, 60));
this.View.Add(btn);
//customize button
btn.ClipsToBounds = true;
btn.Layer.CornerRadius = 30;
btn.BackgroundColor = UIColor.Red;
btn.AdjustsImageWhenHighlighted = false;
//move button up
CGPoint center = this.TabBar.Center;
center.Y = center.Y - 20;
btn.Center = center;
//button click event
btn.TouchUpInside += (sender, ex) =>
{
//use mssage center to inkove method in Forms project
};
//disable jump into third page
this.ShouldSelectViewController += (UITabBarController tabBarController, UIViewController viewController) =>
{
if (viewController == tabBarController.ViewControllers[2])
{
return false;
}
return true;
};
}
}
}