Setting text color in custom sliding tab view on first display

Question

I'm trying so set the text color on sliding tabs within a custom view according to the tab state. It's working but not on initial display.

The textcolor in the custom view should be white when the tab is selected and darker grey otherwise. I got it partly working already: When I select a tab manually the text color changes correctly.

My problem is that on first display the text of the first tab, whose content is displayed initially and before any user interaction with the tabs, is not colored in the active state color (white). Its grey, like the inactive tabs. If I start interacting with the tabs, everything works, but the initial tab color of the first displayed tab is wrong.

[FIRST TAB | SECOND TAB]
     ^
    Grey (inactive color) on first load

EDIT: The cause seems to be in the styles.xml: If I declare a custom style that inherits from Widget.Design.TabLayout the initial coloring does not work anymore. If I do not declare custom styles for the tablayout, everything works fine!

EDIT2: No, it doesn't work. It works without setting the custom view but it still does not do the initial coloring correctly when first loading the tabs with setting the custom view.

Here is my code:

tab_gallerylayout.xml (custom tab view)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.mbprojects.retro.view.RetroTextView
    android:id="@+id/tab_title"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textColor="@drawable/gallerytab_title_color"
    app:font="@string/font_name_syncopate"
    />
</LinearLayout>

gallerytab_title_color.xml (selector)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/white" />
    <item android:state_selected="false" android:color="@android:color/darker_gray" />
    <item android:state_focused="true" android:color="@android:color/white" />
    <item android:state_pressed="true" android:color="@android:color/white" />

    <item android:color="@android:color/darker_grey" />
</selector>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="@style/Theme.AppCompat.NoActionBar">
</style>
<style name="AppTheme.Base.Widget.Design.TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">@android:color/white</item>
    <item name="tabIndicatorHeight">0dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">@android:color/black</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>

</style>

Any suggestions?

Answer 1

The reason for this unusual behaviour is that your viewPager sets first item as current internally in viewPager.setAdapter(). This in turn makes tabLayout to select first tab in tabLayout.setupWithViewPager().

After this when you set custom tabs, state of custom view is not changed to "selected" (because select initial tab code already completed before this).

So, you need to explicilty change the state of custom view of selected tab. Add below line after you set custom tabs and you're good to go.

mTabLayout.getTabAt(mInitialTab).getCustomView().setSelected(true);