How to change Shell Tabbar height

Question

My Problem: I use Shell with bottom Tabbar and I simply want to change it height on Android and maybe on iOS.

My Search Results: I know that the Tabbar is an Android/iOS build in feature with solid specified height.

There seems to be a way to achieve that using a "Custom-Renderer". All projects I have found with this approach don't work with my visual studio (>100 Errors or simply does nothing).

I find it hard to believe that i need >100 rows of code to "only" adjust a height. Could someone provide a working solution to change the Shell Tabbar (bottom tabs) height ?

Edit

Answer 1

Unfourtounately you need to create a custom renderer on each platform project:

Android

MyShellRenderer class

[assembly: ExportRenderer(typeof(App.AppShell), typeof(App.Droid.MyShellRenderer))]

namespace App.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

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

MyBottomNavViewAppearanceTracker class

class MyBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
    {
        public MyBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
        {
        }
        public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            bottomView.LayoutParameters.Height = 400;
            base.SetAppearance(bottomView, appearance);
        }
    }

Edit:

iOS part credit goes to https://forums.xamarin.com/discussion/169894/how-to-change-shell-height-of-flyout-items-at-the-bottom-of-the-page

iOS

MyShellRenderer class

[assembly: ExportRenderer(typeof(App.AppShell), typeof(App.iOS.MyShellRenderer))]

namespace App.iOS
{
    public class MyShellRenderer : ShellRenderer
    {

        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new MyCreateTabBarAppearanceTracker();
        }
    }
}

CreateTabBarAppearanceTracker class

class CreateTabBarAppearanceTracker : ShellTabBarAppearanceTracker
    {
    
        public override void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            UITabBar tabBar = controller.TabBar;
            int tabBarHeight = 100;

            if (tabBar.Frame.Height != tabBarHeight)
            {
                tabBar.Frame = new CGRect(tabBar.Frame.X, tabBar.Frame.Y + (tabBar.Frame.Height - tabBarHeight), tabBar.Frame.Width, tabBarHeight); 
            }
        }
    }

Extras

You were probably missing some namespaces that would explains the abnormal big number of errors.

could not be found are you missing a using directive or an assembly reference

Usually people don't include namespaces (using statements) in answers because most of the time namespaces are obvious and are handled easily by visual studio intellisense.

Just put or hover the cursor on the red underlined statement and a small tooltip appears

Then click on "Show potential fix" or one of the keyboard shortcuts, select the appropriate fix (usually the first one of the suggested list), in this case intelisense will add the required namespace automatically.

Answer 2

Every Code example i have found has excluded the using directives. in my case i needed those following 3 which i wasnt able to find. Thanks to the answer of @Cfun the code above work with adding:

using Google.Android.Material.BottomNavigation;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;