How to make the overflow popup menu avoid obstructing the action bar?

Question

Background

On my app, when I've updated to the new support library and also tried on Lollipop, I've noticed a weird issue: when clicking on the overflow button of the action bar (or even the new Toolbar class) will show the popup menu on top of the action bar, hiding other action items, as such:

Here, the action items that got hidden are uninstallation and sharing.

The problem

I've tried to avoid this issue, by ovverriding the style of the overflow menu, but nothing has helped.

Not only that, but it seems this is an intentional behavior, yet in many Google apps that were updated to have Material design, this behavior doesn't hold, as I've reported here.

What I've tried

I've tried creating this in the theme I use . Actually my theme is very different and its parent is "Theme.AppCompat.Light.NoActionBar" (and I use the Toolbar as the actionBar), but this snippet has this issue too, so I think that if one will be solved the other will too.

Anyway, here's the snippet:

<resources xmlns:tools="http://schemas.android.com/tools">

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

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="android:actionOverflowMenuStyle" tools:targetApi="21">@style/OverflowMenu</item>
    </style>

    <style name="OverflowMenu" parent="@android:style/Widget.Material.PopupMenu.Overflow" tools:targetApi="21">
        <item name="android:overlapAnchor">false</item>
        <item name="android:dropDownVerticalOffset">50dip</item>
    </style>

</resources>

Both attributes didn't change anything.

I've also tried looking for how it works in the support library, but couldn't find it.

The question

How do I make the popup menu of the overflow action item to avoid hiding other item?

The Material theme (not the same as Material design) and AppCompat follow the standards laid out in the design documents. Specifically breaking the design guidelines isn't something either of those allow you to do. — ianhanniballake
@ianhanniballake Please read all that I've written. That's something that even the material-design apps of Google doesn't do. Also, it causes other issues (which I've warned about) that other people have reported. — android developer
Also, side note, as the Android framework engineer who wrote the Material Design styles and themes, I can assure you that the default overlap behavior is correct. — alanv
Could you include a snippet of XML for your app theme? If you're targeting Material and using the built-in ActionBar, the XML that you've posted ought to work. — alanv

alanv alanv · Accepted Answer · 2014-11-25T18:27:46

If you're using ActionBarActivity, you'll need to override the appcompat version of the overflow menu style along with the appcompat versions of the popup attributes, where applicable.

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