Android: Change Tab Text Color Programmatically

Question

I've a TabHost like this:

<?xml version="1.0" encoding="utf-8"?>
 <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabhost"
android:background="@drawable/tabs_bg">

<LinearLayout 
    android:id="@+id/LinearLayout01"
    android:orientation="vertical" 
    android:layout_height="fill_parent"
    android:layout_width="fill_parent">
    <TabWidget 
        android:id="@android:id/tabs"
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent"
        android:layout_marginBottom="5dip">
    </TabWidget>
    <FrameLayout 
        android:id="@android:id/tabcontent"
        android:layout_height="fill_parent" 
        android:layout_width="fill_parent">
    </FrameLayout>
</LinearLayout>

And I am adding tabs to this TabHost programmatically like this:

tabHost = (TabHost)findViewById(android.R.id.tabhost);
    tabHost.setOnTabChangedListener(this);

    /* tid1 is firstTabSpec Id. Its used to access outside. */
    TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
    TabSpec secondTabSpec = tabHost.newTabSpec("tid2");
    TabSpec ThirdTabSpec = tabHost.newTabSpec("tid3");

    /* TabSpec setIndicator() is used to set name for the tab. */
    /* TabSpec setContent() is used to set content for a particular tab. */
    firstTabSpec.setIndicator("Tab1", getResources().getDrawable(R.drawable.tab1));
    secondTabSpec.setIndicator("Tab2", getResources().getDrawable(R.drawable.tab2));
    ThirdTabSpec.setIndicator("Tab3", getResources().getDrawable(R.drawable.tab3));

    firstTabSpec.setContent(new Intent(this,FirstTab.class));
    secondTabSpec.setContent(new Intent(this,SecondTab.class));
    ThirdTabSpec.setContent(new Intent(this,ThirdTab.class));

    /* Add tabSpec to the TabHost to display. */
    tabHost.addTab(firstTabSpec);
    tabHost.addTab(secondTabSpec);
    tabHost.addTab(ThirdTabSpec);

    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
    {
        tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#121312"));
    }

    tabHost.getTabWidget().setCurrentTab(0);
    tabHost.getTabWidget().getChildAt(0).setBackgroundColor(Color.parseColor("#f1a026"));

And here is onTabChanged Event:

public void onTabChanged(String tabId) {
    // TODO Auto-generated method stub
    for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
    {
        tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#121312"));
    } 

    tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#f1a026"));
}

In onTabChanged event, I also want to change the text color of all tabs. Please help me how can I change text color of tabs in the event?

Thanks,

Answer 1

To change the text color of tabs, you need to get the view i.e TextView which is set as title of tabs and you can change it like this:

    TabHost tabhost = getTabHost();
    for(int i=0;i<tabhost.getTabWidget().getChildCount();i++) 
    {
        TextView tv = (TextView) tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
        tv.setTextColor(.....);
    } 

hope this helps....

Answer 2

For the new design support tab layout; you can define it in your xml
app:tabTextColor="@color/tab_inactive" app:tabSelectedTextColor="@color/tab_active"
E.g. -

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tabanim_tabs"
            app:tabTextColor="@color/tab_inactive"
            app:tabSelectedTextColor="@color/tab_active"
            android:textAllCaps="false"
            />

Programatically it may be acheived like this:

tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
        tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));

Answer 3

For me @Farhan 's solution did not work since getChildCount() kept returning 1 while having four tabs. Using getTabCount() and getChildTabViewAt() solved it for me:

for (int tabIndex = 0 ; tabIndex < mTabHost.getTabWidget().getTabCount() ; tabIndex ++) {
    View tab = mTabHost.getTabWidget().getChildTabViewAt(tabIndex);
    TextView t = (TextView)tab.findViewById(android.R.id.title);
    t.setTextColor(getResources().getColor(R.color.white));
}

I'd thought I post this alternative for people having the same issue.

Answer 4

When you use findViewById(id) you ask the system to look for any View with the id "id" relatively to the current ViewGroup. That means that what you do in your code is this.findViewById(id), so it will look for "id" in the current View. And doing findViewById(android.R.id.tabHost) is not very smart because it just does not exist...

When you do getTabHost() however, you ask the system to get the unique tabHost of your activity, no matter it have any View as root, i.e. the tabHost can be attached to nothing upside it.

As a conclusion, you should always us getTabHost in your TabHostActivity

Hope I was clear