Xamarin Forms Shell TabBar Rounded Corner - xamarin.forms

Question

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.

Answer 1

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 :
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)
{
}
}