overflow menu shown as a contextual menu in android appcompat

Question

I am using android-support-v7-appcompat for backward compatibility as i want to use ActionBar in my app.I have added the menu in my .

Here is my menu.xml

   <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:DetailsPage="http://schemas.android.com/apk/res-auto" >

   <!--  <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"/> -->
    <item
        android:id="@+id/menu_item_search"
        DetailsPage:actionViewClass="android.support.v7.widget.SearchView"
        DetailsPage:showAsAction="always"
        android:icon="@drawable/abc_ic_search"
        android:title="Search Products">
    </item>
    <item
        android:id="@+id/root_menu"
        DetailsPage:showAsAction="always"
        android:icon="@drawable/abc_ic_menu_moreoverflow_normal_holo_light"
        android:title="More">
        <menu>
            <item
                android:id="@+id/menu_Home"
                DetailsPage:showAsAction="ifRoom|withText"
                android:icon="@drawable/abc_ic_search"
                android:showAsAction="ifRoom|withText"
                android:title="Home"/>
            <item
                android:id="@+id/menu_favourite"
                DetailsPage:showAsAction="ifRoom|withText"
                android:icon="@drawable/abc_ic_search"
                android:showAsAction="ifRoom|withText"
                android:title="favourite"/>
            <item
                android:id="@+id/menu_Balance"
                DetailsPage:showAsAction="ifRoom|withText"
                android:icon="@drawable/abc_ic_search"
                android:showAsAction="ifRoom|withText"
                android:title="Balance"/>
            <item
                android:id="@+id/menu_logout"
                android:icon="@drawable/abc_ic_search"
                DetailsPage:showAsAction="ifRoom|withText"
                android:showAsAction="ifRoom|withText"
                android:title="Logout"/>
        </menu>
    </item>

</menu>

In My Activity, i have extends my activity with ActionBarActivity and

Here is my onCreateOptionsMenu ::

public boolean  onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu, menu);
}

Currently on click of the menu item it is shown like this ::

Here the menu is displayed in 2.3.3 but as a contextual menu which i don't want.

What i want is (Captured in 4.2.2)

The code written above works perfectly and give me the desired result and also i can set the image alongwith menuitem,but if i run the same code in the 2.3 the same code gives me the menu as contextual menu.

so what i am missing? what changes i need to do achieve my desired output in 2.3 which i am getting in 3.0 + ?

Hope my question is clear...

any help/links will be appreciated....

Thanks in advance....

EDIT :: (after applying commonsware's answer)

modified menu.xml ( I hope i am understand it correctly)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:DetailsPage="http://schemas.android.com/apk/res-auto" >

    <item
        android:id="@+id/menu_item_search"
        DetailsPage:actionViewClass="android.support.v7.widget.SearchView"
        DetailsPage:showAsAction="never"
        android:icon="@drawable/abc_ic_search"
        android:title="Search Products">
    </item>
    <item
        android:id="@+id/menu_Home"
        DetailsPage:showAsAction="never"
        android:icon="@drawable/abc_ic_search"
        android:showAsAction="ifRoom|withText"
        android:title="Home"/>
    <item
        android:id="@+id/menu_favourite"
        DetailsPage:showAsAction="never"
        android:icon="@drawable/abc_ic_search"
        android:showAsAction="ifRoom|withText"
        android:title="favourite"/>
    <item
        android:id="@+id/menu_Balance"
        DetailsPage:showAsAction="never"
        android:icon="@drawable/abc_ic_search"
        android:showAsAction="ifRoom|withText"
        android:title="Balance"/>
    <item
        android:id="@+id/menu_logout"
        DetailsPage:showAsAction="never"
        android:icon="@drawable/abc_ic_search"
        android:showAsAction="ifRoom|withText"
        android:title="Logout"/>

</menu>

Output ::

Answer 1

Step #1: Remove the <item> whose icon is "@drawable/abc_ic_menu_moreoverflow_normal_holo_light

Step #2: Move the <item> elements that had been in the submenu of the above menu item into the main <menu> element

Step #3: For those you want to always appear in the overflow, use DetailsPage:showAsAction="never"

And you're done.

The overflow is not a submenu. The overflow is part of the regular action bar, which is why your submenu is interfering with your result.

Answer 2

I had one similar issue, and the way I solved it, was to use custom namespaces eg:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_settings"
        android:title="@string/settings"
        app:showAsAction="ifRoom|withText" />
    <item
        android:id="@+id/action_logout"
        android:title="@string/logout"
        app:showAsAction="always|withText" />
</menu>

However I don't know if this is the solution or a workaround.