Changing ActionBar tabs underline color programmatically

Question

I have created the action bar by

ActionBar actionbar = getActionBar()

The background of the action bar is changed by

acti         


        

Answer 1

try following.

write tabs_selector_green.xml in res/drawable.

    <!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

<!-- Pressed -->
<!-- Non focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>

<!-- Focused states -->
<item android:drawable="@android:color/transparent" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/layer_bg_selected_tabs_green" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

write layer_bg_selected_tabs_green.xml in res/drawable folder.

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/tab_green" />

        <padding android:bottom="5dp" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#FFFFFF" />
    </shape>
</item>

and in java code write this.

private static final int[] TABS_BACKGROUND = {
        R.drawable.tabs_selector_orange, R.drawable.tabs_selector_green,
        R.drawable.tabs_selector_red, R.drawable.tabs_selector_blue,
        R.drawable.tabs_selector_yellow };
/*
BLA BLA BLA
*/
@Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub
    RelativeLayout tabLayout = (RelativeLayout) tab.getCustomView();
    tabLayout.setBackgroundResource(TABS_BACKGROUND[tab.getPosition()]);
    tab.setCustomView(tabLayout);
/* ... */
}

Answer 2

I tried many of the suggestions posted here and other places with no luck. But I think I managed to piece together a (albeit not perfect) solution.

The TabWidget is using a selector. Essentially it is showing a different 9 patch image depending on the state of the tab (selected, pressed, etc.). I finally figured out that you could generate a selector programmatically. I started with generated 9 patches from http://android-holo-colors.com/ (color: #727272, TabWidget: Yes).

The biggest issue was setting the color. Setting the color filter did nothing. So, I ended up changing the colors of each of the pixels of the 9 patch image inside a loop.

...    
/**
 * <code>NinePatchDrawableUtility</code> utility class for manipulating nine patch resources.
 * 
 * @author amossman
 *
 */
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class NinePatchDrawableUtility {

    // Matches the colors in the supported drawables
    private static final int TAB_UNDERLINE_HIGHLIGHT_COLOR = 1417247097;
    private static final int TAB_UNDERLINE_COLOR = -8882056;
    private static final int TAB_PRESSED_COLOR = -2122745479;

    private Resources resources;

    public NinePatchDrawableUtility(Resources resources) {
        this.resources = resources;
    }

    /**
     * Create a <code>StateListDrawable</code> that can be used as a background for the {@link android.widget.TabWidget}</br></br>
     * 
     * <code>
     * FragmentTabHost tabHost = ...</br>
     * NinePatchUtility ninePatchUtility = new NinePatchUtility(getResources());</br>
     * TabWidget tabWidget =  tabHost.getTabWidget();</br>
     * for (int i = 0; i < tabWidget.getChildCount(); i++) {</br>
     * &nbsp;&nbsp;&nbsp;tabWidget.getChildAt(i).setBackground(ninePatchUtility.getTabStateListDrawable(titleColor));</br>
     * }
     * </code>
     * 
     * @param tintColor The color to tint the <code>StateListDrawable</code>
     * @return A new <code>StateListDrawable</code> that has been tinted to the given color
     */
    public StateListDrawable getTabStateListDrawable(int tintColor) {
        StateListDrawable states = new StateListDrawable();
        states.addState(new int[] {android.R.attr.state_pressed},
            changeTabNinePatchColor(resources, R.drawable.cc_tab_selected_pressed_holo, tintColor));
        states.addState(new int[] {android.R.attr.state_focused},
            changeTabNinePatchColor(resources, R.drawable.cc_tab_selected_focused_holo, tintColor));
        states.addState(new int[] {android.R.attr.state_selected},
            changeTabNinePatchColor(resources, R.drawable.cc_tab_selected_holo, tintColor));
        states.addState(new int[] { },
            changeTabNinePatchColor(resources, R.drawable.cc_tab_unselected_holo, tintColor));
        return states;
    }

    /**
     * Change the color of the tab indicator.</br></br>
     * 
     * Supports only the following drawables:</br></br>
     * 
     * R.drawable.cc_tab_selected_pressed_holo</br>
     * R.drawable.cc_tab_selected_focused_holo</br>
     * R.drawable.cc_tab_selected_holo</br>
     * R.drawable.cc_tab_unselected_holo</br></br>
     * 
     * Note: This method is not efficient for large <code>Drawable</code> sizes.
     * 
     * @param resources Contains display metrics and image data
     * @param drawable The nine patch <code>Drawable</code> for the tab
     * @param tintColor The color to tint the <code>Drawable</code>
     * @return A new <code>NinePatchDrawable</code> tinted to the given color
     */
    public NinePatchDrawable changeTabNinePatchColor(Resources resources, int drawable, int tintColor) {

        int a = Color.alpha(tintColor);
        int r = Color.red(tintColor);
        int g = Color.green(tintColor);
        int b = Color.blue(tintColor);
        BitmapFactory.Options opt = new BitmapFactory.Options();
        opt.inMutable = true;
        Bitmap bitmap = BitmapFactory.decodeResource(resources, drawable, opt);
        for (int x = 0; x < bitmap.getWidth(); x++) {
            for (int y = 0; y < bitmap.getHeight(); y++) {
                int color = bitmap.getPixel(x, y);
                if (color == TAB_PRESSED_COLOR) {
                    bitmap.setPixel(x, y, Color.argb((int)(a * 0.5), r, g, b));
                } else if (color == TAB_UNDERLINE_HIGHLIGHT_COLOR) {
                    bitmap.setPixel(x, y, Color.argb((int)(a * 0.9), r, g, b));
                } else if (color == TAB_UNDERLINE_COLOR) {
                    bitmap.setPixel(x, y, tintColor);
                }
            }
        }
        return new NinePatchDrawable(resources, bitmap, bitmap.getNinePatchChunk(), new Rect(), null);
    }

}

