Selected custom tab text color in TabLayout

Question

I'm trying to create custom tab layout because I need to set badge counter next to TextView. I've set id to @android:id/text1 as it's mentioned in doc.

When my custom tab is selected, TextView color isn't changed automatically. How to achieve it in correct and clean way?

Properly selected default tab:

Wrong selected custom tab (text is grey but should be white):

Code

PagerAdapter adapter = new MyAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
TabLayout.Tab tab = tabLayout.getTabAt(2);
if (tab != null) { 
    tab.setCustomView(R.layout.tab_proposed_rewards);
}

Layout

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:gravity="center"
        android:textAppearance="@style/TextAppearance.Design.Tab"/>

    <TextView
        android:id="@+id/indicator"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/background_indicator"
        android:gravity="center"
        android:lines="1"/>

</LinearLayout>

Edit

Answer:

tab.setCustomView(R.layout.tab_proposed_rewards);
ColorStateList textColor = tabLayout.getTabTextColors();
TextView textView = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
textView.setTextColor(textColor);

Devil

The answer lies here, second answer down. Use your styles.xml so you can create the view through xml using the style tag, instead of creating it programatically. Personally, I think this is the "cleaner" way of going about it. – Continuation

@DillonBurton Nothing works with custom tab layout but thanks for help anyway. I found different solution. – Devil

@AleksanderMielczarek how did you do it. I am also stuck in this. – Intestine

Answer 1

Actually, it's better to use a selector.

Here's a sample using Kotlin and the latest viewPager2 with tabLayout (based on Google's sample here):

        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            val tabView = LayoutInflater.from(this).inflate(R.layout.tab_with_badge, tabLayout, false)
            tabView.textView.text = "item$position" 
            tabView.badgeTextView.text = position.toString()
            tab.customView = tabView
        }.attach()

tab_with_badge.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"
    android:orientation="horizontal">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:textColor="@color/tab_color_selector" tools:text="@tools:sample/lorem" />

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/badgeTextView" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:background="@drawable/badge_background" tools:text="12" />

</LinearLayout>

tab_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#f00" android:state_pressed="true" />
    <item android:color="#0f0" android:state_selected="true" />
    <item android:color="#00f" />
</selector>

badge_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <padding
        android:left="4dp"
        android:right="4dp" />
    <solid android:color="@color/tab_color_selector" />
    <corners android:radius="8dp" />
</shape>

Estragon

Answer 2

You can do this programatically.

Change the selected tab's color in your code programmatically. You can use the setTabTextColors (int normalColor, int selectedColor).

And then apply

yourTabLayout.setTabTextColors (Color.White, Color.Black);

Hope this solves your problem, more info can be found on link

In your case

TabHost tabHost = getTabHost();
for(int i=0;i<tabhost.getTabWidget().getChildCount();i++) 
        { 
            TextView tv = (TextView) tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); //Unselected Tabs
            tv.setTextColor(Color.parseColor("#ffffff"));
        } 
        TextView tv = (TextView) tabhost.getCurrentTabView().findViewById(android.R.id.title); //for Selected Tab
        tv.setTextColor(Color.parseColor("#000000"))

Try this, it will change the color of inner text view

Dearborn

Thanks for hint with tabTextColors. I get default textColors form TabLayout and apply them to custom TextView. See edited question. – Devil

@AleksanderMielczarek see the updated answer, it has code to change the textView text's color – Dearborn