Transparent Actionbar: custom tabcolor

Question

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?

Gunnar Karlsson · Accepted Answer · 2012-12-14T01:30:47.453

138

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

edited Dec 14 '12 at 01:30

answered Dec 13 '12 at 07:14

Gunnar Karlsson

28,350
10
68
71

I don't want menuitems, I want transparent tabs. – nhaarman Dec 13 '12 at 15:09
Ah, I didn't know there was a difference in meanings of the words. I'll do that. Thanks a lot for your answer! – nhaarman Dec 14 '12 at 08:22
@GunnarKarlsson sir how do we achieve this with sherlock action bar?? – Rat-a-tat-a-tat Ratatouille Mar 27 '14 at 09:08
@Rat-a-tat-a-tatRatatouille I don't know, I'm not very familiar with Sherlock. – Gunnar Karlsson May 08 '14 at 23:59
@GunnarKarlsson - thanks for the reply.. i managed to get it done. using the same styles mentioned here, just that the parent would change from android actionbar theme to sherlock action bar theme .. and i used this code you've written in the java file too ... :).. – Rat-a-tat-a-tat Ratatouille May 09 '14 at 04:05
11

didn't work for me. I am not using getActionBar() but getSupportActionBar(). My bar is full blue, not with transparency. other thing is getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY); is only accessible for API 11 or above. – Pedro Romão Aug 20 '14 at 10:15
1

thanks dude it works for, just need to set background throw code if i set background in xml layout it will not work.. – W I Z A R D Oct 10 '14 at 08:44
1

You should call this before super.onCreate – Sam Dec 01 '16 at 12:51

score 12 · Answer 2 · answered Dec 11 '12 at 13:12

12

I have done this on an project and the style was like this:

<style name="AppTheme" parent="android:Theme.Holo">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/action_bar_theme</item>
    <item name="android:actionMenuTextColor">#fff</item>
</style>

<style name="action_bar_theme" parent="@android:style/Widget.Holo.ActionBar">
    <item name="android:background">#b3000000</item>
    <item name="android:titleTextStyle">@style/action_bar_text</item>
</style>

answered Dec 11 '12 at 13:12

Marcio Covre

4,556
2
22
24

Where do you declare the color and transparency of the tabs? – nhaarman Dec 13 '12 at 15:09
Sorry, In my project it doesn't have tabs – Marcio Covre Dec 13 '12 at 16:30

score 9 · Answer 3 · answered Nov 25 '14 at 13:43

As mentioned in this article, using the following custom theme works flawlessly.

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

To apply some color tint, Gunnar's answer shows how.

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

How about using getSupportActionBar() – Neon Warge Sep 16 '16 at 03:23 — Neon Warge, Sep 16 '16 at 03:23

score 8 · Answer 4 · answered May 28 '14 at 06:45

Here is my code to fully transparent Actionbar

<!-- Base application theme. -->
<style name="TransparentTheme" parent="android:Theme.Holo.Light">
    <!-- Customize your theme here. -->
    <item name="android:windowBackground">@null</item>
    <item name="android:actionBarStyle">@style/ActionBarStyle.Transparent</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

<style name="ActionBarStyle.Transparent" parent="android:Widget.ActionBar">
    <item name="android:background">@null</item>
    <item name="android:displayOptions">showHome|showTitle</item>
    <item name="android:titleTextStyle">@style/ActionBarStyle.Transparent.TitleTextStyle</item>
</style>

<style name="ActionBarStyle.Transparent.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">@android:color/white</item>
</style>

enter image description here

score 4 · Answer 5 · answered Jan 09 '15 at 14:47

             getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);//or add in style.xml
             ActionBar actionBar = getActionBar();

             ColorDrawable newColor = new ColorDrawable(getResources().getColor(R.color.action_bar_color));//your color from res
             newColor.setAlpha(128);//from 0(0%) to 256(100%)
             getActionBar().setBackgroundDrawable(newColor);

in style.xml

<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo">
        <item name="android:windowActionBarOverlay">true</item>
    </style>
</resources>

score 0 · Answer 6 · answered Jan 14 '16 at 16:11

To set any theme action bar transparent as background image or color should be shown the best best and easy way to implement it.

        actionBar.setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(activity, android.R.color.transparent)));


    ImageView image = new ImageView(this);
    image.setTag(R.string.decore_view);
    image.setAdjustViewBounds(true);
    image.setScaleType(ImageView.ScaleType.CENTER_CROP);
    image.setLayoutParams(new ViewGroup.LayoutParams(-1, -1));
    image.setImageResource(R.drawable.home_bg);
    ((ViewGroup)((ViewGroup)getWindow().getDecorView())).addView(image, 0);

score 0 · Answer 7 · edited Jan 16 '17 at 22:10

0

ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

it worked well for me

edited Jan 16 '17 at 22:10

Andrew

3,545
4
31
37

answered Jul 18 '16 at 02:49

최봉재

4,039
3
16
21

score 0 · Answer 8 · answered Nov 07 '17 at 11:06

This is working fine on my case for making ActionBar transparent.

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#330000ff")));
getSupportActionBar().setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#550000ff")));

score -1 · Answer 9 · answered Aug 13 '14 at 23:05

<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionBarTabBarStyle">@style/MyActionBarTabBar</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

<style name="MyActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:titleTextStyle">@style/MyTheme.ActionBar.TitleTextStyle</item>
    <item name="android:background">@color/actionbar</item>
    <item name="android:backgroundStacked">@color/tabbar</item>


</style>

color/actionbar and color/tabbar color values which are transparent

Transparent Actionbar: custom tabcolor

9 Answers9

Linked

Related