How to change color of tabbed page indicator in Xa

2019-07-11 13:42发布

问题:

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.

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


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


回答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)