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

10,430

Solution 1

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

Solution 2

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

Solution 3

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)
Share:
10,430
476rick
Author by

476rick

Student of the Master Software Engineering at the University of Amsterdam.

Updated on June 04, 2022

Comments

  • 476rick
    476rick about 2 years

    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:
    enter image description here

    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.