Forum Xamarin.Forms

How to disable selected tabtext font size changed?

shubham1shubham1 Member ✭✭✭

Hi Everyone, I am working an an app in which I have used bottom tab bar. The problem is when I tapped on tab bar children the font size auto changed in Android. I want to fix text size of tabbed page item.
How can I achieve that?

<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"
           x:Class="Scollar.MainPage"
         xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
           android:TabbedPage.ToolbarPlacement="Bottom"

            BarBackgroundColor="#1E2027"
           SelectedTabColor="#fff"
           UnselectedTabColor="Gray"
          BackgroundColor="#1E2027"
          NavigationPage.HasNavigationBar="False">

please help me. I don't want to use custom tab page.

Tagged:

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    When you not set android:TabbedPage.ToolbarPlacement="Bottom",you could take a look this thread: Xamarin.Forms: Change Icon & Text size in TabbedPage tabs.
    But if you use TabbedPage.ToolbarPlacement="Bottom", it doesn’t work. From TabbedPage source code in GitHub, we can see there are position to put Tab, one is Bottom, another is not, you want to put tab on bottom placement, so you can take a look this part of code. https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs

    Adding two view on Relativelayout, the BottomNavigationview is the second.

    Create CustomTabbedPageRenderers class:

     class CustomTabbedPageRenderers: TabbedPageRenderer
    {
    
        public CustomTabbedPageRenderers(Context context) : base(context)
        {
        }
        private AWidget.RelativeLayout _relativeLayout = null;       
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
    
            _relativeLayout = (AWidget.RelativeLayout)this.GetChildAt(0);           
            changeTabsFont();
    
        }
        private void changeTabsFont()
        {
    
            BottomNavigationView bottomnavigationview = (BottomNavigationView)_relativeLayout.GetChildAt(1);
            int menucount = bottomnavigationview.Menu.Size();
    
            for(int j=0;j<menucount;j++)
            {
                IMenuItem tab = bottomnavigationview.Menu.GetItem(j);
                SpannableString spanString = new SpannableString(tab.TitleFormatted.ToString());
                int end = spanString.Length();
                spanString.SetSpan(new RelativeSizeSpan(1.5f), 0, end, SpanTypes.ExclusiveExclusive);
                tab.SetTitle(spanString);
    
            }
    
        }
    }
    

    You can use SpannableString.SetSpan (Object what, int start, int end, int flags) to change Text size, What indicates the format of the setting, which can be the foreground color, the background color, or the clickable text.

  • shubham1shubham1 Member ✭✭✭

    @jezh said:
    When you not set android:TabbedPage.ToolbarPlacement="Bottom",you could take a look this thread: Xamarin.Forms: Change Icon & Text size in TabbedPage tabs.
    But if you use TabbedPage.ToolbarPlacement="Bottom", it doesn’t work. From TabbedPage source code in GitHub, we can see there are position to put Tab, one is Bottom, another is not, you want to put tab on bottom placement, so you can take a look this part of code. https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs

    Adding two view on Relativelayout, the BottomNavigationview is the second.

    Create CustomTabbedPageRenderers class:

    class CustomTabbedPageRenderers: TabbedPageRenderer
    {

    public CustomTabbedPageRenderers(Context context) : base(context)
    {
    }
    private AWidget.RelativeLayout _relativeLayout = null;
    protected override void OnElementChanged(ElementChangedEventArgs e)
    {
    base.OnElementChanged(e);

    _relativeLayout = (AWidget.RelativeLayout)this.GetChildAt(0);
    changeTabsFont();

    }
    private void changeTabsFont()
    {

    BottomNavigationView bottomnavigationview = (BottomNavigationView)_relativeLayout.GetChildAt(1);
    int menucount = bottomnavigationview.Menu.Size();

    for(int j=0;j<menucount;j++)
    {
    IMenuItem tab = bottomnavigationview.Menu.GetItem(j);
    SpannableString spanString = new SpannableString(tab.TitleFormatted.ToString());
    int end = spanString.Length();
    spanString.SetSpan(new RelativeSizeSpan(1.5f), 0, end, SpanTypes.ExclusiveExclusive);
    tab.SetTitle(spanString);

    }

    }
    }

    You can use SpannableString.SetSpan (Object what, int start, int end, int flags) to change Text size, What indicates the format of the setting, which can be the foreground color, the background color, or the clickable text.

    Hey @jezh, thanks for sharing the answer. I solve the problem at my end.

    But now the problem is I have use BarBackgroundColor="#1E2027"
    BackgroundColor="#1E2027"
    which is working fine in Android. The background color of tab bar and page is same in android while in iOS there is a difference between background color and tab bar color. I have attached a screen shot please have a look.

    what should I do?

  • jezhjezh Member, Xamarin Team Xamurai

    Yes,it is just the case.
    But you can add property BackgroundColor="#1E2027" to each child page of this TabbedPage to resolve this question.

  • shubham1shubham1 Member ✭✭✭

    @jezh said:
    Yes,it is just the case.
    But you can add property BackgroundColor="#1E2027" to each child page of this TabbedPage to resolve this question.

    it dosen't work.

  • jezhjezh Member, Xamarin Team Xamurai
    edited April 3

    I created a simple demo to test, it works properly.
    You can refer to the following code:

     <?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:d="http://xamarin.com/schemas/2014/forms/design"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d"
                xmlns:views="clr-namespace:TabbedApp3.Views"
                x:Class="TabbedApp3.Views.MainPage"
                xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
               android:TabbedPage.ToolbarPlacement="Bottom"
                BarBackgroundColor="#1E2027"
                BackgroundColor="#1E2027"     
                >
    
        <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>  
    

    ItemsPage.xaml(add BackgroundColor="#1E2027" to the root element)

       <?xml version="1.0" encoding="utf-8" ?>
       <ContentPage 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"
                 x:Class="TabbedApp3.Views.ItemsPage"
                 Title="{Binding Title}"
                 BackgroundColor="#1E2027"
                 x:Name="BrowseItemsPage">
    
              <!--other code-->   
      </ContentPage>
    

    Result in ios:

    Result in Android:

  • shubham1shubham1 Member ✭✭✭

    @jezh said:
    I created a simple demo to test, it works properly.
    You can refer to the following code:

     <?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:d="http://xamarin.com/schemas/2014/forms/design"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d"
                xmlns:views="clr-namespace:TabbedApp3.Views"
                x:Class="TabbedApp3.Views.MainPage"
                xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
               android:TabbedPage.ToolbarPlacement="Bottom"
                BarBackgroundColor="#1E2027"
                BackgroundColor="#1E2027"     
                >
    
        <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>  
    

    ItemsPage.xaml(add BackgroundColor="#1E2027" to the root element)

       <?xml version="1.0" encoding="utf-8" ?>
       <ContentPage 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"
                 x:Class="TabbedApp3.Views.ItemsPage"
                 Title="{Binding Title}"
                 BackgroundColor="#1E2027"
                 x:Name="BrowseItemsPage">
    
                 
      </ContentPage>
    

    Result in ios:

    Result in Android:

    Yes, As you can see that there is a difference between colors in tabbedpage of iOS and tabbed page of Android.

  • jezhjezh Member, Xamarin Team Xamurai

    Do you mean the color of the Tab Bar?

  • shubham1shubham1 Member ✭✭✭

    @jezh said:
    Do you mean the color of the Tab Bar?

    Yes.

Sign In or Register to comment.