How to change color of tabbed page indicator in Xamarin.Droid?

Question

I'm building an application with Xamarin.Forms and a Portable Class Library. I have a tabbed page. I want to change the color of the tabbed page indicator. Changing the rest of the layout is something I already managed, the only thing I do need is to change the light blue tabbed page indicator like shown below:

I couldn't find anything that could work in Xamarin.Droid. This is the code that creates the tabbed page with content:

class TabbedPageTry : TabbedPage
{
    public TabbedPageTry()
    { 
        Title = "TabbedPage";

        var myPages = new CategoryDAO().GetCategories();
        foreach (var item in myPages)
        {
            Children.Add(new TabPage(item.CategoryID) { BindingContext = item });
        }
    }

    public class TabPage : ContentPage
    {
        public TabPage(int categoryID)
        {
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

            var listView = new ListView
            {

                SeparatorColor = Color.FromHex("#101010"),
                ItemsSource = new CourseDAO().GetCourses(),
                IsPullToRefreshEnabled = false,
                BackgroundColor = Color.White,
            };

            this.SetBinding(Page.TitleProperty, "Name");
            Content = listView;
        }
}

Because the application is being made Visual Studio with Xamarin.Forms my question is not answered yet. All the question I found are for Android specific, this is NOT what I am looking for. What I need is the C# solution to my problem.

Thank you in advance.

Possible duplicate of [TabLayout color of selected tab underline](http://stackoverflow.com/questions/30725109/tablayout-color-of-selected-tab-underline) — jaymarvels, Oct 26 '16 at 08:28

score 12 · Accepted Answer · answered Oct 28 '16 at 22:46

12

If you are using AppCompat in your Android platform project, in your TabLayout axml file use the tabIndicatorColor property to do this:

<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"
   ....
    app:tabIndicatorColor="#123456" />

answered Oct 28 '16 at 22:46

jimmgarr

1,473
9
12

1

Ah, you beat me to it by `12 minutes – jgoldberger - MSFT Oct 28 '16 at 22:59
This is the right solution, when the AppCompat (Material Design) in your Android project does work. Which is not the case in my project, but this is the way to go. – 476rick Nov 03 '16 at 09:47

score 3 · Answer 2 · edited Feb 08 '19 at 09:25

If you are using the FormsAppCompatActivity (Material Design), then all you have to do is open the Tabbar.axml file in the droid project's Resources folder and change the color set for app:tabIndicatorColor. For example,

<?xml version="1.0" encoding="utf-8"?>
<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="#FF3300" <!-- Set indicator color here, sets it to red-->
    app:tabGravity="fill"
    app:tabMode="fixed" />

score 1 · Answer 3 · edited Feb 08 '19 at 07:53

1

In the mainview.xaml.cs, inside public MainView():

On<Xamarin.Forms.PlatformConfiguration.Android>().SetBarSelectedItemColor(enter color here)

On<Xamarin.Forms.PlatformConfiguration.Android>().SetBarItemColor(enter color here)

edited Feb 08 '19 at 07:53

Ronan Boiteau

9,608
6
34
56

answered Jul 05 '18 at 11:03

Aye Al

21
5

SetBarSelectedItemColor doesn't change anything for me : /. No forms actions affect the tab colors. The only way I've gotten the color to change is ActionBar.SetStackedBackgroundDrawable(new Android.Graphics.Drawables.ColorDrawable(color.ToAndroid())). This must be run from the android-specific project. – farlee2121 Feb 08 '19 at 20:11
We worked out why SetBarSelectedItemColor wasn't working [here](https://stackoverflow.com/questions/54717492/xamarin-forms-platform-specific-setbarselecteditemcolor-has-no-effect/54758200?noredirect=1#comment96488789_54758200). It sets the text color for the active tab, not the tabIndicatorColor – farlee2121 Feb 25 '19 at 15:11
This is obsolete – user1034912 Apr 15 '21 at 16:30

How to change color of tabbed page indicator in Xamarin.Droid?

3 Answers3

Linked

Related