How to show menu popup exact below actionbar?

Question

I am working on popup-menu in actionbar. But I am stuck to display exact below of actionbar(cut-to-cut).I am putting two snapshot.

My issue screen shot:

I want exact popup menu below of actionbar as below screenshot

Correction screenshot:

My code snippet:

<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=".MainActivity">
<item android:id="@+id/action_filter"
    android:icon="@drawable/ic_filter_white_18dp"
    android:title="@string/action_filter"
    app:showAsAction="ifRoom" />
<item android:id="@+id/action_label"
    android:icon="@drawable/ic_add_circle_outline_white_18dp"
    android:title="@string/action_label"
    app:showAsAction="ifRoom" />
<item android:id="@+id/action_settings"
    android:title="@string/action_settings"
    app:showAsAction="never" />

Archle

Please don't post screenshots or link. Post your code instead – Koral

i put my code snippet in my question. – Archle

Answer 1

Set the theme at android manifest to

android:theme="@android:style/Theme.Holo.Light"

Forefend

Answer 2

When working with AppCompat Theme, below code help you.Either Kitkat or Lollipop

Make your style.xml like below

<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/black</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="actionOverflowMenuStyle">@style/OverflowMenu</item>
</style>


<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
    <item name="android:windowDisablePreview">true</item>
    <item name="overlapAnchor">false</item>
    <item name="android:dropDownVerticalOffset">5.0dp</item>
    <!--<item name="android:popupBackground">#FFF</item>-->
</style>

Coenurus

I was using the parent "Widget.AppCompat.PopupMenu" instead of "Widget.AppCompat.PopupMenu.Overflow" after adding .Overflow, the overlapAnchor anchor properties started working. – Leges

Answer 3

If you want to keep using ActionBar and AppCompat theme rather than ToolBar or Holo theme, you can use this code:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionOverflowMenuStyle">@style/MyOverflowMenu</item>
</style>

<style name="MyOverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
    <item name="overlapAnchor">false</item>
    <item name="android:overlapAnchor" tools:ignore="NewApi">false</item>
    <item name="android:dropDownVerticalOffset">4.0dip</item>
</style>

This worked for me.

Novella

Worked for me. Tested on Android 4.x, 6.x. Thanks! – Barefoot

Answer 4

As per my code this is exact sotution by changing style.

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionMenuTextColor">@color/text_white</item>
    <item name="android:popupMenuStyle">@style/PopupMenu.Example</item>
    <item name="actionOverflowMenuStyle">@style/OverflowMenu</item>
</style>

<style name="PopupMenu.Example" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">#efefef</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>
    <item name="android:dropDownVerticalOffset">4.0dip</item>

</style>

Archle

Adding the offset was creating extra space between Toolbar and menu in Android 4.4.4. – Nobleminded

i didn't use toolbar here,i used actionbar. – Archle

Answer 5

You can achieve this by style property overlapAnchor= false

 <style name="toolBarStyle" parent="AppTheme">
        <item name="popupTheme">@style/toolbarPopup</item>
    </style>

    <style name="toolbarPopup" parent="@android:style/Widget.Holo.ListPopupWindow">  <!--ThemeOverlay.AppCompat.Light-->
        <item name="android:popupBackground">#AF0000</item>
        <item name="overlapAnchor">false</item>
        <item name="android:dropDownVerticalOffset">5dp</item>

    </style>

and set that style in AppTheme like below

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--   to avoid overlay of popup window in toolbar -->
        <item name="actionOverflowMenuStyle">@style/toolBarStyle</item>
</style>

Asymptote

"overlapAnchor" requires minimum API level 21 – Cogon