Android tabhost change text color style

Question

Trying to change tabhost text color, in this code I can change tabhost background color(not text color)

tabHost.setOnTabChangedListener(new OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {
          for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
            tabHost.getTabWidget().getChildAt(i)
                            .setBackgroundColor(Color.parseColor("#FF0000")); // unselected
          }

          tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab())
                        .setBackgroundColor(Color.parseColor("#0000FF")); // selected

        }
});

how can I change tabhost text color?

Answer 1

You may change color of Tabhost text as follow.

tabHost.setOnTabChangedListener(new OnTabChangeListener() {

    @Override
    public void onTabChanged(String tabId) {

        for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
            tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); // unselected
            TextView tv = (TextView) tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); //Unselected Tabs
            tv.setTextColor(Color.parseColor("#ffffff"));
        }

        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#0000FF")); // selected
        TextView tv = (TextView) tabhost.getCurrentTabView().findViewById(android.R.id.title); //for Selected Tab
        tv.setTextColor(Color.parseColor("#000000"))

    }
});

EDIT:

To set text color initially in your activity, you can use this code in onResume() function

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(Color.parseColor("#000000"));
    } 

Answer 2

This can actually be done using XML themes. The TabWidget uses android:textColorPrimary for the selected tab and android:textColorSecondary for the unselected ones. Thus, you can achieve a text color change like this:

In styles.xml:

<style name="TabWidgetTheme" parent="AppTheme">
    <item name="android:textColorPrimary">@color/your_primary_color</item>
    <item name="android:textColorSecondary">@color/your_secondary_color</item>
</style>

In your layout:

<TabHost
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:theme="@style/TabWidgetTheme"/>

Note that the android:theme should not be directly in the TabWidget itself, but rather the containing TabHost or similar.

Answer 3

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(Color.parseColor("#000000"));
    } 

EDIT :

Another way is to create a custom view for your tabs. when you add tabs to your tabHost

FragmentTabHost tabHost;

tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        tabHost.setup(this, getSupportFragmentManager(), R.id.frame);

// create customView for each tabs View tabViewHome = createTabView(tabHost.getContext(), "Home", R.drawable.ic_home);

tabHost.addTab(tabHost.newTabSpec("Home").setIndicator(tabViewHome), HomeActivity.class, null);


private static View createTabView(final Context context, final String text, int iconId)
    {
            // inflate your layout here
        View view = LayoutInflater.from(context).inflate(R.layout.tab_layout, null);
        TextView tv = (TextView) view.findViewById(R.id.tab_tv_title);
        tv.setText(text);
            tv.setTextColor(Color.RED);
        ImageView iv = (ImageView) view.findViewById(R.id.tab_background_iv_icon);
        iv.setImageResource(iconId);
        return view;
    }

and your tab_layout.xml will be like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout"
    android:layout_width="fill_parent"
    android:layout_height="40dip"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="5dip" 
    android:background="#AAE1E1E1">

     <ImageView
        android:id="@+id/tab_background_iv_icon"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:contentDescription="@string/imgDesc"
        />

    <TextView
        android:id="@+id/tab_tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        //android:textColor="@drawable/tab_text_selector"
        android:textSize="8sp"
        android:textStyle="bold" />

</LinearLayout>

Hope this helps.

Answer 4

Ehi man, I used this solution for:

private void setNewTab(final String tag, final String title, final Class<?> clazz, final Bundle bundle) {
    TabHost.TabSpec tabSpec = tabHost.newTabSpec(tag);
    tabSpec.setIndicator(InfoTabView_.build(getActivity()).bind(title, false));
    tabHost.addTab(tabSpec, clazz, bundle);
}

...

bundle = new Bundle();
bundle.putSerializable(FaqFragment.ARG_FAQS, infos.getFaq());
setNewTab("faq", "Faq", FaqFragment_.class, bundle);

...


@EViewGroup(R.layout.view_info_tab)
public class InfoTabView extends RelativeLayout {

    ....

    @Override
    public void setSelected(final boolean selected) {
        if (selected)
            titleTextView.setTextColor(selectedColor);
        else
            titleTextView.setTextColor(unselectedColor);
    }
}

override setSelected is most clean way!