Transparent Actionbar: custom tabcolor

nhaarman picture nhaarman · Dec 5, 2012 · Viewed 70.2k times · Source

I want to create an ActionBar with tabs that are transparent, with #3b000000. Something like this, but with tabs below the ActionBar:

enter image description here

This is the code I'm using in styles.xml:

<style name="Theme.MyTheme" parent="@style/Theme.Sherlock.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="actionBarStyle">@style/ActionBar</item>
</style>

<style name="ActionBar" parent="@style/Widget.Sherlock.Light.ActionBar">
    <item name="android:background">@color/actionbar</item>
    <item name="background">@color/actionbar</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle</item>
    <item name="actionBarTabStyle">@style/ActionBarTabStyle</item>
</style>

<style name="ActionBarTabStyle" parent="@style/Widget.Sherlock.ActionBar.TabView">
    <item name="background">@color/actionbar_tabs</item>
    <item name="android:background">@color/actionbar_tabs</item>
</style>

What happens, is that the ActionBar itself does show the transparent backgroundcolor, but the tabs are totally transparent (no color visible).

How can I solve this?

Answer

Gunnar Karlsson picture Gunnar Karlsson · Dec 13, 2012

Call setStackedBackgroundDrawable() on your ActionBar:

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#330000ff")));
actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#550000ff")));

This produces (as an example with some random icons and tabs, and two different bluish background colors to highlight the effect):

enter image description here

(The refresh icon is the default one, which comes with a slight transparency. The other icons are custom test icons with color #FFFFFFFF, that is, no transparency).