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

  • Question

  • User395076 posted

    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.

    Wednesday, July 29, 2020 11:07 AM

Answers

  • User382871 posted

    @Ruvi1996 said: @YelinZh It's TabbedPage not Shell. I tried this android:minHeight="300dp" but It doesn't work. This command works for the normal TabbedPage(tabbar is on the top side), but not for the bottom tabbar. Try to create a custom renderer to get the 'tabbar' in native Android to set the height.

    Check the code: ``` [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace App19F_8.Droid { public class CustomTabbedPageRenderer : TabbedPageRenderer { public CustomTabbedPageRenderer(Context context) : base(context) {

        }
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
    
            if (e.OldElement == null && e.NewElement != null)
            {
                for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
                {
                    var childView = this.ViewGroup.GetChildAt(i);
                    if (childView is ViewGroup viewGroup)
                    {
                        for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
                        {
                            var childRelativeLayoutView = viewGroup.GetChildAt(j);
                            if (childRelativeLayoutView is BottomNavigationView)
                            {
                                var layout = ((BottomNavigationView)childRelativeLayoutView).LayoutParameters;
                                layout.Height = 300;
                            }
                        }
                    }
                }
            }
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, July 30, 2020 7:55 AM
  • User382871 posted

    To achieve this function in the renderer class, try to override the ViewDidLayoutSubviews method instead of the ViewWillLayoutSubviews method. ``` [assembly: Xamarin.Forms.ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace App19F_8.iOS { public class CustomTabbedPageRenderer : TabbedRenderer { public override void ViewDidLayoutSubviews() { base.ViewDidLayoutSubviews();

            var newHeight = TabBar.Frame.Height + 150;
            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;
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, July 31, 2020 8:15 AM

All replies

  • User382871 posted

    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.

    Wednesday, July 29, 2020 1:07 PM
  • User395076 posted

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

    Wednesday, July 29, 2020 1:11 PM
  • User382871 posted

    @Ruvi1996 said: @YelinZh It's TabbedPage not Shell. I tried this android:minHeight="300dp" but It doesn't work. This command works for the normal TabbedPage(tabbar is on the top side), but not for the bottom tabbar. Try to create a custom renderer to get the 'tabbar' in native Android to set the height.

    Check the code: ``` [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace App19F_8.Droid { public class CustomTabbedPageRenderer : TabbedPageRenderer { public CustomTabbedPageRenderer(Context context) : base(context) {

        }
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
    
            if (e.OldElement == null && e.NewElement != null)
            {
                for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
                {
                    var childView = this.ViewGroup.GetChildAt(i);
                    if (childView is ViewGroup viewGroup)
                    {
                        for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
                        {
                            var childRelativeLayoutView = viewGroup.GetChildAt(j);
                            if (childRelativeLayoutView is BottomNavigationView)
                            {
                                var layout = ((BottomNavigationView)childRelativeLayoutView).LayoutParameters;
                                layout.Height = 300;
                            }
                        }
                    }
                }
            }
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, July 30, 2020 7:55 AM
  • User395076 posted

    @YelinZh This worked great! Thank you very much

    Thursday, July 30, 2020 3:19 PM
  • User395076 posted

    @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; } } }

    Thursday, July 30, 2020 3:27 PM
  • User382871 posted

    To achieve this function in the renderer class, try to override the ViewDidLayoutSubviews method instead of the ViewWillLayoutSubviews method. ``` [assembly: Xamarin.Forms.ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace App19F_8.iOS { public class CustomTabbedPageRenderer : TabbedRenderer { public override void ViewDidLayoutSubviews() { base.ViewDidLayoutSubviews();

            var newHeight = TabBar.Frame.Height + 150;
            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;
        }
    }
    

    } ```

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, July 31, 2020 8:15 AM