CODEWITHSUNDEEP
androidxamarintabsxamarin.androidxamarin.forms
Mark13426
Mark13426

Reputation: 2639

How to hide Android tabs using Xamarin Forms custom renderer?

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.

Upvotes: 10

Views: 2401

Answers (2)

Hiran
Hiran

Reputation: 257

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

Upvotes: 0

serv-inc
serv-inc

Reputation: 38157

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.

Upvotes: 1

Related Questions