Xamarin Forms Shell how to customize tab with custom renderers

Question

I'd like to achieve this design (highlight the selected tab with a gradient):

I've been trying to achieve this on android at first using ShellTabLayoutAppearanceTracker and a custom ShellRenderer but I can't even change the background color of any tab in the tablayout.

Also even though I have 4 tabs in my tab bar, tabLayout.TabCount only returns 1. Clearly, there's something I don't understand in all this.

How would you go about it? Bonus points for an iOS solution as well.

Here's a my code so far:

[assembly: ExportRenderer(typeof(***.App.AppShell), typeof(***.App.Droid.CustomShellRenderer))]
namespace ***.App.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context) {}

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new CustomShellTabLayoutAppearanceTracker(this);
        }
    }

    public class CustomShellTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public CustomShellTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext) { }

        public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
        {
            base.SetAppearance(tabLayout, appearance);

            for (var i = 0; i < tabLayout.TabCount; i++)
            {
                var tab = tabLayout.GetTabAt(i);
                if (tab.IsSelected)
                {
                    tab.View.Background = new GradientDrawable(/* ... */);
                }
                else
                {
                    tab.View.SetBackgroundColor(appearance.BackgroundColor.ToAndroid());
                }
            }
        }
    }
}

Answer 1

In your custom ShellRenderer try overriding the CreateBottomNavViewAppearanceTracker method i.e.

    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new BottomNavView(this, shellItem);
    }  

And in the custom BottomNavView you can then do like:

public class BottomNavView : ShellBottomNavViewAppearanceTracker
{
    public BottomNavView(IShellContext context, ShellItem shellItem) : base(context, shellItem) { }

    public override void SetAppearance(Google.Android.Material.BottomNavigation.BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView, appearance);

        BottomNavigationMenuView bottomNavigationView = bottomView.GetChildAt(0) as BottomNavigationMenuView;

        var firstItem = bottomNavigationView.GetChildAt(0);
        firstItem.Background = new GradientDrawable(GradientDrawable.Orientation.TopBottom, new int[] { Color.Red.ToAndroid(), Color.White.ToAndroid(), Color.Blue.ToAndroid() });
    }
}

And with that you can draw your gradients i.e. in this case: