9

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?

gotwo
  • 663
  • 8
  • 16
android developer
  • 114,585
  • 152
  • 739
  • 1,270
  • 1
    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 Nov 25 '14 at 00:10
  • @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 Nov 25 '14 at 00:15
  • You can write a Material designed app without using AppCompat or the actual Material theme: those apps that **do** use AppCompat/Material theme only show popup menus overlaying the button. – ianhanniballake Nov 25 '14 at 00:17
  • 1
    Are you extending AppCompat for your app theme? – alanv Nov 25 '14 at 00:30
  • 1
    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 Nov 25 '14 at 00:32
  • @androiddeveloper `overlapAnchor` is what you're looking for. Try removing the `android` prefix before applying your `actionOverflowMenuStyle` and make sure you extend an `AppCompat` theme. See [`PopupWindow`](https://github.com/android/platform_frameworks_base/blob/master/core/java/android/widget/PopupWindow.java#L1178) and [`AppCompatPopupWindow`](https://github.com/android/platform_frameworks_support/blob/master/v7/appcompat/src/android/support/v7/internal/widget/AppCompatPopupWindow.java#L48) – adneal Nov 25 '14 at 00:35
  • I dont understand the problem, you chose too open the overflow menu so why would you want the other item to be visible when you cannot interact with them anyway until you close the overflow menu – tyczj Nov 25 '14 at 03:24
  • @alanv I've tried both the AppCompat theme and the Material theme. Both had those issues, and I've tried setting the attributes on both. What do you mean "the default overlap behavior is correct" ? Please explain why do you think it's better, as I've written multiple reasons for why it's wrong (on the post: https://code.google.com/p/android-developer-preview/issues/detail?id=1951 ), and as I've expected, it causes accidental selections by users. Also, Google doesn't seem to follow this rule, so it does make sense to use the previous behavior. – android developer Nov 25 '14 at 06:24
  • @adneal That's the first guess I had, but maybe I was doing it wrong. Can you please post a sample that you've found to be working? – android developer Nov 25 '14 at 06:25
  • @tyczj See this post I've written for the reasons of why it's a problem: https://code.google.com/p/android-developer-preview/issues/detail?id=1951 . Also search in the website for issues regarding the overflow menu. I've noticed at least one that describes the same problem as I've written (people accidentally choosing the first item). – android developer Nov 25 '14 at 06:27
  • 1
    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 Nov 25 '14 at 07:59
  • @alanv The theme is pretty large (and its parent is "Theme.AppCompat.Light.NoActionBar" ) , so I've now made a tiny sample app to show this issue. updated the question. It occurs even for "Theme.AppCompat.Light" . If I solve it there, it will (I hope) work for my app too. – android developer Nov 25 '14 at 17:11

1 Answers1

22

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>
alanv
  • 23,966
  • 4
  • 93
  • 80