Android pop-up menu with icons (similar to Google Map app version 6)

Question

Does anyone know what component is used for the menu in the new version 6 of Google Map’s official app on Android?

I’m trying to build a menu similar to that, couldn’t find anything in the official dev pages (Note: I’m targeting Gingerbread APIs, possibly with backward compatibility up to 1.6.)

Here is the only picture I found of this menu (this is on ICS, but something similar is displayed on Gingerbread). Please have a look at the left screenshot here (from the Gizmodo site):

If there’s no built-in component, what approach would you follow to build one?

At worst, if no such component exist for Android 2.x, do you know whether the Google Map application itself is open-source, and where to find its source?

Answer 1

This should work down to API 4 (but not tested, YMMV). For example:

If you are using ActionBarSherlock, you can use the IcsListPopupWindow class. Set up some properties on it in onCreate. You'll need to subclass an ArrayAdapter as well.

in onCreate():

mPopupMenu = new IcsListPopupWindow(getContext());
mAdapter = new PopupMenuAdapter(this, android.R.layout.simple_list_item_1, yourArrayOfPopupMenuItems);
mPopupMenu.setAdapter(mAdapter);
mPopupMenu.setModal(true);
mPopupMenu.setOnItemClickListener(this);
mPopupMenu.setOnDismissListener(this); // only if you need it

Inner classes within your fragment/activity:

private class PopupMenuAdapter extends ArrayAdapter<PopupMenuItem> {

    Context context;
    int layoutResourceId;
    PopupMenuItem data[] = null;

    public PopupMenuAdapter(Context context, int layoutResourceId, PopupMenuItem[] data) {
        super(context, layoutResourceId, data);
        this.layoutResourceId = layoutResourceId;
        this.context = context;
        this.data = data;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = convertView;

        // initialize a view first
        if (view == null) {
            LayoutInflater inflater = ((Activity)context).getLayoutInflater();
            view = inflater.inflate(layoutResourceId, parent, false);
        }

        PopupMenuItem pItem = data[position];
        TextView text = (TextView)view.findViewById(android.R.id.text1);
        text.setText(pItem.textResId);
        text.setCompoundDrawablesWithIntrinsicBounds(pItem.iconResId, 0, 0, 0);

        return view;
    }
}

// ... PopupMenuItem is just a container

private static class PopupMenuItem {
    public int iconResId;
    public int textResId;

    public PopupMenuItem(int iconResId, int textResId) {
        this.iconResId = iconResId;
        this.textResId = textResId;
    }
}

Whenever you need to show it (such as in a a View.OnClickListener)

mPopupMenu.setContentWidth(getActivity().getWindowManager().getDefaultDisplay().getWidth() / 2);
PopupAdapter.notifyDataSetChanged(); // if you change anything
mPopupMenu.setAnchorView(yourAnchorView);
mPopupMenu.show();

In your OnItemClickListener

Make sure to call mPopupMenu.dismiss()!

Hope this helps! And thanks to Jake Wharton for ABS!