Why is my overflow dropdown menu on top of the actionbar?

Question

dropdown list on top of actionbar

By default isn't it supposed to be under the actionbar? So what am I doing wrong?

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

res/menu/main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.test.MainActivity" >

<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    app:showAsAction="never"/>
</menu>

I've the same problem with a fresh installed and updated SDK on Windows 7 (with a new and clean "Hello World" test project). I can't figure it out. On my Linux machine it works, but this SDK is a little bit older. Hope someone can help! — Tuksn, Dec 07 '14 at 20:26
With Material Design the popup menu is always placed on top of the `ActionBar`. Just look at Googles apps which already use Material Design. — Xaver Kapeller, Dec 07 '14 at 20:30

Nikola Despotoski · Answer 1 · 2014-12-08T03:12:54.660

14

This is default behaviour of AppCompat theme you are using. According to the Material Design guidelines, it is expected overflow menu to appear on top of it's anchor, the ActionBar.

You can force it to show below the action bar if by setting to your theme overlapAnchor to false

   <style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow" >
         <item name="overlapAnchor">false</item>
         <item name="dropDownVerticalOffset">?attr/actionBarSize</item>
    </style>

edited Dec 08 '14 at 03:12

answered Dec 07 '14 at 20:36

Nikola Despotoski

49,966
15
119
148

I didn't know you could force the menu below the `ActionBar`, that's very interesting. But one should mention that it is normally a bad idea to deviate from the guidelines. – Xaver Kapeller Dec 07 '14 at 20:54
I mentioned that already, read my answer again, that it is expected to be overlapped. – Nikola Despotoski Dec 07 '14 at 20:56
Doesn't work for me. I am on `API level 21`. `dropDownVerticalOffset` is not found. So I used `android:dropDownVerticalOffset` instead. But still doesn't work. – TechSpellBound Apr 01 '15 at 16:18
OK! @Tuksn's answer worked for me.. Although you have added `dropDownVerticalOffset` to the solution, it seems you just want to show that the offset can be given. Also, **I would like to highlight that the offset starts from the bottom of the actionbar**. – TechSpellBound Apr 01 '15 at 16:23

score 12 · Answer 2 · edited May 23 '17 at 12:10

Finally this works for me:

<resources>
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light" />

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="actionOverflowMenuStyle">@style/OverflowMenu</item>
    </style>

    <style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
        <!-- Required for pre-Lollipop. -->
        <item name="overlapAnchor">false</item>

        <!-- Required for Lollipop. -->
        <item name="android:overlapAnchor">false</item>
    </style>

</resources>

Source: https://stackoverflow.com/a/27134045/3586815

Thanks to Nikola Despotoski for the hint.

Thanks for a full answer as opposed to other answers in the question! — TechSpellBound, Apr 01 '15 at 16:26

Alex Lockwood · Accepted Answer · 2014-12-07T20:57:11.667

7

According to the Material Design specifications, the overflow menu should display on top of the action bar:

A menu is a temporary sheet of paper that always overlaps the app bar, rather than behaving as an extension of the app bar.

enter image description here

This is the default behavior for Android Lollipop applications as well as any applications that use the AppCompat v7 support library.

edited Dec 07 '14 at 20:57

answered Dec 07 '14 at 20:32

Alex Lockwood

83,063
39
206
250

score 1 · Answer 4 · answered Dec 07 '14 at 20:33

This is the new default with Material Design. Popup menus will be displayed originating from the Button which opened them.

This is done to increase the visual connection between the Button and the popup menu. Just look at Googles apps which already use Material Design, there the popup menus act in the same way.

Why is my overflow dropdown menu on top of the actionbar?

4 Answers4

Linked