Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to change the android bottom tabbar height in Xamarin.Forms

Ruvi1996Ruvi1996 Member ✭✭

I spent hours searching a way to increase the bottom tabbar height in android in my Xamarin.Forms project. I did not find any Custom Renderer for that instead I found this

<android.support.design.widget.TabLayout 
    ...
    android:minHeight="300dp"
    />

but it also didn't work for me. Can someone has a solution for this please.

Best Answers

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    How to change the android bottom tabbar height in Xamarin.Forms

    Under what circumstances do you want to change the height of the tab bar? Using Shell or TabbedPage.
    1.For TabbedPage, we could specify a value to the android:minHeight in the Tabbar.xml to set the barbar height.

    <android.support.design.widget.TabLayout 
        ...
        android:minHeight="300dp"
        />
    

    2.For Shell, try to use the renderer class to customize the ShellItemRenderer. Create a custom layout and set as the tabbar in the OnCreateView method.

    [assembly: ExportRenderer(typeof(CustomShell), typeof(CustomShellRenderer))]
    namespace App19F_1
    {
        public class CustomShellRenderer : ShellRenderer
        {
            public CustomShellRenderer(Context context) : base(context)
            {
            }
    
            protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
            {
                return new CustomShellItemRenderer(this);
            }
        }
    
        public class CustomShellItemRenderer : ShellItemRenderer
        {
            public CustomShellItemRenderer(IShellContext shellContext) : base(shellContext)
            {
            }
    
            public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
            {
                var _outerLayout = inflater.Inflate(Resource.Layout.BottomTabLayout, null);
    
                return outerlayout;
            }
        }
    }
    

    You could google with the keyword with Xamarin.Forms Shell: Customizing the TabBar (Android) to check the related tutorial.

  • Ruvi1996Ruvi1996 Member ✭✭

    @YelinZh It's TabbedPage not Shell. I tried this android:minHeight="300dp" but It doesn't work.

  • Ruvi1996Ruvi1996 Member ✭✭

    @YelinZh This worked great! Thank you very much

  • Ruvi1996Ruvi1996 Member ✭✭

    @YelinZh This is the CustomRenderer I'm using to achieve the same functionality on iOS. But this also seems to be not working. Can you see what I am doing wrong here? If yes, please post the correct one on this too please. Thanks

    [assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.TabbedPage), typeof(CustomTabbedPageRenderer))]
    namespace dewebey.iOS.CustomRenderers
    {
        public class CustomTabbedPageRenderer : TabbedRenderer
        {
            public override void ViewWillLayoutSubviews()
            {
                base.ViewWillLayoutSubviews();
                var newHeight = TabBar.Frame.Height + 200;
                CoreGraphics.CGRect tabFrame = TabBar.Frame; //self.TabBar is IBOutlet of your TabBar
                tabFrame.Height = newHeight;
                tabFrame.Y = View.Frame.Size.Height - newHeight;
                TabBar.Frame = tabFrame;
            }
        }
    }
    
Sign In or Register to comment.