Xamarin Forms - How to create such shape?

Question

I wanted to create such navigation at the bottom of the apps. What is the best way to do this? I tried the customer renderer but is too tedious.

Answer 1

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.