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.

1. Each tab has a different background for the contents. How do I add separate background colors for each tab?
2. 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.

Answer 1

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);

Answer 2

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.

Answer 3

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.