CODEWITHSUNDEEP
androidandroid-widget
Mudasser Hassan
Mudasser Hassan

Reputation: 726

Android: Change Tab Text Color Programmatically

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,

Upvotes: 16

Views: 49004

Answers (4)

AnswerDroid
AnswerDroid

Reputation: 1893

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

Upvotes: 25

spes
spes

Reputation: 484

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.

Upvotes: 11

Nabil Gardon
Nabil Gardon

Reputation: 175

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

Upvotes: 4

Farhan
Farhan

Reputation: 13390

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

Upvotes: 53

Related Questions