question

yurno-7583 avatar image
0 Votes"
yurno-7583 asked RobCaplan edited

How to hidden all Tabs in TabbedPage?

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.







dotnet-xamarin
image.png (14.9 KiB)
image.png (13.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

yurno-7583 avatar image
0 Votes"
yurno-7583 answered yurno-7583 published

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT edited

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;
        }
    }
}
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.