Xamarin Forms Android: TabbedPage Font Style

Question

how can I change the style of the tab title? The most important thing is, that the titles not cutted off like at the screenshot. So I have to change the size of the titles. I started creating a Custom Renderer for tabbedpage, but I don't know how to go on.

Xaml:
<custom:CustomTabbedPage...

Forms:
public class CustomTabbedPage : TabbedPage...

Forms.Droid
public class CustomTabbedPageRenderer : TabbedPageRenderer

The TabbedPage has NavigationPages with ContentPages.

If you need further information, let me know. Thank you.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
        x:Class="TabbedPageWithNavigationPage.MainPage">
<NavigationPage Title="Start" Icon="start.png">
    <x:Arguments>
        <local:StartPage />
    </x:Arguments>
</NavigationPage>
<NavigationPage Title="Symptom-Tagebuch" Icon="tagebuch.png">
    <x:Arguments>
        <local:TagebuchPage />
    </x:Arguments>
</NavigationPage>
...

Nobody? So all are happy with the cutted titles and nobody ever changed it. Can't believe this. ;) — Ralf, Dec 05 '16 at 20:56
Could you please show some code, how did you create each item for `TabbedPage`? I used its `ItemTemplate` to build the source collection of several `ContentPage`, and specify each item's title through the `Title` property of `ContentPage`, it works fine, titles are not cutted off, all styles are default, so I cannot reproduce your issue. — Grace Feng, Dec 06 '16 at 06:21
Is that possible that you replace `NavigationPage` with `ContentPage`? Otherwise we may need to modify the style of `NavigationPage`. — Grace Feng, Dec 06 '16 at 09:30
I think I need NavigationPage because all the pages have subpages — Ralf, Dec 06 '16 at 10:02
An example how to modify the titles would be fine, I couldn't find anything :( — Ralf, Dec 06 '16 at 11:18
@GraceFeng-MSFT do you have an example for modifying the NavigationPage? — Ralf, Dec 06 '16 at 20:00
sorry for the late responding, I've wrote an answer to share my progress on this case. — Grace Feng, Dec 08 '16 at 05:49

score 1 · Answer 1 · edited May 23 '17 at 11:52

It seems that the default title style of NavigationPage behaviors different on different size of device. By my side on 7" KitKat emulator it looks so:

and on 5" KitKat emulator it looks so:

Or it could be the version problem which cause the behavior of this NavigationPage by my side so different from yours, I can't reproduce yout issue. Anyway, if you want to customize the layout of your NavigationPage, you can create a custom render for your android platform. For more information, you can refer to the official document Customizing Controls on Each Platform, and if you're looking for a demo, there are discussions on the official forum about customize the title font of NavigationPage you may also take a look: Discussion 1 and Discussion 2.

Another possible solution to your problem is that I think you can change the NavigationPage to ContentPage, and change your sub pages to content view, and by doing this, you can refer to Xamarin.Forms: Can I embed one ContentPage or ContentView into another ContentPage.

According to your description, maybe the first solution by creating your own custom render is more suitable for your scenario.

Thank you for this, I found another solution and will post it these days — Ralf, Dec 09 '16 at 22:20

score 0 · Answer 2 · answered Jan 02 '18 at 13:31

You can find the textview of title through TabLayout view children in CustomRendered and change font style

[assembly: ExportRenderer(typeof(MainPage), typeof(BottomTabbedPageRenderer))]
namespace Daddy.Droid
{
    public class BottomTabbedPageRenderer : TabbedPageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement == null || e.OldElement != null)
                return;

            TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
            Android.Views.ViewGroup vgroup = (Android.Views.ViewGroup)tablayout.GetChildAt(0);
            for (int i = 0; i < vgroup.ChildCount; i++)
            {
                Android.Views.ViewGroup vvgroup = (Android.Views.ViewGroup)vgroup.GetChildAt(i);
                Typeface fontFace = Typeface.CreateFromAsset(this.Context.Assets, "IranSans.ttf");
                for (int j = 0; j < vvgroup.ChildCount; j++)
                {
                    Android.Views.View vView = (Android.Views.View)vvgroup.GetChildAt(j);
                    if (vView.GetType() == typeof(Android.Support.V7.Widget.AppCompatTextView) || vView.GetType() == typeof(Android.Widget.TextView))
                    {
                        //here change textview style
                        TextView txtView = (TextView)vView;                        
                        txtView.TextSize = 14f;
                        txtView.SetTypeface(fontFace, TypefaceStyle.Normal);
                    }
                }
            }
        }
    }
}

Xamarin Forms Android: TabbedPage Font Style

2 Answers2