How to change the color of tabbed page indicator in Xamarin Forms

Question

I'm making an app using Xamarin Forms. I have a tabbed page and wish to change the color of the tabbed indicator. However I am unable to change it from the default of white.

A white indicator example:

A white indicator example

I've tried changing the tabIndicatorColor in the Tabbar.xml file as shown below:

<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="@color/colourSelected"
app:tabGravity="fill"
app:tabMode="fixed" />

However this doesn't change it, no matter what color I use, the indicator will still be white. How do I go about fixing this?

try with a hex code directly something like this `app:tabIndicatorColor="#FF9F11"` — Shubham Tyagi, Dec 16 '20 at 15:22
No, I was using TabbedPage. Changing the android compile version form 10.0 to 9.0 seems to fix the issue — John Burke, Dec 16 '20 at 15:48

score 1 · Accepted Answer · answered Dec 16 '20 at 15:47

1

Took me a while, but the problem seems to be a bug compiling with Android 10.0. Changing the "Compile using Android version" option to 9.0 from 10.0 in the android application screen fixed the problem.

After doing that, tabIndicatorColor works as intended.

answered Dec 16 '20 at 15:47

John Burke

31
4

seems like a bug you should raise it on github – Shubham Tyagi Dec 16 '20 at 16:44

How to change the color of tabbed page indicator in Xamarin Forms

1 Answers1