Xamarin.forms: [Enhancement][Shell] Icon only Shell Bottom Tab Bar.

[davidzhaotopedge]

Summary

Should provide a xaml attribute, e.g. DisplayTextOnly, in Shell/TabBar top and bottom. To either display button text or not. The height of Tab Bar should be changed accordingly.

Current behavior

We can set Tab text to empty, but no text in flyout menu, and height of bottom Tab bar not changed, some space below Icon

[Mephisztoe]

I vote for this. Also, when collapsed the user should be able to easily have the app show the tabs' titles again. UWP solves this by adding an ellipsis button (…). Visit this page to see how this works.

I believe the key here is _vertical space_. Especially when using the app the first time, the icons _might_ not be as self explanatory as a user need them to be. But after a while, the user does not need to have the icons' title to use up vertical space anymore...

[xamarindevelopervietnam]

++

[pfedotovsky]

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

[Amine-Smahi]

Is this fixed ?

[chelabitarik]

10 months later .... Fixed yet ?

[andre-motta]

Is there any prevision for this specific fix?

[pictos]

I think we can just verify if some tab has Title property, if it doesn't have we can set the LabelVisibilityMode property to LabelVisibilityUnlabeled. I did some tests here on Android and works fine. On iOS looks like we don´t need to do anything.