Implementing three actions inside a single menu item in Android

Question

I want to have similar menu item functionality as in the chrome browser for mobile as it is in the picture. I want to have back, forward, refresh menu items in a single row. How can I implement a similar menu item? is there any reference or is there is any hack to bring this functionality?

My app is aimed only for tablets. Here is my current Action bar menu item:

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:id="@+id/favorite"
    android:showAsAction="always"
    android:title="Happy"/>
<item
    android:id="@+id/share_button"
    android:icon="@drawable/share"
    android:showAsAction="always"
    android:title="Share"/>
<item
    android:id="@+id/hola_button"          
    android:showAsAction="always"
    android:title="Hola"/>
<item
    android:icon="@drawable/more_actions"
    android:showAsAction="always">
    <menu>
        <item
            android:id="@+id/back_button"
            android:icon="@drawable/back"
            android:title="back"/>
        <item
            android:id="@+id/forward_button"
            android:icon="@drawable/forward"
            android:title="forward"/>
        <item
            android:id="@+id/refresh_button"
            android:icon="@drawable/refresh"
            android:title="refresh"/>          
    </menu>
 </item>
 </menu>

Rationalism

Answer 1

This looks like a customized Dialog with a listview and a custom listheader

OR

a listview below a simple layout with 3 buttons on top within a dialog.

You could show the same on the actionbar menu item click.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    getSupportMenuInflater().inflate(R.menu.menu_items, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {
    case android.R.id.show_dlg:

    // Show your custom dialog
        break;
    }

    return super.onOptionsItemSelected(item);

}

Also this tutorial would help as a reference for inflating custom menus http://www.codeproject.com/Articles/173121/Android-Menus-My-Way

Kovar

Answer 2

EDIT:

This examples is as an OverflowMenu (since ABS ditched the overflow-theme). you can inflate any kind of layout-combinations. This class extends from PopUpWindow and doesn't use the typical onCreateOptions. It uses the ABS-CustomView and a PopUpWindow to create menu's.

From android reference: A popup window that can be used to display an arbitrary view. The popup window is a floating container that appears on top of the current activity.

The layout looks similar to your requested layout. This view is anchored to the ActionBar but you can display it anywhere you want. Popup window supports many show functions out of the box.

Customizable OverflowMenu

public class OverflowMenu extends PopupWindow {

private View mContentView;

public OverflowMenu(Context context, int resourceId) {
    super(context);
    mContentView = LayoutInflater.from(context).inflate(resourceId, null);
    setContentView(mContentView);
    setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
    setWidth(WindowManager.LayoutParams.WRAP_CONTENT);

    // Handle touchevents
    setOutsideTouchable(true);
    setFocusable(true);
    setBackgroundDrawable(new BitmapDrawable());
}

/**
 * Attach the OverflowMenu View to the ActionBar's Right corner
 * @param actionBarView
 */
public void show(View actionBarView) {
    int x = actionBarView.getMeasuredWidth() - mContentView.getMeasuredWidth();
    showAsDropDown(actionBarView, x, 0);
}

/**
 * Return mContentView, 
 *  used for mContentView.findViewById();
 * @return
 */
public View getView(){
    return mContentView;
}
}

MainActivity

public class MainActivity extends SherlockActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_mai n);

    final ActionBar actionBar = getSupportActionBar();
    actionBar.setCustomView(R.layout.actionbar);
    actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

    final OverflowMenu menu = new OverflowMenu(this,R.layout.menu_overflow);

    final ImageButton overflowBtn = (ImageButton) actionBar.getCustomView().findViewById(R.id.actionbar_overflow);
    overflowBtn.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            menu.show(actionBar.getCustomView());
        }
    });
  }


 }

Masbate

I have 6 menu items. 3 of them will be in Action bar and 3 of them should be under more actions hidden menu. I need this functionality only on the more actions menu. I will try this popupwindow and comeback. – Rationalism

This is a valid use-case, i suggest implementing a customView on ABS, and add 4 icons (the fourth being an overlow icon). when fourth is pressed you can show a popwindow or a popupmenuwindow. – Masbate

Answer 3

You could add the menu item to the page with something like this :

OptionCommand command = new OptionCommand();
command.setActionView(view);
command.setIcon(canvas.getContext().getResources().getDrawable(android.R.drawable.ic_menu_search));
command.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW);
canvas.getActivity().getOptionCommands().add(command);

Philbo