CODEWITHSUNDEEP
xamarin.forms
Junior Thurler
Junior Thurler

Reputation: 141

Xamarin Forms Shell TabBar Rounded Corner

I'd like to know if there's a renderer to allows me to use a rounded corner in the tabbar using Shell, like in the image above.

enter image description here

Upvotes: 2

Views: 1816

Answers (1)

Leo Zhu
Leo Zhu

Reputation: 15021

You could do it in your custom shellrenderer :

create the MyShellRenderer in your android project:

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace your namepace
{
   class MyShellRenderer:ShellRenderer
   {
       public MyShellRenderer(Context context) : base(context)
       {
       }

       protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
       {
          return new MyShellBottomNavViewAppearanceTracker();
       }
   }
}

define the MyShellBottomNavViewAppearanceTracker:

namespace ShellDemo.Droid
{
  class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
       public void Dispose()
       {
       }

       public void ResetAppearance(BottomNavigationView bottomView)
       {
       }

        public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
       
           bottomView.SetBackgroundResource(Resource.Drawable.bottombackground);
        }
     }
}

create the round corner drawable bottombackground.xml in your Resources/drawable:

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#f00" />
  <corners android:topLeftRadius="20dp"
     android:topRightRadius="20dp"
  />
</shape>

the effect :

enter image description here

Update for ios:

the similar to android

MyShellRenderer:ShellRenderer class

 [assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
 namespace your namepace
 {
   class MyShellRenderer:ShellRenderer
   {
      protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
      {
          return new MyShellTabBarAppearanceTrancker();
      }
   }
 }

MyShellTabBarAppearanceTrancker class:

class MyShellTabBarAppearanceTrancker : IShellTabBarAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(UITabBarController controller)
    {
      
    }

    public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
       
        UIBezierPath uIBezierPath = UIBezierPath.FromRoundedRect(controller.TabBar.Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(30, 30));
        CAShapeLayer cAShapeLayer = new CAShapeLayer();
        cAShapeLayer.Frame = controller.TabBar.Bounds;
        cAShapeLayer.Path = uIBezierPath.CGPath;
        controller.TabBar.Layer.Mask = cAShapeLayer;         
    }

    public void UpdateLayout(UITabBarController controller)
    {
        
    }
}

Upvotes: 5

Related Questions