Overlaying the Action Bar not working

Question

I was following official developer's guide to overlay actionbar.

my style.xml is as following:

<!-- Base application theme. -->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

<style name="AppTheme" parent="AppBaseTheme">
    <item name="actionBarStyle">@style/CustomActionBarTheme</item>

</style>

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

My midSdkVersion is 14 and expected output is similar to that on official guide: enter image description here .

instead, in my case the output is: enter image description here

(I have set background color to activity...but it isn't overlaying action bar.)

Please help me if anything I'm doing is wrong.

EDIT:

I wanted similar action bar like this in airnb and many other apps. Can anyone give me complete answer for this?

enter image description here

Please check your manifest file. You might using wrong theme instead of CustomActionBarTheme. — Shreyash Mahajan, Feb 10 '15 at 11:00
@iDroidExplorer can you write a complete answer with code? I'll appreciate it. thanks. — Krupal Shah, Feb 10 '15 at 12:37
you are setting the actionbar to be overlayed, but you did not set the background of the actionbar to be transparent. try adding `@drawable/actionbar_background` with `@drawable/actionbar_background` is a semi transparent png image — am05mhz, Feb 12 '15 at 10:56
@Krupal can you please update your question with code of your manifest file So that i can come to know the thing for which i am asking about... — Shreyash Mahajan, Feb 12 '15 at 12:41

score 38 · Accepted Answer · answered Jan 20 '15 at 19:17

38

I see some misunderstandings in your code:

windowActionBarOverlay should be specified on your theme not on your ActionBar's style.
No reason to use a Holo with a support theme. This just breaks your supportability.

Try this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:windowActionBarOverlay">true</item>
    <!--For compatibility-->
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="windowActionBarOverlay">true</item>
</style>

<color name="transparent_black">#80000000</color>
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar.Solid">
    <item name="android:background">@color/transparent_black</item>
    <!--For compatibility-->
    <item name="background">@color/transparent_black</item>
</style>

answered Jan 20 '15 at 19:17

Simas

43,548
10
88
116

1

I am not agree with your first point. because it is clearly mention that theme should be declared style and you can use it like below: https://developer.android.com/guide/topics/ui/themes.html#ApplyATheme – Shreyash Mahajan Feb 10 '15 at 10:58
I have used your solution and it is working fine. But title from `ActionBar` is gone. Can you help with that? – Bugs Happen Apr 23 '15 at 12:56
this is just perfect! – Hossam Alaa May 13 '16 at 12:35
add padding to the layout android:paddingTop="?android:attr/actionBarSize" – Nishant Rajput Jun 28 '16 at 08:40
2

The 'For compatibility' part did the trick, even when running on a device with API version 23.. the default full screen activity generated by android studio didn't add that! – Bruce Sep 18 '16 at 07:22

score 4 · Answer 2 · edited Feb 02 '18 at 17:05

i think you miss this point of developer guide

Enable Overlay Mode

For Android 3.0 and higher only

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>

For Android 2.1 and higher

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

        <!-- Support library compatibility -->
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

Specify Layout Top-margin

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?android:attr/actionBarSize">
    ...
</RelativeLayout>

and I have two example links Please have a Look on them for more clarification.

Android Tutorial: Overlay with User Instructions

Pushing the ActionBar to the Next Level

Perfect, if anyone is using Sliding Tabs and wants to show and hide the ActionBar on scroll, the key here is `android:paddingTop="?android:attr/actionBarSize"` — Skynet, Apr 20 '15 at 08:30

score 1 · Answer 3 · answered Jan 20 '15 at 18:52

Try this instead:

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

<style name="OverlayActionBarTheme" parent="AppBaseTheme">
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:actionBarStyle">@style/Holo.ActionBar.Overlay</item>
</style>

<style
    name="Holo.ActionBar.Overlay"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">#80000000</item>
</style>

score 1 · Answer 4 · answered May 20 '18 at 14:37

After searching for two hours I feel obliedged to add this answer here.

What did the trick for me was to add all 6 of the following lines to styles.xml:

    <item name="android:windowActionModeOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:windowActionBar">true</item>

    <item name="windowActionModeOverlay">true</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="windowActionBar">true</item>

As far as I understand all those lines do the same thing, but different API levels only listen for certain lines. I should mention that I use minimum API level 19.

score 0 · Answer 5 · answered Feb 12 '15 at 13:20

0

You just missed that you need to set up the overlaying in your application theme as said in the documention

 <!-- the theme applied to the application or activity -->

Please feed back if the problem isn't solve with that ;)

answered Feb 12 '15 at 13:20

Ektos974

999
10
30

score -1 · Answer 6 · answered Feb 11 '15 at 21:29

-1

I do completely custom views, so, the activity layout would fill all the screen and put custom LinearLayout at the top with all the buttons and icons inflated

answered Feb 11 '15 at 21:29

Iliiaz Akhmedov

867
7
17

Overlaying the Action Bar not working

EDIT:

6 Answers6

Linked