Android create custom overflow menu item

Question

I want to create a custom overflow menu item in my ActionBar in addition at the Setting item like described in the image below:

But if there is few space in the ActionBar I don't want that the Item1 and Item2 go into the Setting item as overflow, but into "my overflow item".

this is my menu xml code:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:icon="@android:drawable/ic_menu_agenda"  
    android:title="Item1"
    android:showAsAction="ifRoom|withText" />

<item
    android:icon="@android:drawable/ic_menu_add"  
    android:title="Item2"
    android:showAsAction="ifRoom|withText" />

<item android:id="@+id/pick_action_provider"
    android:icon="@android:drawable/ic_menu_sort_by_size" 
    android:showAsAction="always"
    android:title="Overflow" >
     <menu>  
        <item android:id="@+id/action_sort_size"  
              android:icon="@android:drawable/ic_menu_camera"  
              android:title="Item3" />  
        <item android:id="@+id/action_sort_alpha"  
              android:icon="@android:drawable/ic_menu_sort_alphabetically"  
              android:title="Item4" />  
    </menu>  
</item>

<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:showAsAction="never"
    android:title="@string/action_settings"/></menu>

Answer 1

This will help you. I had coded this for overflow menu

In menu/main.xml file

<item
    android:id="@+id/overflow"
    android:orderInCategory="100"
    android:showAsAction="always"
    android:icon="@drawable/ic_overflow"
    android:title="">
    <menu>
        <item
            android:id="@+id/facebook"
            android:title="Facebook"/>

        <item
            android:id="@+id/Twitter"
            android:title="Twitter"/>

        <item
            android:id="@+id/Youtube"
            android:title="Youtube"/>
    </menu>
</item>

And here is your java code:

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    getMenuInflater().inflate(R.menu.main, menu);

    return true;

}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    // Handle action bar actions click

    super.onOptionsItemSelected(item);
    if(item.getItemId() == R.id.facebook){
        Toast.makeText(Getstarted.this, "Option pressed= facebook",Toast.LENGTH_LONG).show();
    }
    else if(item.getItemId() == R.id.Youtube){
        Toast.makeText(Getstarted.this, "Option pressed= youtube",Toast.LENGTH_LONG).show();
    }
    else if(item.getItemId() == R.id.Twitter){
        Toast.makeText(Getstarted.this, "Option pressed= twitter",Toast.LENGTH_LONG).show();
    }
    return true;    

}

Answer 2

See these links

http://www.codeproject.com/Articles/173121/Android-Menus-My-Way

http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown

and i suggest you to use actionbarsherlock to create a custom overflow menu

See this answer to know how to create overflow menu item using actionbar sherlock

ActionbarSherlock does not include "overflow" section of Action Bar (on Android 2.1)

Answer 3

Create a style for the overflow menu and pass in a content description

<style name="Widget.ActionButton.Overflow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:contentDescription">@string/accessibility_overflow</item>
</style>

<style name="Your.Theme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <item name="android:actionOverflowButtonStyle">@style/Widget.ActionButton.Overflow</item>
</style>

Call ViewGroup.findViewsWithText and pass in your content description. Somewhat like this:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // The content description used to locate the overflow button
    final String overflowDesc = getString(R.string.accessibility_overflow);
    // The top-level window
    final ViewGroup decor = (ViewGroup) getWindow().getDecorView();
    // Wait a moment to ensure the overflow button can be located
    decor.postDelayed(new Runnable() {

        @Override
        public void run() {
            // The List that contains the matching views
            final ArrayList<View> outViews = new ArrayList<>();
            // Traverse the view-hierarchy and locate the overflow button
            decor.findViewsWithText(outViews, overflowDesc,
                    View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
            // Guard against any errors
            if (outViews.isEmpty()) {
                return;
            }
            // Do something with the view
            final ImageButton overflow = (ImageButton) outViews.get(0);
            overflow.setImageResource(R.drawable.ic_action_overflow);

        }

    }, 1000);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Add a dummy item to the overflow menu
    menu.add("Overflow");
    return super.onCreateOptionsMenu(menu);
}

View.findViewsWithText was added in API level 14 only. So please try to do a method by you own as like this:

public static void findViewsWithText(List<View> outViews, ViewGroup parent, String targetDescription) {
    if (parent == null || TextUtils.isEmpty(targetDescription)) {
        return;
    }
    final int count = parent.getChildCount();
    for (int i = 0; i < count; i++) {
        final View child = parent.getChildAt(i);
        final CharSequence desc = child.getContentDescription();
        if (!TextUtils.isEmpty(desc) && targetDescription.equals(desc.toString())) {
            outViews.add(child);
        } else if (child instanceof ViewGroup && child.getVisibility() == View.VISIBLE) {
            findViewsWithText(outViews, (ViewGroup) child, targetDescription);
        }
    }
}

This is not a tested code. So if there any issues while you implemented,please let me know.

Answer 4

when click item from actionbar

PopupMenu popup = new PopupMenu(MainActivity.this, v);
popup.getMenuInflater().inflate(
                            R.mymenu xml , popup.getMenu());



mymenu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:icon="@android:drawable/ic_menu_agenda"  
    android:title="Item1"
     android:showAsAction="ifRoom" />

<item
    android:icon="@android:drawable/ic_menu_add"  
    android:title="Item2"
    android:showAsAction="ifRoom" />

<item android:id="@+id/pick_action_provider"
    android:icon="@android:drawable/ic_menu_sort_by_size" 
    android:showAsAction="ifRoom"
    android:title="Overflow" >
     <menu>  
        <item android:id="@+id/action_sort_size"  
        android:showAsAction="ifRoom|withText"
              android:icon="@android:drawable/ic_menu_camera"  
              android:title="Item3" />  
        <item android:id="@+id/action_sort_alpha" 
android:showAsAction="ifRoom|withText"      
              android:icon="@android:drawable/ic_menu_sort_alphabetically"  
              android:title="Item4" />  
    </menu>  
</item>

<item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
   android:showAsAction="ifRoom"
    android:title="@string/action_settings"/></menu>

Answer 5

You most probably have to remove the setting item in the menu i.e. @+id/action_settings.

If you still want it to be there, just remove it's "showAsActionAttribute" or exchange it to

android:showAsAction="always"

For Item1 and Item2: Add their showAsAction attributes as android:showAsAction="ifRoom|withText"

Hope that helps.

Answer 6

menu.xml:

<item android:id="@+id/game"
      android:icon="@drawable/menu_addnew"
      android:title="game"
      android:showAsAction="ifRoom"/>
<item android:id="@+id/help"
      android:icon="@drawable/menu_addnew"
      android:title="help" />

abc.class file makes these changes:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.game_menu, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle item selection
    switch (item.getItemId()) {
        case R.id.game:
            Game();
            return true;
        case R.id.help:
            Help();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

See Menus documentation.