Hiding Bottom navigation view in android Tabbed page rendering Issue, Viewpages not full covered once bottom navigation hides

[ravitrimurthulu]

Here, The TabbedpageRendering in the Android for bottom navigation view , you are fixed the "FormsViewPager" is always top on the Bottom navigation bar.

https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs Line no: 237 to 246 Method Name: protected override void OnElementChanged(ElementChangedEventArgs e)

var viewPagerParams = new AWidget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
                        viewPagerParams.AddRule(AWidget.LayoutRules.Above, _bottomNavigationView.Id);

                        FormsViewPager pager = _viewPager = CreateFormsViewPager(activity, e.NewElement);

                        pager.Id = Platform.GenerateViewId();
                        pager.AddOnPageChangeListener(this);

                        _relativeLayout.AddView(pager, viewPagerParams);
                        _relativeLayout.AddView(_bottomNavigationView, bottomNavigationViewLayoutParams);

Line No:239to260 method Name:protected override void OnLayout(bool changed, int l, int t, int r, int b) And onlayout also you are fixed the viewpages top on bottum navigation, you want to hide the bottum naviagation , the viewpager not fully fitted the screen, it was shows the gap .

        if (IsBottomTabPlacement)
        {
            if (width <= 0 || height <= 0)
                return;

            _relativeLayout.Measure(
                MeasureSpec.MakeMeasureSpec(width, MeasureSpecMode.Exactly),
                MeasureSpec.MakeMeasureSpec(height, MeasureSpecMode.Exactly));

            pager.Measure(MeasureSpecFactory.MakeMeasureSpec(width, MeasureSpecMode.AtMost), MeasureSpecFactory.MakeMeasureSpec(height, MeasureSpecMode.AtMost));

            if (width > 0 && height > 0)
            {
                PageController.ContainerArea = new Rectangle(0, 0, context.FromPixels(width), context.FromPixels(height - _bottomNavigationView.MeasuredHeight));

                SetNavigationRendererPadding(0, _bottomNavigationView.MeasuredHeight);

                pager.Layout(0, 0, width, b);
                // We need to measure again to ensure that the tabs show up
                _relativeLayout.Measure(
                    MeasureSpec.MakeMeasureSpec(width, MeasureSpecMode.Exactly),
                    MeasureSpec.MakeMeasureSpec(height, MeasureSpecMode.Exactly));
                _relativeLayout.Layout(0, 0, _relativeLayout.MeasuredWidth, _relativeLayout.MeasuredHeight);
            }
        }

`

[StephaneDelcroix]

@ravitrimurthulu is this a duplicate of #4193 ?

[StephaneDelcroix]

also, could you please attach a reproduction project showcasing the problem ? Thanks

[ravitrimurthulu]

i want to hide the bottomnavigationview sometimes, i am hiding bottumnaviagtion but the top viewpager not occupying the tabbar place , it was simple empty place was displayed. if you want a clear description, I will share my sample code.

your code was putted not correctly in onlayout method, you are provided every time top by the size of bottomnaviagtion view, it was wrong . you set if the bottumnaviagtion is hidden or not then you can set that.

[samhouts]

@ravitrimurthulu Would you be interested in submitting a PR with the fixes you recommend? Thanks!

[StephaneDelcroix]

please reopen as soon as you have a reproduction project you can attach. thanks

[Depechie]

@StephaneDelcroix I'm also trying to 'hide' the bottom tabs, also noticing the empty space at the bottom of the page afterwards. This works on iOS.

Reproducible project : https://github.com/AppCreativity/BirdAtlas/blob/master/frontend/BirdAtlas.Android/Renderers/CustomTabbedPageRenderer.cs#L65

[wangdeshui]

How about the progress? I would like to hide tabs in many pages, but the Android occupies the bottom space

[eddie010]

I'm currently facing the same issue. Even setting the Visibility to ViewStates.Gone will still show the gray area of where the tabbar was. Currently using Xamarin.Forms v3.6.0.344457

[DanGuevara]

@Depechie , @wangdeshui , @eddie010 As a temprory workaround you can set height of BottomNavigationView to 0 instead of changing it Visibility. That solved a problem fo me.

[wattsdeveloper]

@DanGuevara That's sound good, how are you doing that? I have the reference to BottomNavigationView, but Layout(0,0,0,0) doesn't seems to do the trick. Hope you will share your solution

[DanGuevara]

@wattsdeveloper var parameters = bottomNavigationView.LayoutParameters; parameters.Height = 0; bottomNavigationView.LayoutParameters = parameters; Thats how to do this trick.

[wattsdeveloper]

@DanGuevara Thx mate, you saved my day :)

[eddie010]

Does anyone have another workaround for this?

@DanGuevara your solution doesn't seem to work for me. It hides the tabbar but still leaves the blank space unfortunately…

Edit: Pushing the new page as Modal does seem to do the trick! No more tabbar :)

[HeikkiDev]

Workaround to prevent blank space when you hide the bottom tab bar on Android

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

            if (e.PropertyName != AdvancedTabbedPage.IsTabBarVisibleProperty.PropertyName)
            {
                return;
            }

            if (!(Element is AdvancedTabbedPage advancedTabbedPage))
            {
                return;
            }

            if (!(GetChildAt(0) is RelativeLayout relativeLayoutContainer))
            {
                return;
            }

            if (!(relativeLayoutContainer.GetChildAt(0) is ViewPager viewPager))
            {
                return;
            }

            if (!(relativeLayoutContainer.GetChildAt(1) is BottomNavigationView bottomNavigationView))
            {
                return;
            }

            if (advancedTabbedPage.IsTabBarVisible)
            {
                var bottomNavParams = new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.WrapContent);
                bottomNavParams.AddRule(Android.Widget.LayoutRules.AlignParentBottom);
                bottomNavigationView.LayoutParameters = bottomNavParams;

                var viewPagerParams = new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
                viewPager.LayoutParameters = viewPagerParams;
            }
            else
            {
                var bottomNavParams = new Android.Widget.RelativeLayout.LayoutParams(0, 0);
                bottomNavigationView.LayoutParameters = bottomNavParams;

                var viewPagerParams = new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
                viewPager.LayoutParameters = viewPagerParams;
            }
        }