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,

Earing

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....

Allude

Hi Farhan! what is android.R.id.title in this case? – Earing

@Farhan, there is nothing with id "title" in my code. Please review my code and let me know with what I should replace android.R.id.title? – Earing

as i said that when using tabs, it is automatically added by framework.... its like when you set text in setIndicator(first argument), this text is set on a textview with id android.R.id.title.... simply get it and change the color... – Allude

@Farhan, thanks a lot, it solved my problem. I tried this before too but before I was accessing my TabHost as codetabHost=(TabHost)findViewById(android.R.id.tabhost);code and then trying to change colors as you described but my application was always crashing. Now, I changed this statement as codetabHost=getTabHost();code and its working fine now. I cannot understand the difference between the both. Can you please tell me the difference between these two? Thanks – Earing

well try with your code but with a little change... i.e tabHost = (TabHost)findViewById(R.id.tabhost); and c if it works... if yes then you should get the point which i want to tell.... – Allude

@Farhan, no luck with your suggestion. If I remove android from it android.R.id.tabhost then it says that "tabhost cannot be resolved or is not a field" – Earing

yeah sorry... i didn't read the xml carefully.... what is the error you get...???? – Allude

@Farhan, I tried the way you said but with no luck, just trying to find the difference between THE both. I mentioned error in my last comment... – Earing

what is the error when app crashes when you use findViewById(android.R.id.tabhost); well dont know the diff at the moment but error description might help in determining... – Allude

@Farhan:does it changes text color at runtime? – Paginal

have to look again in the sources, at that time i checked the textview android used in tabs had this id: R.id.title so thats how i could change the properties of that textview... – Allude

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));

Shoveler

Can you post a sample snippet showing exactly where to add this ? I cannot find such option in Android Studio – Gastroscope

perfect answer . although it is a different issue i just want to point out that textAllCaps="false" we see in the example currently has no effect , to achieve the behavior of removing the CAP you will need to create a new style and assign it to the tablayout , check out the question below #31295616 – Gid

thanks for pointing it out @A.Alqadomi. I pasted the code snippet from my working sample, so that code is there, that has nothing to do with the answer. – Shoveler

Is there a way to change the color without a stateList? – Varuna

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.

Avril

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

Phlegmy