Keep active item label font size the same as other labels in BottomNavigationView in Xamarin Forms

Question

The active item label in the BottomNavigationView gets hyphenated on Android. This happens because the font size of active label is increased. I want it to behave similar to iOS navbar where the active item label size doesn't differ from other labels. I followed this tutorial to get to this point. Image of the problem

I found solution for Android native How to remove hypheanted labels, but I don't know how to use it with Xamarin Forms.

I have tried setting ItemTextAppearanceActive:

public class NoShiftEffect : PlatformEffect {
    protected override void OnAttached() {
        if (!(Container.GetChildAt(0) is ViewGroup layout)) {
            return;
        }

        if (!(layout.GetChildAt(1) is BottomNavigationView bottomNavigationView)) {
            return;
        }

        bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityLabeled;

        // How to set this?
        bottomNavigationView.ItemTextAppearanceActive = 5;
    }

    protected override void OnDetached() {
    }
}

Any ideas where to set that?

score 0 · Accepted Answer · answered Sep 25 '19 at 09:10

Try this in tabpage renderer:

public class CustomTabbedPageRenderer : TabbedPageRenderer
{
    public CustomTabbedPageRenderer(Context context) : base(context)
    {

    }
    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);
        if (Element != null)
        {
            var bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;
            var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;
            for (var i = 0; i < Element.Children.Count; i++)
            {
                var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
                var itemTitle = item.GetChildAt(1);
                var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
                var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));                    
                smallTextView.TextSize = 5f;
                largeTextView.TextSize = 5f;
                smallTextView.Ellipsize = Android.Text.TextUtils.TruncateAt.End;
                largeTextView.Ellipsize = Android.Text.TextUtils.TruncateAt.End;
            }
        }
    }
}

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Solution 1:

You can set the font of label in tabbed by using Custom Renderer

public class StyledTabbedPageRenderer : TabbedPageRenderer
{
    private TabLayout tabLayout = null;

    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);

        this.tabLayout = (TabLayout)this.GetChildAt(1);


        changeTabsFont();
    }


    private void changeTabsFont()
    {
        //Typeface font = 
        Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "fonts/" + Constants.FontStyle);
        ViewGroup vg = (ViewGroup)tabLayout.GetChildAt(0);
        int tabsCount = vg.ChildCount;
        for (int j = 0; j < tabsCount; j++)
        {
            ViewGroup vgTab = (ViewGroup)vg.GetChildAt(j);
            int tabChildsCount = vgTab.ChildCount;
            for (int i = 0; i < tabChildsCount; i++)
            {
                Android.Views.View tabViewChild = vgTab.GetChildAt(i);
                if (tabViewChild is TextView)
                {
                    //((TextView)tabViewChild).Typeface = font;
                    ((TextView)tabViewChild).TextSize = 6;  // set font size here !!!
                }
            }
        }
    }
}

Solution 2:

You can install the package Naxam.BottomTabbedPage from nuget.

For more details you can check here .

Keep active item label font size the same as other labels in BottomNavigationView in Xamarin Forms

2 Answers2

Solution 1:

Solution 2: