Hide title of tabbedPage in Xamarin.Forms Shell

Question

I'm refactoring a project to the new navigation with shell that was released with Xamarin.Forms 4.0 and now I was migrating a tabbedPage that had an effect applied to hide the title of the children from the tabbedPage leaving the icons only visible, with Shell it is no longer necessary that the page inherits from TabbedPage if not that the own class of Shell allows you to implement the tabbedPage, masterPage ... the problem is that now I do not know how I can apply the effect I used previously since I can not refer to the tabbedPage.

Note: In this case I use Flyout since I need a design with a hamburger menu and also tabbedPage, that's why I do not use only the TabBar.

<FlyoutItem Route="home"
            Title="TEST"
            Icon="home_icon"
            FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Route="bottomtab1"
                  Title="TEST1"
                  Icon="target_icon"
                  ContentTemplate="{DataTemplate views:x}" />
    <ShellContent Route="bottomtab2"
                  Title="TEST2"
                  Icon="user_login"
                  ContentTemplate="{DataTemplate views:y}" />
</FlyoutItem>

TabbedPage Image

MasterPage Image

I added this request to Xamarin Forms github, because I needed it too... maybe you can upvote it: github.com/xamarin/Xamarin.Forms/issues/6788 — Depechie
Was already up on github it seems... github.com/xamarin/Xamarin.Forms/issues/6220 So I removed my request. — Depechie

Tecnopresley Tecnopresley · Accepted Answer · 2019-10-26T19:57:07

Thanks to the pfedotovsky user of GitHub I have found an alternative solution until the Xamarin team officially resolves this, in this article he explains it.

There's a workaround for Android with custom renderers. The key is to set

_bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityAuto; or _bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;

using Android.OS;
using Android.Support.Design.BottomNavigation;
using Android.Support.Design.Widget;
using Android.Views;
using Xamarin.Forms.Platform.Android;

namespace App.Droid
{
    public class AndroidShellItemRenderer : ShellItemRenderer
    {
        BottomNavigationView _bottomView;

        public AndroidShellItemRenderer(IShellContext shellContext) : base(shellContext)
        {
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var outerlayout = base.OnCreateView(inflater, container, savedInstanceState);

            _bottomView = outerlayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
            _bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityAuto;

            return outerlayout;
        }
    }
}

To use this renderer, you need to create custom ShellRenderer as well:

using System;
using Android.Content;
using Conference.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Shell), typeof(AndroidShellRenderer))]
namespace App.Droid
{
    public class AndroidShellRenderer : ShellRenderer
    {
        public AndroidShellRenderer(Context context)
            : base(context)
        {
        }

        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
        {
            return new AndroidShellItemRenderer(this);
        }
    }
}

Hide title of tabbedPage in Xamarin.Forms Shell

1 Answers