Change ActionBar tab color programmatically

Question

I have the following ActionBar tab in my app. I was wondering what is the best way to change the colors around to match my app.

enter image description here

Each tab has a different background for the contents. How do I add separate background colors for each tab?
How do I change the light blue strip color to white to give it a 3D look?

I saw the following code:

ActionBar ab = getActionBar();
//ab.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000ff")));

But that line changes color for all the tabs to just one color.

The Tab code in my app is:

ActionBar ab = getActionBar();
        //ab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000ff"))); not changing the tab color
        //ab.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000ff")));
        ab.setNavigationMode( ActionBar.NAVIGATION_MODE_TABS );

        Tab tab = ab.newTab()
                .setText( "TY1" )
                .setTabListener( 
                        new MyTabListener( this, TY1.class.getName() ) );
        ab.addTab( tab );

        tab = ab.newTab()
                .setText( "TY2" )
                .setTabListener( 
                        new MyTabListener( this, TY2.class.getName() ) );
        ab.addTab( tab );

        tab = ab.newTab()
                .setText( "ty3" )
                .setTabListener( 
                        new MyTabListener( this, TY3.class.getName() ) );
        ab.addTab( tab );

Any and all help is appreciated. I can use XML as well, if someone points me in the right direction.

score 2 · Accepted Answer · answered Aug 02 '13 at 15:23

2

You can set a custom View for each tab. Create a new layout resource for the tab (it can just be a TextView). Leave its background empty and make a nine-patch drawable for the selection indicator. Get a LayoutInflater using

LayoutInflater inflater = getSystemService(LAYOUT_INFLATER_SERVICE);

Then for each tab, you can do this:

Tab tab = ab.newTab()
        .setText("TY1")
        .setTabListener(new MyTabListener(this, TY1.class.getName()));
View tabView = inflater.inflate(R.layout.my_tab_layout, null);
tabView.setBackgroundColor(...); // set custom color
tab.setCustomView(tabView);
ab.addTab(tab);

answered Aug 02 '13 at 15:23

Karakuri

38,365
12
84
104

How would it work on my code example? Let's say green background for first tab blue background for second tab and yellow background on third tab? – Si8 Aug 03 '13 at 21:00
Change the argument passed to `tabView.setBackgroundColor()` for each tab. – Karakuri Aug 03 '13 at 22:30
Sorry for bumping/necro-ing this answer, but how will the layout xml file look? I tried this solution but I have no idea on how to make a nine-patch drawable. – Razgriz Jun 26 '14 at 09:15

score 1 · Answer 2 · answered Aug 02 '13 at 15:03

You can change ActionBar's background color by defining custom style, as:

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>
    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

go to: 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

and create your action bar then download it. After you download it , you can use it in your project.

score 1 · Answer 3 · edited May 23 '17 at 12:03

For those looking for more detailed example code on how to create a custom tab view and then change the tab's formatting, you can see my answer at https://stackoverflow.com/a/28389366/3268329. That question had to do with changing the tab text color when a particular tab is selected, but you can easily modify the code to change the background instead or do whatever else you need.

https://stackoverflow.com/a/18491600/3268329 (S.Thiongane's answer) also shows how to set up different background resources.

Change ActionBar tab color programmatically

3 Answers3