Example of usage:

/**
 * Theme the tab widget with the defined background color and title color set
 * in the TabManager
 * @param tabWidget
 */
@SuppressWarnings("deprecation")
@SuppressLint("NewApi")
public void theme(TabWidget tabWidget) {
    ColorDrawable backgroundDrawable = new ColorDrawable(backgroundColor);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        tabWidget.setBackground(backgroundDrawable);
        tabWidget.setAlpha(0.95f);
    } else {
        backgroundDrawable.setAlpha(242);
        tabWidget.setBackgroundDrawable(backgroundDrawable);
    }
    NinePatchDrawableUtility ninePatchUtility = new NinePatchDrawableUtility(resources);
    for (int i = 0; i < tabWidget.getChildCount(); i++) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            tabWidget.getChildAt(i).setBackground(ninePatchUtility.getTabStateListDrawable(titleColor));
        } else {
            tabWidget.getChildAt(i).setBackgroundDrawable(ninePatchUtility.getTabStateListDrawable(titleColor));
        }
        View tabView = tabWidget.getChildTabViewAt(i);
        tabView.setPadding(0, 0, 0, 0);
        TextView tv = (TextView) tabView.findViewById(android.R.id.title);
        tv.setSingleLine(); // set the texts on the tabs to be single line
        tv.setTextColor(titleColor);
    }
}

Answer 3

Here is a much easier way. I know you were looking for a programmatic change, but this one is REALLY easy.

I've been struggling with this for days, but finally found the solution. I'm using AppCompat. You can set colorAccent in your theme and that will change the highlight color on your ActionBar. Like so:

<item name="colorAccent">@color/highlightcolor</item>

Here it is in context:

<style name="LightTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/darkgrey</item>
    <item name="colorPrimaryDark">@color/black</item>
    <item name="colorAccent">@color/highlightcolor</item>
</style>

Where I originally posted this answer: Android Tab underline color not changing

Answer 4

Got the solution for changing the Tab Highlighter Color after 1 long day of search.Just 2 lines of code makes this work perfect!

Go to values/styles.xml and add the code below in ActionBar Theme

<item name="colorAccent">@color/Tab_Highlighter</item>

Now give the color for Tab_Highlighter in colors.xml

<color name="Tab_Highlighter">#ffffff</color>

Answer 5

Alternatively you could use Android Action Bar Style Generator to easily theme your action bar and tabs.

Answer 6

I'll suggest you use ActionBarSherlock. There is one sample available in the library named "Style ActionBar". (this is only way you can change ActionBar tabs underline color)

if you have customized ActionBar then You have to add this style in ActionBar Style

or here is way how to Do this

create style like below (here i have used ActionBarShareLock if you don't want to use then use android-support-v4.jar for support all Android OS Version)

<style name="Theme.AndroidDevelopers" parent="Theme.Sherlock.Light">
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="actionBarTabStyle">@style/MyActionBarTabStyle</item>
    </style>

    <!-- style for the tabs -->
    <style name="MyActionBarTabStyle" parent="Widget.Sherlock.Light.ActionBar.TabBar">
        <item name="android:background">@drawable/actionbar_tab_bg</item>
        <item name="android:paddingLeft">32dp</item>
        <item name="android:paddingRight">32dp</item>

actionbar_tab_bg.xml

<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/ad_tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/ad_tab_selected_holo" />
<item android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />
<item android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/ad_tab_selected_pressed_holo" />

applay this style in your activity in android manifest file

<activity
            android:name="com.example.tabstyle.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.AndroidDevelopers" >

for more detail check this answer and this article.

---

EDITED : 29-09-2015

ActionBarSherlock is deprecated so alternatively you can use android design support library and android app appcompat library for TOOLBAR(Action-Bar is deprecated so..) and TABS.

use TabLayout like below

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="center"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/white"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabIndicatorHeight="2dip"
            app:tabTextAppearance="?android:attr/textAppearanceMedium"
            app:tabTextColor="@color/colorAccent" />

here is sample of android design support library with tab