How to hidden all Tabs in TabbedPage?

YURNO 116 Reputation points
2021-06-08T07:11:45.42+00:00

Now I want to hidden all Tabs in TabbedPage on Android.
It should hidden UI only and still working.
I try research on google already, but it cannot solve my issues.
If have someone know how to hide that, please tell me how to do.

Application in current
103313-image.png

I want like this
103264-image.png

Code on iOS in CustomTabbedPageRenderer.cs

public override void ViewDidLayoutSubviews()  
{  
     base.ViewDidLayoutSubviews();  
  
     if (View == null) return;  
     CGRect rect = View.Frame;  
     TabBar.Hidden = true;  
     ((Page)Element).ContainerArea = new Rectangle(0, 0, rect.Width, rect.Height);  
}  

Thanks for the answer in advance.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,362 questions
0 comments No comments
{count} votes

Accepted answer
  1. YURNO 116 Reputation points
    2021-06-09T02:14:11.973+00:00

    Now I found how to hidden that already.
    If we set actionBar.NavigationMode equal ActionBarNavigationMode.Standard, it will hidden all tabs.
    I hope it can solve issues for others as well.

    Code - TabbedPageRenderer for Android

    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(TabbedPageRenderer))]
    namespace myapp.renderer.android
    {
        public class TabbedPageRenderer : TabbedRenderer
        {
            public TabbedPageRenderer(Context context) : base(context) { }
    
            private Activity _activity;
            protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
            {
                base.OnElementChanged(e);
                _activity = this.Context as Activity;
            }
    
            protected override void OnLayout(bool changed, int l, int t, int r, int b)
            {
                ActionBar actionBar = _activity.ActionBar;
                if (actionBar != null) actionBar.NavigationMode = ActionBarNavigationMode.Standard;
                base.OnLayout(changed, l, t, r, b);
            }
        }
    }
    
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. JarvanZhang 23,961 Reputation points
    2021-06-09T03:27:57.12+00:00

    Hi, yurno.If you want to hide the tab and keep the navigation function, you could just set the backgroundColor and textColor of the bar to Transparent. Such as:

    <TabbedPage ...
            BarBackgroundColor="Transparent"
            BarTextColor="Transparent" >
        <TabbedPage.Children>
            <!--the child pages-->
        </TabbedPage.Children>
    </local:CustomTabbedPage>
    

    If you want to remove the tab bar, try to get the native layout in the custom renderer and hide it.

    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        private CustomTabbedPage tabbedPage;
        private TabLayout layout;
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }
    
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
    
            if (e.PropertyName == "IsHidden")
            {
                if (tabbedPage.IsHidden)
                {
                    layout.Visibility = ViewStates.Gone;
                }
                else
                {
                    layout.Visibility = ViewStates.Visible;
                }
            }
        }
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TabbedPage> e)
        {
            base.OnElementChanged(e);
    
            if (e.NewElement != null)
            {
                tabbedPage = e.NewElement as CustomTabbedPage;
                layout = GetChildAt(1) as TabLayout;
    
                layout.Visibility = tabbedPage.IsHidden ? ViewStates.Gone : ViewStates.Visible;
            }
        }
    }
    
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.