White tab with dark text.

Question

I am using TabLayoutand trying to set tabbackgroundto white with dark text.

I can’t change the color of the text and it seems to stay white.

This is the style I used:

<style name="TabWhiteText" parent="Base.TextAppearance.AppCompat">
    <item name="android:textColor">@color/deepEggplant</item>
</style>

<style name="TabWhite" parent="Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@color/deepEggplant</item>
    <item name="tabBackground">@android:color/white</item>
    <item name="tabIndicatorColor">@android:color/white</item>
</style>

<style name="TabWhiteMedium" parent="TabWhite">
    <item name="android:textAppearance">@style/TabWhiteText</item>
</style>

And as applied to this:

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:layout_alignParentTop="true"
        style="@style/TabWhiteMedium"
        selectFromListView:tabMode="scrollable" />

Answer 1

You can programmatically add colors to the text of your tabs using the method setTabTextColors(). Refer to TabLayout documentation

To add color resources, use ContextCompat.getColor (context, your color resource identifier is here) instead of directly providing the resource as a parameter

Answer 2

: http://guides.codepath.com/android/google-play-style-tabs-using-tablayout

textColor :

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">@android:color/white</item>
    <!-- Your white color maybe -->
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#000000</item>
    <!-- Or your TabLayout textcolor to dark maybe -->
    <item name="textAllCaps">true</item>
</style>

TabLayout:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>

.

---

: , , :

app:tabBackground="@android:color/white"
app:tabTextColor="@color/darkcolor"

:

<android.support.design.widget.TabLayout
          android:id="@+id/tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:minHeight="?attr/actionBarSize"
          app:tabIndicatorColor="#ffffff"
          app:tabIndicatorHeight="4dp"
          app:tabBackground="@android:color/white" 
          app:tabTextColor="@color/darkcolor"  
          app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />