How to do you change the color of the "underline" marking the selected tab on a TabbedPage in Xamarin.Forms?

Issue

I'm currently adding several different themes (10-ish) to a Xamarin.Forms app. I've figured out how to dynamically change the color of everything except the "underline" on a tab on TabbedPage (see the attached image).

Screenshot identifying the TabbedPage "underline" with a red rectangle

I've tried to set the five different color properties (that I know of) on the TabbedPage as well as the BackgroundColor on the ContentPages in the tabs:

TabbedPage tabbedPage = new TabbedPage { Title = "Tabbed Page" };

tabbedPage.BarBackgroundColor = Color.Black;
tabbedPage.BarTextColor = Color.Gray;
tabbedPage.SelectedTabColor = Color.Black;
tabbedPage.UnselectedTabColor = Color.Black;

tabbedPage.BackgroundColor = Color.Black;

tabbedPage.Children.Add(new ContentPage { Title = "Page 1", BackgroundColor = Color.Gray });
tabbedPage.Children.Add(new ContentPage { Title = "Page 2", BackgroundColor = Color.Gray });

await Application.Current.MainPage.Navigation.PushAsync(tabbedPage);

Is it possible to set the color of the "underline" in Xamarin.Forms? Or do I need to make platform-specific changes to achieve this?

Solution

Use app:tabIndicatorColor.

All you have to do is to create a Tabar.xml file with below code in the layout folder(create one if needed) in the Android project's Resources folder and change the color via app:tabIndicatorColor;

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.tabs.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff0000"/>

And then add below code in onCreate method of MainActivity.cs

TabLayoutResource = Resource.Layout.Tabar;

Answered By - Alexandar May - MSFT