How to change the font type for the Title of the tabs?

[pcdus]

Hello,

I would like to know if there is a way to use the "default" font type for the Title of the tabs?

For me, the "default" font type is the one that we can found in the Android Bottom Navigation View, like described in this blog.

Regards,

[tuyen-vuduc]

@Goldstrike What do you mean by default font? If that default one by the OS, it should always be if you don't set BottomTabbedPage.TypeFace

[dothanhbinh41]

Hi @Goldstrike !
You can view at demo

bottomtabbedpage-xamarin-forms/demo/BottomTabbedPageQs.Droid/MainActivity.cs

BottomTabbedRenderer.Typeface = Typeface.CreateFromAsset(this.Assets, "architep.ttf");

[pcdus]

Oh sorry, I have removed the Typeface reference in the wrong project (IconizeDemo instead of BottomTabbedPageQs).

It works now as expected!

But how to implement it in a Forms solution that contains both iOS and Android project?

• I would like the BottomTabbedPage to be visible only on the "main" view
• I would like to show the same tabs on iOS

Do I need to specify the tabs icons in the XAML for iOS, and through the MainActivity only for the same view for Android?

[tuyen-vuduc]

Hey, this is a control for Android. nothing required to setup for iOS. Plz use it as you do for standard TabbedPage.

[pcdus]

Hi @tuyen-vuduc
I think that my question wasn't really clear...

When we use the default TabbedPage it works both on iOS and Android:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:views="clr-namespace:BottomTp.Views"
            x:Class="BottomTp.Views.MainPage">
    <TabbedPage.Children>
        <NavigationPage Title="Browse">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </NavigationPage>
        
        <NavigationPage Title="About">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_about.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

It's the same thing when we use Iconize and IconTabbedPage:

<?xml version="1.0" encoding="utf-8" ?>
<iconize:IconTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:views="clr-namespace:BottomTp.Views"
                        xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
                        x:Class="BottomTp.Views.IcMainPage">
    <TabbedPage.Children>
        <iconize:IconNavigationPage Title="Browse"
                                    Icon="md-view-list">
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </iconize:IconNavigationPage>
        <iconize:IconNavigationPage Title="About"
                                    Icon="md-help">
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </iconize:IconNavigationPage>
    </TabbedPage.Children>
</iconize:IconTabbedPage>

But when I use Naxam and the BottomTabbedPage, with the Iconize icons, the rendering only works for Android:

<?xml version="1.0" encoding="utf-8" ?>
<naxam:BottomTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:views="clr-namespace:BottomTp.Views"
                        xmlns:iconize="clr-namespace:Plugin.Iconize;assembly=Plugin.Iconize"
                        xmlns:naxam="clr-namespace:Naxam.Controls.Forms;assembly=Naxam.Controls.Forms"
                        x:Class="BottomTp.Views.NaxamMainPage">
    <views:ItemsPage Title="Browse" Icon="md-view-list"  />
    <views:AboutPage Title="About" Icon="md-help"/>
</naxam:BottomTabbedPage>   

So how to make the BottomTabbedPage work on both Android and iOS? Do I need to specify 2 distincts TabbedPage for iOS (IconTabbedPage) and Android (BottomTabbedPage)?

I've created a basic sample on my GitHub if you wan to test.

• I've started from the default basic Xamarin.Forms app that is based on the TabbedPage.
• Then I've replaced the TabbedPage by the Iconize IconTabbedPage.
• Finally I've added the Naxam BottomTabbedPage.

[tuyen-vuduc]

Hey,

For Iconize to work on iOS, you have to add renderer for iOS because this project has no support for iOS.

[tuyen-vuduc]

It's simple by this adding Iconize package and this line of code

[assembly: ExportRenderer(typeof(BottomTabbedPage), typeof(IconTabbedPageRenderer))]