ActionBar Dynamic Tab Text Color Change

Question

I need to change the tab text color dynamically. When the tab is selected text should be yellow and when unselected it should be black. I tried some tricks, but all I achieved was to change the ActionBar title color...

My Java code setting up the tabs:

     private void setSortTabs() {
    //getting the action bar from the MainActivity
    final ActionBar actionBar = ((ActionBarActivity) getActivity()).getSupportActionBar();
    //adding tabs to the action bar
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    //tab sort by name
    ActionBar.Tab tabSortByName = actionBar.newTab();
    tabSortByName.setText(LABEL_BY_NAME_DESC);
    ActionBar.TabListener sortByNameTabListener = new ActionBar.TabListener() {
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByName(tab);
        }

        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByNameTabUnselected(tab);
        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByName(tab);
        }
    };
    tabSortByName.setTabListener(sortByNameTabListener);
    actionBar.addTab(tabSortByName);

    //tab sort by date
    ActionBar.Tab tabSortByDate = actionBar.newTab();
    tabSortByDate.setText(LABEL_BY_DATE_ASC);
    actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.BLUE));
    ActionBar.TabListener sortByDateTabListener = new ActionBar.TabListener() {
        @Override
        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByDate(tab);
            //Toast.makeText(getActivity().getApplicationContext(),Integer.toString(tab.getPosition()), 1).show();
        }

        @Override
        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByDateTabUnselected(tab);

        }

        @Override
        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
            sortByDate(tab);
        }
    };
    tabSortByDate.setTabListener(sortByDateTabListener);
    actionBar.addTab(tabSortByDate);
}

My styles.xml code:

    <style name="AppTheme"
    parent="Theme.Base.AppCompat.Light">
    <item name="android:actionBarStyle" tools:ignore="NewApi">@style/MyActionBar</item>
    <item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
    <item name="android:actionBarTabStyle">@style/TabBackgroundStyle</item>
    <item name="android:actionBarTabBarStyle">@style/TabBarBackgroundStyle</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="actionBarTabTextStyle">@style/TabTextStyle</item>
    <item name="actionBarTabStyle">@style/TabBackgroundStyle</item>
    <item name="actionBarTabBarStyle">@style/TabBarBackgroundStyle</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
    parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="android:background">@color/actionBarBackgroundColor</item>
    <item name="android:icon">@android:color/transparent</item>

    <!-- Support library compatibility -->
    <item name="background">@color/actionBarBackgroundColor</item>
    <item name="icon">@android:color/transparent</item>
</style>

<style name="TabTextStyle"
    parent="@style/Widget.AppCompat.ActionBar.TabText">
    <item name="android:textColor">@color/selected_tab_text_color</item>
    <item name="android:textSize">20sp</item>
</style>

<style name="TabBackgroundStyle"
    parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@color/gray_edit_text</item>
    <item name="android:gravity">center</item>
</style>

<style name="TabBarBackgroundStyle"
    parent="@style/Widget.AppCompat.ActionBar.TabBar">
    <item name="android:background">@color/gray_edit_text</item>
</style>

Current look vs desired look

Answer 1

I had the same requirement for my project. The following code works by creating a custom view for each tab, with which you can set/change text color (or do other formatting changes) as desired. Whichever tab is selected will have yellow text, the unselected tabs will have black text.

public void createTabs() {
    // Hardcoding for test purposes...
    String tabTitles[] = {"Tab0", "Tab1", "Tab2"};
    int numTabs = 3;
    int startingSelectedTab = 0;

    for (int i = 0; i < numTabs; i++) {             
        Boolean selected = (i == startingSelectedTab);

        Tab tab = mActionBar.newTab();
        tab.setTabListener(this);

        View view = createTabCustomView(tabTitles[i], selected);
        tab.setCustomView(view);

        mActionBar.addTab(tab, selected);
    }
}

public View createTabCustomView(String title, boolean isSelected)  {
    // XML file is below  
    RelativeLayout rootView = (RelativeLayout) getLayoutInflater().inflate(R.layout.action_bar_custom_tab, null);

    TextView textView = setTextColor(rootView, isSelected);
    textView.setText(title);

    return rootView;
}

public View setTabTextColor(Tab tab, boolean isSelected) {
    // Get view that was created in createTabCustomView()
    RelativeLayout rootView = (RelativeLayout) tab.getCustomView();

    setTextColor(rootView, isSelected);

    return rootView;
}

public TextView setTextColor(View rootView, boolean isTabSelected) {
    TextView textView = (TextView) rootView.findViewById(R.id.custom_tab_textview);

    if (isTabSelected) {
        textView.setTextColor(Color.YELLOW);
    } else {
        textView.setTextColor(Color.BLACK);
    }
    return textView;
}

@Override
// Implement ActionBar.TabListener 
public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
    View view = setTabTextColor(tab, true);
    tab.setCustomView(view);
}

@Override
// Implement ActionBar.TabListener 
public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
    View view = setTabTextColor(tab, false);
    tab.setCustomView(view);
}

@Override
// Implement ActionBar.TabListener 
public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {      
}   

action_bar_custom_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="0dp"
    android:padding="0dp">

    <TextView
        android:id="@+id/custom_tab_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:gravity="center|center_horizontal"
        android:textStyle="bold"/>

</RelativeLayout>