How to add a top border to Xamarin Forms App Shell Tabbar

Question

Using the Xamarin Forms App Shell template, it's obvious how to change the background colour of the Tabbar, but I can't see a way to add a top border, or even a drop shadow, as is common in many tab bar styles.

Answer 1

Android:

You could use the CreateBottomNavViewAppearanceTracker to change something for the bottomview.

  [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace ShellDemo.Droid
{
class ShellCustomRenderer : ShellRenderer
{

    public ShellCustomRenderer(Context context) : base(context)
    {
    }

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

public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(BottomNavigationView bottomView)
    {

    }

    public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        //put your code here
       
    }
}
}

iOS:

You could use the CreateTabBarAppearanceTracker to change the tabbar.

  [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace ShellDemo.iOS
{
public class ShellCustomRenderer : ShellRenderer
{
    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new TabBarAppearance();
    }

}

public class TabBarAppearance : IShellTabBarAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(UITabBarController controller)
    {
        
    }

    public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
    }

    public void UpdateLayout(UITabBarController controller)
    {
    }
}
}