Android overflow menu positioned above actionbar/toolbar?

Question

I'm trying to get my overflow menu to appear below the top bar in my app. When I was using the Holo theme it did this just fine, but I'm trying to get my app to use material design using the appcompat v7 library.

So my theme now extends from AppCompat:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/ucla_blue</item>
        <item name="colorAccent">@color/caldroid_white</item>
        <item name="android:actionMenuTextColor">@color/caldroid_black</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>

And this properly does apply the material design theme to my toolbar in this layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearlayout_root_main"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawer_layout"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        tools:context="com.ucla.ieee.app.MainActivity">

        <LinearLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:orientation="vertical">

            <android.support.v7.widget.Toolbar
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:background="?attr/colorPrimary"
                android:id="@+id/toolbar"
                android:layout_height="wrap_content"
                android:layout_width="fill_parent"
                android:minHeight="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
            <!-- As the main content view, the view below consumes the entire
             space available using match_parent in both dimensions. -->
            <FrameLayout
                android:id="@+id/container"
                android:layout_height="match_parent"
                android:layout_width="match_parent"/>
        </LinearLayout>


        <!-- The navigation drawer -->
        <fragment
            android:id="@+id/navigation_drawer"
            android:layout_gravity="start"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            android:layout_width="@dimen/navigation_drawer_width"
            android:name="navigation.NavigationDrawerFragment"
            tools:layout="@layout/fragment_navigation_drawer"/>

    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

But for some reason, the menu I inflate in onCreateOptionsMenu appears in the wrong place. Apparently I can't post images but basically the overflow menu covers the toolbar instead of appearing just below the toolbar. This started happening when I use "Theme.AppCompat" first in a normal ActionBar and even now with a Toolbar.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            switch (selected) {
                case FRONT_PAGE:
                    toolbar.inflateMenu(R.menu.main_settings);
                    return false;
                case ANNOUNCEMENTS:
                    toolbar.inflateMenu(R.menu.refresh_settings);
                    return false;
                case MEMBERSHIP:
                    toolbar.inflateMenu(R.menu.edit_member);
                    return false;
                case CALENDAR:
                    toolbar.inflateMenu(R.menu.refresh_settings);
                    return false;
                case POINTS_REWARDS:
                    toolbar.inflateMenu(R.menu.main_settings);
                    return false;
                case HELP:
                    toolbar.inflateMenu(R.menu.main_settings);
                    return false;
                default:
                    toolbar.inflateMenu(R.menu.main_settings);
            }

Couldn't seem to find anyone experiencing this as well.

Here's an example of one of my menus:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.ucla_ieee.app.MainActivity">
    <item android:id="@+id/action_refresh"
          android:title="@string/action_refresh"
          app:showAsAction="never" />
</menu>

ianhanniballake · Accepted Answer · 2014-10-29T20:21:36.983

21

Per the Material Design specifications (see the Menus section):

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

Menu overlap app bar

So what you are seeing is the correct Material design for menus.

edited Oct 29 '14 at 20:21

answered Oct 29 '14 at 19:37

ianhanniballake

191,609
30
470
443

1

Thanks but I have already been doing this in my main activity. It's not that the menu doesn't work, it just looks wrong: http://i.imgur.com/0ybW1A9.png – Tania Oct 29 '14 at 20:17
Updated my answer given your screenshot: what you are seeing is a Material Design menu. – ianhanniballake Oct 29 '14 at 20:22
Oh darn, guess the apps I have that implemented Material Design gave me the wrong idea. Thanks!! – Tania Oct 29 '14 at 20:34
@Tania - many haven't moved to the official AppCompat or use an older version (most common among Google apps at this point) but the design specifications and the AppCompat v21 that was released as its code implementation should be considered the source of truth. – ianhanniballake Oct 29 '14 at 20:36
3

@ianhanniballake I'd suggest you give refresh an icon and add `android:showAsAction="ifRoom" app:showAsAction="ifRoom"` – Simon Oct 29 '14 at 21:19
hey @Tania you got any solution for this issue ? because i am also finding solution to place overflow below toolbar. any help appreciated. – Vishal Makasana Apr 06 '15 at 08:45

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

2

Check out the answer by @Girish Kumar at How I can place overflow menu below toolbar instead of overflow menu to overlaps the app bar. Shifting the overflow menu to the bottom of app bar is definitely possible.

edited May 23 '17 at 12:24

Community

1
1

answered Aug 21 '15 at 12:40

FingerSmith

379
3
13

score 2 · Answer 3 · answered Sep 15 '17 at 08:35

Some simple steps Go to android manifest file and search for the activity in which your dropdown menu is present, for mine it's welcome Activity Now press control and click on the theme name

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:theme="@style/AppTheme.NoActionBar">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

you will move to the styles file where your theme is written once you go there, you

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Now paste these two items there

<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">5.0dp</item>

and you are done...

P.S: Unfortunately I can't share the screenshot here, it seems like SO giving some error on adding images. But you can see on this link Image File

score 0 · Answer 4 · answered Jan 13 '16 at 11:26

0

If you change the theme of Activity in manifest than the overflow menu comes below the actionbar

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

answered Jan 13 '16 at 11:26

Jaffar Raza

176
3
10

Android overflow menu positioned above actionbar/toolbar?

4 Answers4

Linked

Related