How to hide Android tabs using Xamarin Forms custom renderer?

10
votes

In Xamarin Forms, I need to write a custom TabbedPageRenderer to hide the Android tabbar. However, I don't know how to do this.

[assembly: ExportRenderer(typeof(CTabbedPage), typeof(CTabbedPageRenderer))]
namespace App15.Droid
{
    public class CTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                (this.Context as Activity).ActionBar.NavigationMode = ActionBarNavigationMode.Standard;
            }
        }
    }
}

This code throws an exception because ActionBar is set to null. I'm using AppCompat 23.3.0 and XF 2.3.2.118-pre1.

EDIT: I'm thinking the reason ActionBar is null is Toolbar has replaced it, but I still don't know how to hide tabs. Also, I'm not interested in pushing pages modally.

I also tried adding android:visibility="gone" to Tabbar.axml. This successfully hides the tabbar but the tabbar still occupies space.

2
androidxamarintabsxamarin.androidxamarin.forms
Why do you use a tabbed layout if you don't want the tabs? – Rohit Vipin Mathews
I don't like Android's tabs being at the top. I like the iOS approach, so I was hoping to hide the existing tab bar and use a Grid instead. – Mark13426
just an advice: Android users always except to find the tabs above (just like WhatsApp) if you are going to hide the tabs , then maybe you should use Carousel View instead in case of android. – Ahmad ElMadi
In XF, Carousel View is quite buggy at the moment. I know there is bottom navigation bar in Material, but it's not an official Android control yet. I found one XF port, but it's very buggy. – Mark13426
Try use negative margin for your tabbed layout – Artem Zelinskiy

2 Answers

1
votes

This is a known bug in Xamarin: android:visibility="gone" in Tabbar.axml does not reclaim space (Status: CONFIRMED).

As soon as it's fixed, using above approach seems to be a way to go.

0
votes

Here is the perfect solution:

  1. Add android:visibility="gone" to Rescouces > layout > Tabbar.axml

eg:

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:tabIndicatorColor="@android:color/white" app:tabGravity="fill" app:tabMode="fixed" android:visibility="gone" />

  1. MainActivity.cs

Comment line ToolbarResource = Resource.Layout.Toolbar;

eg:

namespace BottomTab.Droid
{
    [Activity(Label = "BottomTab.Droid", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            //ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);

            LoadApplication(new App());
        }
    }
}
  1. Add NavigationPage.SetHasNavigationBar(this, false); to each Pages in TabbedPage.

eg:

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);
    }

    private void OnGoToProfile(object sender, EventArgs e)
    {
        Navigation.PushAsync(new ProfilePage());
    }
}