22

I have created the action bar by

ActionBar actionbar = getActionBar()

The background of the action bar is changed by

actionbar.setBackgroundDrawable(actionBarBackgroundImage);

Now I need to change the action bar tabs underline color programmatically. Is there any method to change the action bar tabs underline color?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Karthick
  • 1,241
  • 5
  • 20
  • 43
  • Have none of these answer worked for you? – QED Jul 25 '13 at 16:00
  • 4
    The codes specified here is worked only using the xml layout. I need to change the ActionBar color via Java code. Is there any options are there to change the action bar default blue underline color? – Karthick Jul 26 '13 at 03:41
  • 1
    @Karthick Did you ever resolve this problem? It's very disappointing to think that this is not possible. – Rymnel Nov 15 '13 at 17:30
  • @Karthick have you got the solution, if YES so please let me know, i am also searching for the same via JAVA Code only, I used setBackgroundDrawable(..) to change the ActionBar background color – Sun Feb 19 '14 at 06:38
  • Have you found the answer? @Karthick I am facing the same problem please let me know your solution –  Oct 15 '15 at 11:09

7 Answers7

10

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

Litrik De Roy
  • 823
  • 5
  • 9
9

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

Community
  • 1
  • 1
Kenny Wyland
  • 20,844
  • 26
  • 117
  • 229
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

enter image description here

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

Community
  • 1
  • 1
Dhaval Parmar
  • 18,812
  • 8
  • 82
  • 177
  • 1
    You CAN change Action bar style underline colors , even if you not use Action Bar Sherlock. Please check this : http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100 – Ivelius Sep 03 '13 at 12:42
4

Refer this, for customize action bar,

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActivityTheme" parent="@android:style/Theme.Holo">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <!-- other activity and action bar styles here -->
    </style>

    <!-- style for the action bar backgrounds -->
    <style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@drawable/ab_background</item>
        <item name="android:backgroundStacked">@drawable/ab_background</item>
        <item name="android:backgroundSplit">@drawable/ab_split_background</item>
    </style>
</resources>
Sino Raj
  • 6,431
  • 2
  • 22
  • 23
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);
    }
}
  • can you show an example of how to use this class to set the tab selected color? which drawable is used in changeTabNinePathColor()? – droideckar Oct 27 '14 at 16:43
  • See getTabStateListDrawable in the above post for examples of how changeTabNinePatchColor is used. You can either set the tabWidget.getChildAt(i).setBackground(ninePatchUtility.getTabStateListDrawable(color) or setBackgroundDrawable (depending on SDK version ) if you want to set the entire state list for the tab. –  Oct 31 '14 at 17:33
1

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>
Arun
  • 11
  • 4
  • please leave a comment if there is any problem with this code.it works for me fine – Arun Apr 21 '16 at 09:18
  • these question was asked 3 years ago, I don't think it is still relevant for OP. – user2807083 Apr 21 '16 at 10:24
  • 1
    I was trying to change the tab highlighter. tried all solutions given here nothing worked. This solution worked so i thought this might help someone looking for solution. – Arun Apr 22 '16 at 06:17
-1

you can use this code:

actionBar.setStackedBackgroundDrawable(new ColorDrawable(yourColor));

Chirag Nagpal
  • 729
  • 10
  • 25
  • 2
    It colors the entire background of the tabs. Can you tell me how to just change the color of the underline strip? – v01d Jul 08 '14 at 17:35