Transparent Actiobar in android

Question

I am trying to give transparent effect to my action bar. I have used the following line to make it work that way, but strangely on my Nexus 5 I am can see the bar coming, but on my galaxy nexus I don't see it at all.

I am not sure why this is coming up on N5? How to solve this issue?

Here is the code:

    getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setDisplayShowHomeEnabled(false);
    ActionBar actionBar = getActionBar();
    actionBar.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    actionBar.setStackedBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
    setContentView(R.layout.profile);

Here is the screenshot for both Galaxy nexus running Jelly Bean (4.3) and Nexus 5 running kitkat (4.4.4)

Galaxy Nexus: showing transparent action bar perfectly:

enter image description here

Nexus 5: showing transparent action bar: (A horizontal line is shown)

enter image description here

Update 2:

I managed to remove the line on N5 by using the following style

  styles.xml in Values-v14 folder

  <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar"></style>
  <style name="CustomActionBarTheme" parent="@android:style/Theme.Holo"></style>

  then added theme to specific activity in manifext:

      <activity
        android:name=".Profile"
        android:label="@string/profile"
        android:theme="@style/CustomActionBarTheme"
        android:screenOrientation="portrait" >

but then all my text, dialog format have changed in this activity. It has become dark. It doesn't change even though I programatically change the theme for dialog. I am not sure what is wrong? Can someone help me out with this?

Update 1: As per @erakitn advice: I tried the following with few changes:

<!-- Transparent ActionBar Style -->
<style name="CustomThemeTransparent" parent="AppBaseTheme">
    <item name="android:background">@android:color/transparent</item>
    <item name="background">@android:color/transparent</item>
</style>

<!-- Activity Theme with transparent ActionBar -->
<style name="CustomThemeTransparentLight" parent="AppBaseTheme">
    <item name="android:actionBarStyle">@style/CustomThemeTransparent</item>
    <item name="actionBarStyle">@style/CustomThemeTransparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

I have getting the following error:

1. error: Error: No resource found that matches the given name: attr 'background'.
2. error: Error: No resource found that matches the given name: attr 'actionBarStyle'.
3. error: Error: No resource found that matches the given name: attr 'windowActionBarOverlay'.

i got your problem. you need to remove divider from [here][1]. [1]: http://stackoverflow.com/questions/18950839/i-want-to-remove-the-divider-under-the-action-bar — Imtiyaz Khalani, Aug 14 '14 at 07:50
@Imtiyaz: I already that link. That would be a solution for setting background image manually. That is not the case for me. i am setting the background dynamically. — TheDevMan, Aug 14 '14 at 08:07
@TheDevMan can you post a picture what the dialog looks like — Rod_Algonquin, Aug 19 '14 at 02:44
@Rod_Algonquin: Check this link: http://postimg.org/image/cqws7xf0n/ and http://postimg.org/image/ijrb2wbhj/ - It used be white now it has become dark with text color getting change accordingly - Thanks! — TheDevMan, Aug 19 '14 at 04:43
@TheDevMan post the creation of dialog and the minimum API of your application — Rod_Algonquin, Aug 19 '14 at 04:46
@Rod_Algonquin : Check this link which shows the dialog line:http://txs.io/9bqb Also my minimum API is 14 — TheDevMan, Aug 19 '14 at 04:53

erakitin · Accepted Answer · 2014-08-19T06:23:32.470

To remove ActionBar shadow try to add <item name="android:windowContentOverlay">@null</item> attribute to your Activity theme. Below there is an example of theme with transparent ActionBar. Define it in res/styles.xml:

<!-- Your App Theme-->
<style name="YourAppTheme.Light" parent="@style/Theme.AppCompat.Light">
    <...>
</style>

<!-- Transparent ActionBar Style -->
<style name="YourAppTheme.Light.ActionBar.Transparent" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="android:background">@android:color/transparent</item>
    <item name="background">@android:color/transparent</item>
</style>

<!-- Activity Theme with transparent ActionBar -->
<style name="YourAppTheme.TransparentActionBar.Light" parent="@style/YourAppTheme.Light">
    <item name="android:actionBarStyle">@style/YourAppTheme.Light.ActionBar.Transparent</item>
    <item name="actionBarStyle">@style/YourAppTheme.Light.ActionBar.Transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
</style>

And set this theme to your Activity:

<activity
    android:name="your.package.name.YourActivity"
    android:label="@string/app_name"
    android:theme="@style/YourAppTheme.TransparentActionBar.Light" />

UPD:

If you are not using AppCompat or ABS you should use HOLO theme as parent for your theme. It seems you use light theme with dark ActionBar. Please try following solution:

<!-- Your App Theme-->
<style name="YourAppTheme.Light" parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <...>
</style>

<!-- Transparent ActionBar Style -->
<style name="YourAppTheme.Light.ActionBar.Transparent" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@android:color/transparent</item>
</style>

<!-- Activity Theme with transparent ActionBar -->
<style name="YourAppTheme.TransparentActionBar.Light" parent="@style/YourAppTheme.Light">
    <item name="android:actionBarStyle">@style/YourAppTheme.Light.ActionBar.Transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

@ erakitin : I tried your code but I am getting a couple of errors: "error:Error: No resource found that matches the given name: attr 'background'." or "error: Error: No resource found that matches the given name: attr 'windowActionBarOverlay'." also "error: Error: No resource found that matches the given name: attr 'actionBarStyle'." - Please note: I am not using sherlock or AppCompat Theme. Please check my question for updated line of code that I am trying out. Thanks! — TheDevMan, Aug 19 '14 at 01:13
I managed to get the transparent working, but then my dialog, text format all have changed. This does not get changed even though I programmatically change it? Any idea how to fix this part? — TheDevMan, Aug 19 '14 at 02:20
@TheDevMan please see my updated answer. If this solution is not helpful to you post please your base app theme. And I will update my answer once again. — erakitin, Aug 19 '14 at 06:25
@PaulBurke yes, you are right! But I have no idea how to set it programmatically. — erakitin, Aug 19 '14 at 06:42

score 2 · Answer 2 · answered Aug 19 '14 at 09:20

Please don't change anything

Your original code is just fine. All you need to do is set/apply the following attribute:

android:windowContentOverlay = true

Again, don't change your theme/style. Define a new one like this:

<style name="ConOver" >    <<== no parent
    <item name="android:windowContentOverlay">@null</item>
</style>

Add this above your code:

// Add this line
// Lets you add new attribute values into the current theme
getTheme().applyStyle(R.style.ConOver, true);

// Rest stays the same
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setDisplayShowHomeEnabled(false);
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new 
                              ColorDrawable(android.graphics.Color.TRANSPARENT));
actionBar.setStackedBackgroundDrawable(new 
                              ColorDrawable(android.graphics.Color.TRANSPARENT));
setContentView(R.layout.profile);

Rod_Algonquin · Answer 3 · 2014-08-19T08:56:54.487

0

Since you are using DarkActionBar as a theme now the dialog will turn black all around because that is the style DarkActionBar is using.

You can style your dialog from default light theme of HOLO for dialogs.

sample:

final AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, android.R.style.Theme_Holo_Light_Dialog));

EDIT:

Change this:

<style name="CustomActionBarTheme" parent="@android:style/Theme.Holo"></style>

To

<style name="CustomActionBarTheme" parent="@android:style/Theme.Holo.Light"></style>

edited Aug 19 '14 at 08:56

answered Aug 19 '14 at 05:12

Rod_Algonquin

26,074
6
52
63

I tried it... but still the same. Changed it to – TheDevMan Aug 19 '14 at 05:38

Transparent Actiobar in android

3 Answers3