Why cannot I change the text color in the tabs of my Material TabLayout in Xamarin.Android?

Federico Navarrete 616 Reputation points
2021-07-06T17:40:07.863+00:00

I have integrated some tabs in my app, but the tabs keep the text color stays white even thought I have set some shades of gray in its colors:

tabs.SetTabTextColors(Color.ParseColor("#bdbdbd"), Color.ParseColor("#212121"));

This is how it looks:

DGZC4.jpg

This is my XML:

<?xml version="1.0" encoding="UTF-8" ?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">
    <LinearLayout
        android:theme="@style/AppTheme"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.jsibbold.zoomage.ZoomageView
            android:adjustViewBounds="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/imgRuin"
            app:zoomage_restrictBounds="false"
            app:zoomage_animateOnReset="true"
            app:zoomage_autoResetMode="UNDER"
            app:zoomage_autoCenter="true"
            app:zoomage_zoomable="true"
            app:zoomage_translatable="true"
            app:zoomage_minScale="0.6"
            app:zoomage_maxScale="8" />
        <TextView
            android:layout_marginTop="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textStyle="italic"
            android:textSize="12dp"
            android:textColor="#4c8c4a"
            android:id="@+id/lblImgDescription" />
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/mTabOptions"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabOverview"
                android:text="@string/tabOverview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabPreview"
                android:text="@string/tabPreview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabDetails"
                android:text="@string/tabDetails"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabLocation"
                android:text="@string/tabLocation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </com.google.android.material.tabs.TabLayout>
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</ScrollView>

This is my style:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <style name="AppTheme.Launcher" parent="android:Theme.Material.Light">
        <item name="android:windowBackground">@drawable/launch_screen</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <!-- ToolBar -->
    <style name="ToolBarStyle" parent="Theme.AppCompat">
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
        <item name="actionMenuTextColor">@android:color/white</item>
        <item name="android:itemTextAppearance">@android:color/white</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
    <style name="progressBarStyle" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:indeterminateDrawable">@drawable/progress_bar_drawable</item>
    </style>
</resources>

These are the colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1b5e20</color>
    <color name="colorPrimaryDark">#003300</color>
    <color name="colorAccent">#4c8c4a</color>
</resources>

Any idea why they are always white?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,283 questions
{count} votes

Accepted answer
  1. Federico Navarrete 616 Reputation points
    2021-07-11T11:04:58.39+00:00

    It seems the text was not printed:

    public class TabConfigurationStrategy : Java.Lang.Object, TabLayoutMediator.ITabConfigurationStrategy
    {
        public void OnConfigureTab(TabLayout.Tab p0, int p1)
        {
            switch (p1)
            {
                case 0:
                    p0.SetText(Resource.String.tabOverview);
                    break;
                case 1:
                    p0.SetText(Resource.String.tabPreview);
                    break;
                case 2:
                    p0.SetText(Resource.String.tabDetails);
                    break;
                case 3:
                    p0.SetText(Resource.String.tabLocation);
                    break;
            }
        }
    }
    

    This is what I had to add.


0 additional answers

Sort by: Most helpful