Hello,
Welcome to Microsoft Q&A!
Which platform do you develop on ?
If on iOS , we can customize the tabbar with Custom renderer , check my post .
I made a little modification to meet your requirement .
iOS Custom Renderer
[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabRenderer))]
namespace FormsA.iOS
{
public class MyTabRenderer : TabbedRenderer
{
public override void ViewDidLoad()
{
base.ViewDidLoad();
for(int i = 0; i < 3; i++)
{
UIButton btn = new UIButton(frame: new CoreGraphics.CGRect(0, 0, i==1?80:60, i == 1 ? 80 : 60));
btn.Tag = i;
this.View.Add(btn);
//customize button
btn.ClipsToBounds = true;
btn.Layer.CornerRadius = btn.Frame.Width/2;
btn.BackgroundColor = UIColor.Red;
btn.AdjustsImageWhenHighlighted = false;
//move button up
CGPoint center = this.TabBar.Center;
center.X = center.X + (i-1) * 100;
center.Y = center.Y - 20;
btn.Center = center;
//button click event
btn.TouchUpInside += (sender, ex) =>
{
//use mssage center to inkove method in Forms project
nint tag = ((UIButton)sender).Tag;
MessagingCenter.Send<object, int>(this,"Hi", (int)tag);
};
}
//you need to create a curving background image and set here.
this.TabBar.BackgroundImage = UIImage.FromBundle("yourimage.png");
//disable original behavior
this.ShouldSelectViewController += (UITabBarController tabBarController, UIViewController viewController) =>
{
return false;
};
}
}
}
Forms
//xaml
<ContentPage Title="" BackgroundColor="Green"/>
<ContentPage Title="" BackgroundColor="Red"/>
<ContentPage Title="" BackgroundColor="Blue"/>
//code behind
public TabbedPage1()
{
InitializeComponent();
//this.BarBackgroundColor = Color.Yellow;
//this.BarTextColor = Color.Red;
MessagingCenter.Subscribe<object, int>(this, "Hi", (sender,index) =>
{
this.CurrentPage = this.Children[index];
});
}
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.