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?

Answer 1

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>