Forum Xamarin Xamarin.Forms

Change TabbedPage Item FontSize on Android

Hello,

I added a TabbedPage with position bottom in my xamarin forms project.

On Android, the font size is too big.

I'm looking for a way to reduce the font size.

I'm also trying to remove the effect that makes the selected menu item bigger.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            xmlns:views="clr-namespace:namespace.Views"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            xmlns:i18n="clr-namespace:namespace.Utils;assembly=namespace"
            Title="{Binding Title}"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="#002244"
            android:TabbedPage.BarBackgroundColor="White"
            android:TabbedPage.BarSelectedItemColor="#096cd0"
            x:Class="namespace.Views.MainPage">
    <TabbedPage.Children>
        <NavigationPage x:Name="Home" Title="{i18n:Translate Menu_Home}" IconImageSource="accueil.png">
            <x:Arguments>
                <views:Home />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="Services" Title="{i18n:Translate Menu_MyServices}" IconImageSource="services.png">
            <x:Arguments>
                <views:MyServices />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="Documentation" Title="{i18n:Translate Menu_Documentation}" IconImageSource="documentation.png">
            <x:Arguments>
                <views:Documentation />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="VideoCall" Title="{i18n:Translate Menu_Video}" IconImageSource="videoconferenc.png">
            <x:Arguments>
                <views:VideoCall />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

Here is the result

We're finding that the "videoconsultation" doesn't have enough room.

Accueil

It's even worse here

VideoCall

The word "services" disappears when selected.

Services

I've done a lot of research, but I've found a way to make it work :neutral:

When the menu is positioned at the top, I can change some settings in style.xml, but it doesn't seem to work when it's positioned at the bottom.

Do you have a solution?

Thank you very much,

Chris

Posts

  • shubham1shubham1 Member ✭✭✭

    @cstpierre said:
    Hello,

    I added a TabbedPage with position bottom in my xamarin forms project.

    On Android, the font size is too big.

    I'm looking for a way to reduce the font size.

    I'm also trying to remove the effect that makes the selected menu item bigger.

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d"
                xmlns:views="clr-namespace:namespace.Views"
                xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                xmlns:i18n="clr-namespace:namespace.Utils;assembly=namespace"
                Title="{Binding Title}"
                android:TabbedPage.ToolbarPlacement="Bottom"
                android:TabbedPage.BarItemColor="#002244"
                android:TabbedPage.BarBackgroundColor="White"
                android:TabbedPage.BarSelectedItemColor="#096cd0"
                x:Class="namespace.Views.MainPage">
        <TabbedPage.Children>
            <NavigationPage x:Name="Home" Title="{i18n:Translate Menu_Home}" IconImageSource="accueil.png">
                <x:Arguments>
                    <views:Home />
                </x:Arguments>
            </NavigationPage>
            <NavigationPage x:Name="Services" Title="{i18n:Translate Menu_MyServices}" IconImageSource="services.png">
                <x:Arguments>
                    <views:MyServices />
                </x:Arguments>
            </NavigationPage>
            <NavigationPage x:Name="Documentation" Title="{i18n:Translate Menu_Documentation}" IconImageSource="documentation.png">
                <x:Arguments>
                    <views:Documentation />
                </x:Arguments>
            </NavigationPage>
            <NavigationPage x:Name="VideoCall" Title="{i18n:Translate Menu_Video}" IconImageSource="videoconferenc.png">
                <x:Arguments>
                    <views:VideoCall />
                </x:Arguments>
            </NavigationPage>
        </TabbedPage.Children>
    </TabbedPage>
    

    Here is the result

    We're finding that the "videoconsultation" doesn't have enough room.

    Accueil

    It's even worse here

    VideoCall

    The word "services" disappears when selected.

    Services

    I've done a lot of research, but I've found a way to make it work :neutral:

    When the menu is positioned at the top, I can change some settings in style.xml, but it doesn't seem to work when it's positioned at the bottom.

    Do you have a solution?

    Thank you very much,

    Chris

    Hey, Did you find the solution?

Sign In or Register to comment.