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."
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.
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.