mauiindicatortabbedpage

.NET MAUI Android - Tabbed Page - indicator color


How can I change the color of the TabbedPage indicator (line) in .NET MAUI (Android)?

I'm developing a .NET MAUI application, and I need to change the color of the selected tab indicator (the underline below the selected tab) in a TabbedPage on Android. I've seen examples of how to do this in Xamarin.Forms, but I couldn't find a straightforward solution for .NET MAUI.

I've tried setting properties like BackgroundColor, BarBackgroundColor, and SelectedTabColor directly on the TabbedPage, but none of these seem to affect the color of the indicator.

My project is complex, so I recreated a simple demo

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MauiBiometricAppDemo.Views"
            x:Class="MauiBiometricAppDemo.Views.MyTabbedPage"
            BackgroundColor="Yellow"
            BarBackgroundColor="Yellow"
            BarTextColor="Black"
            SelectedTabColor="White"
            UnselectedTabColor="White">
    <local:MainPage />
    <local:NewPage1 />
</TabbedPage>

Resources are in the default state. The problem is that there is no property that could set the indicator color."

enter image description here

UPDATE: adding other codes

public partial class MyTabbedPage : TabbedPage
{
    public MyTabbedPage()
    {
        InitializeComponent();
    }

}

MainPage

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBiometricAppDemo.Views.MainPage"
             Title="MainPage">
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />


            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

NewPage1

public partial class NewPage1 : ContentPage
{
    public NewPage1()
    {
        InitializeComponent();
    }
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBiometricAppDemo.Views.NewPage1"
             Title="NewPage1">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

I didn't add these before, because everything is in default state.


Solution

  • How can I change the color of the TabbedPage indicator (line) in .NET MAUI (Android)?

    You can modify it by setting platform native code. Add the following code in your TabbedPage code behind:

        protected override void OnHandlerChanged()
        {
            base.OnHandlerChanged();
    #if ANDROID
            FieldInfo tabbedPageManagerFieldInfo = typeof(TabbedPage).GetField("_tabbedPageManager", BindingFlags.NonPublic | BindingFlags.Instance);
            object tabbedPageManager = tabbedPageManagerFieldInfo?.GetValue(this);
            FieldInfo tabLayoutFieldInfo = tabbedPageManager?.GetType().GetField("_tabLayout", BindingFlags.NonPublic | BindingFlags.Instance);
            var tablayout = tabLayoutFieldInfo?.GetValue(tabbedPageManager) as Google.Android.Material.Tabs.TabLayout;
            if (tablayout != null)
            {
                tablayout.SetSelectedTabIndicatorColor(Android.Graphics.Color.ParseColor("#000000"));
            }
    #endif
        }
    

    Use Reflection to get TabbedPageManager(cause it is internal class) and TabLayout. Then call SetSelectedTabIndicatorColor method to set Indicator Color. I set it to black color.