Hide bottom tab bar in tabbed page in Android with Xamarin.Forms

Question

I created a tabbed page and set the navigation bar to the bottom. Now I need to hide the Navigation Bar on a specific page. For iOS I used this Renderer: here, but I couldn't found a similar solution for Android. I tried it with this:

public TabbedPageRendererDroid(Context context) : base(context)
        {

        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == "IsHidden")
            {
                TabLayout TabsLayout = null;
                for (int i = 0; i < ChildCount; ++i)
                {
                    Android.Views.View view = (Android.Views.View)GetChildAt(i);
                    if (view is TabLayout)
                        TabsLayout = (TabLayout)view;
                }
                if ((Element as CustomTabbedPage).IsHidden)
                {
                    TabsLayout.Visibility = ViewStates.Invisible;
                }
                else
                {
                    TabsLayout.Visibility = ViewStates.Visible;
                }
            }
        }

This does only work with a normal navigation bar on top, but not with a bottom navigation bar and the app crashes with this Error: System.NullReferenceException.

Is there any solution for Android, thanks in advance.

score 2 · Answer 1 · answered Jun 13 '20 at 02:39

If you want to hide it in custom renderer you can use following code to hide the bottom navigation bar,

    public class ExtendedTabbedPageRenderer: TabbedPageRenderer
    {
        public ExtendedTabbedPageRenderer(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)
                            {
                                ((BottomNavigationView)childRelativeLayoutView).Visibility = ViewStates.Gone;
                            }
                        }
                    }
                }
            }
        }

BTW, if you display some pages that need to hide the BottomNavigationView by using Navigation. You do not need to use above code. just use await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));, this BottomNavigationView will be hided like this GIF.

Thanks for this solution but if I remove the Navigation bar with the Renderer, there is still a white box. Can I have the source code for the GIF? I don't get it. — WorldOfBasti, Jun 13 '20 at 17:02
I found a solution, how I can remove the white box. I will post it now. Your contribution helped me a lot. Thanks! — WorldOfBasti, Jun 13 '20 at 17:49

score 1 · Accepted Answer · answered Jun 13 '20 at 17:57

The contribution of @Leon Lu - MSFT helped me to find a solution. Here is the Android Renderer which works with this.

using System;
using System.ComponentModel;
using Android.Content;
using Android.Support.Design.Widget;
using Android.Views;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(TabbedPageRendererDroid))]
namespace myApp.Droid.Platform
{
    [Obsolete]
    public class TabbedPageRendererDroid : TabbedPageRenderer
    {
        private int TabBarHeight;

        public TabbedPageRendererDroid(Context context) : base(context) { }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            ShowOrHideBottomNavBar((Element as CustomTabbedPage).IsHidden);
        }

        private void ShowOrHideBottomNavBar(bool hide)
        {
            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)
                        {
                            if (((BottomNavigationView)childRelativeLayoutView).LayoutParameters.Height != 0) TabBarHeight = ((BottomNavigationView)childRelativeLayoutView).LayoutParameters.Height;

                            var parameters = ((BottomNavigationView)childRelativeLayoutView).LayoutParameters;
                            parameters.Height = hide ? 0 : TabBarHeight;

                            ((BottomNavigationView)childRelativeLayoutView).LayoutParameters = parameters;
                        }
                    }
                }
            }
        }
    }
}

Hide bottom tab bar in tabbed page in Android with Xamarin.Forms

2 Answers2