Xamarin.forms: [Enhancement] Expose more customization properties for text on tabs

[Basti82b]

Steps to Reproduce

1. Load the Xaminals project
2. Add a word to the ShellContent.Title of Monkeys in AppShell.xaml
3. Run the app and select the Monkeys tab

Expected Behavior

Tab title is displayed completely.

Actual Behavior

Tab title is cropped.

Basic Information

Version with issue: Xamarin.Forms 4.2.0.815419
Platform Target Frameworks:
Android: 9.0

Screenshots

[PureWeen]

@Basti82b so I wouldn't call this a bug. The bold text makes it larger so it wraps. Ideally here we'd just have more apis you could use to change the font size so you can adjust the text to fit

In the mean time you could implement a custom ShellItemRenderer and change the font settings of the tabs

[Basti82b]

@PureWeen Thank you for the pointer. Where can I find "the font settings of the tabs" for Android? Is it right to override OnCreateView?

[Basti82b]

Here is my solution:

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    var outerlayout = base.OnCreateView(inflater, container, savedInstanceState);
    var bottomView = outerlayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);

    var bottomNavigationMenuView = (BottomNavigationMenuView)bottomView.GetChildAt(0);

    for (int i = 0; i < bottomNavigationMenuView.ChildCount; i++)
    {
        var childAt = bottomNavigationMenuView.GetChildAt(i);

        if (childAt is BottomNavigationItemView bottomNavigationItemView)
        {
            var textView = (TextView)bottomNavigationItemView.FindViewById(Resource.Id.largeLabel);
            textView?.SetAutoSizeTextTypeWithDefaults(AutoSizeTextType.Uniform); //SetTextSize(ComplexUnitType.Sp, 10);
        }
    }
    return outerlayout;
}

[pfedotovsky]

It seems that issue is tracked here: https://github.com/material-components/material-components-android/issues/139

And it seems to be fixed https://issuetracker.google.com/issues/115754572

You can upgrade to com.google.android.material:material:1.1.0-alpha05 this issue fixed.

But I don't know how to use the updated component in Xamarin.Forms app.

[amgravem]

You can control text size using James approach: https://montemagno.com/control-text-size-on-android-bottom-navigation/

[PureWeen]

@pfedotovsky you should be able to pull in Android X

https://devblogs.microsoft.com/xamarin/androidx-for-xamarin/

And then use the material packages from there

[pfedotovsky]

@PureWeen I've updated my app to use AndroidX. Could you please elaborate on Material packages I need to use?

[PureWeen]

You'll probably have to wait until we up our material dependency

https://github.com/xamarin/Xamarin.Forms/pull/9701

There are some style changes we have to address before we can merge that PR though

[pfedotovsky]

@PureWeen thank you for the prompt reply! I've subscribed to the PR.

My app currently uses Theme.AppCompat.Light.NoActionBar, will I need to update to the Material theme (https://docs.microsoft.com/en-us/xamarin/android/user-interface/material-theme)? I don't need to support Android versions below 5.0.

[PureWeen]

@pfedotovsky nope :-)

[PureWeen]

@pfedotovsky you could try installing this package to see if that works for you

https://www.nuget.org/packages/Xamarin.Google.Android.Material/1.1.0-rc3

[pfedotovsky]

@PureWeen works perfectly, thank you! Text is no longer cut off in bottom tab titles :)