How to style Android selection indicator of action bar tab items individually?

Question

I have an action bar with 4 tab entries, like in this image:

enter image description here

I just used the theme Holo-Dark. I like to have color-blocks/undeline that marks the selected item in a different color. So when the user selects "Green" the color of the selection indicator is also green and not the standard blue. (Not the tab background, it is good in black)

How can I achieve this?

I currently added the items with this code in the onCreate method of the Activity:

    for (int i = 0; i < myModel.getTabCount(); i++) {
        actionBar.addTab(
                actionBar.newTab()
                        .setText(myModel.getPageTitle(this, i))
                        .setTabListener(this)
        );
    }

I looked up the documentation for class Actionbar.Tab and found nothing useful there.

score 2 · Answer 1 · answered Jul 29 '14 at 14:59

2

DevByte did a great tutorial on this:

http://www.youtube.com/watch?v=tRg_eDfQ8fk

There is also a link in the description to sample code

answered Jul 29 '14 at 14:59

Ryan Sayles

3,389
11
56
79

I have downloaded the SlidingTabsColor sample code seem also be quite complex. They override the onDraw method and explicitly draw the underline on the canvas. I hope there is a simplier solution. – Meier Jul 30 '14 at 10:09
It's really not that bad, and since these are from people who work at Google you know it's the "right" way to do it – Ryan Sayles Jul 30 '14 at 12:40
The effect of changing color selectors is what I try to achieve (except that I don't need all the sliding). The goolge example is for a separate tab bar and not for an action bar with tabs, I think it is not easily applicable to a action bar. – Meier Aug 01 '14 at 10:14

score 1 · Answer 2 · answered Jul 29 '14 at 14:56

1

You need to set different background drawables for the different tabs. You can make a Nine-Patch drawable in each color that mimics the thick underline of the tab. In your code, for each tab you will have to

Inflate a custom view
call setBackgroundResource() on that view
Create a Tab and call setCustomView() on it

answered Jul 29 '14 at 14:56

Karakuri

38,365
12
84
104

sounds quite complex. Do I really need a nine-patch? Because the tab selection background is just a rectangle. – Meier Jul 29 '14 at 15:26

score 1 · Answer 3 · edited May 23 '17 at 10:27

1

You can do this by setting custom view at the time of creation of the tab.It would be something like

final Tab firstTab = actionBar.newTab()
                          .setText(mAppSectionsPagerAdapter.getPageTitle(0))
                          .setCustomView(R.id.custom_tab_view_red);
final Tab secondTab = actionBar.newTab()
                           .setText(mAppSectionsPagerAdapter.getPageTitle(1))
                           .setCustomView(R.id.custom_tab_view_blue);

// etc

Check this question..It has some useful information for you

edited May 23 '17 at 10:27

Community

1
1

answered Jul 29 '14 at 15:03

Avinash Babu

6,171
3
21
26

that looks promising, I will give it a try – Meier Jul 29 '14 at 15:22
This let you change the tab, but not the selection indicator colorbar that marks the select item. The color bar seem to be controlled by the actionbar and not the items. – Meier Aug 01 '14 at 10:09

How to style Android selection indicator of action bar tab items individually?

3 Answers3