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());
                }
            }
        }
    }
}

score 4 · Accepted Answer · edited Jan 07 '21 at 01:50

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:

I ended up using a custom tabs view build on top of Xam forms, but clearly this is the right answer. Thanks a bunch! — Simon Corcos, Jan 07 '21 at 21:02

score 2 · Answer 2 · answered Oct 27 '20 at 07:39

I just find a way to change Xamarin.Shell select Tab backgroud in ios, like this:

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
 namespace App434.iOS
 {
public class MyShellRenderer : ShellRenderer
{
    protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
    {
        var renderer = base.CreateShellSectionRenderer(shellSection);
        if (renderer != null)
        {
            (renderer as ShellSectionRenderer).NavigationBar.SetBackgroundImage(UIImage.FromFile("monkey.png"), UIBarMetrics.Default);
        }
        return renderer;
    }




    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new MyOtherTabBarAppearanceTracker();



    }
}



public class MyOtherTabBarAppearanceTracker : ShellTabBarAppearanceTracker, IShellTabBarAppearanceTracker
{
    void IShellTabBarAppearanceTracker.SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
        base.SetAppearance(controller, appearance);



        UITabBar tabBar = controller.TabBar;




            CGSize size = new CGSize(tabBar.Frame.Width / 2, tabBar.Frame.Height);



            //Background Color
            UITabBar.Appearance.SelectionIndicatorImage = imageWithColor(size);
            



    }



    public UIImage imageWithColor(CGSize size)
    {
        CGRect rect = new CGRect(0, 0, size.Width, size.Height);
        UIGraphics.BeginImageContext(size);



        using (CGContext context = UIGraphics.GetCurrentContext())
        {
            context.SetFillColor(UIColor.Red.CGColor);
            context.FillRect(rect);
        }



        UIImage image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();



        return image;
    }
}
}

You can take a look the following thread:

Background color of selected TabBarItem in Xamarin on iOS

But I don't find the way to change selected tab background in Android, I will update it if I find this.

Xamarin Forms Shell how to customize tab with custom renderers

2 Answers2