Custom PopupMenu (layout)

Question

I'm trying to upgrade my PopupMenu so it would come with icons and custom styles.
I have created a new layout for it

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <RelativeLayout
        android:id="@+id/layout_sharea"
        android:background="@drawable/share"
        android:paddingLeft="10.0dip"
        android:paddingRight="10.0dip"
        android:layout_width="wrap_content"
        android:layout_height="50.0dip"
        android:onClick="share">
        <TextView
            android:id="@+id/sharetexta"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/share"
            android:drawableLeft="@drawable/share_button"
            android:drawablePadding="10.0dip"
            android:layout_centerVertical="true" />
     </RelativeLayout>
     <RelativeLayout
        android:id="@+id/layout_shareb"
        android:background="@drawable/share"
        android:paddingLeft="10.0dip"
        android:paddingRight="10.0dip"
        android:layout_width="wrap_content"
        android:layout_height="50.0dip"
        android:layout_below="@+id/layout_sharea"
        android:onClick="share">
        <TextView
            android:id="@+id/sharetextb"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/share"
            android:drawableLeft="@drawable/share_button"
            android:drawablePadding="10.0dip"
            android:layout_centerVertical="true" />
     </RelativeLayout>
</RelativeLayout>

I want the PopupMenu to be customized (to be this layout) like in this picture

Answer 1

A PopupMenu is meant for displaying Menus and there really isn't a good way of customizing the appearance of the menu items. If you want something more flexible, your answer is ListPopupWindow.

private static final String TITLE = "title";
private static final String ICON = "icon";

private List<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();

// Use this to add items to the list that the ListPopupWindow will use
private void addItem(String title, int iconResourceId) {
    HashMap<String, Object> map = new HashMap<String, Object>();
    map.put(TITLE, title);
    map.put(ICON, iconResourceId);
    data.add(map);
}

// Call this when you want to show the ListPopupWindow
private void showListMenu(View anchor) {
    ListPopupWindow popupWindow = new ListPopupWindow(this);

    ListAdapter adapter = new SimpleAdapter(
            this,
            data,
            android.R.layout.activity_list_item, // You may want to use your own cool layout
            new String[] {TITLE, ICON}, // These are just the keys that the data uses
            new int[] {android.R.id.text1, android.R.id.icon}); // The view ids to map the data to


    popupWindow.setAnchorView(anchor);
    popupWindow.setAdapter(adapter);
    popupWindow.setWidth(400); // note: don't use pixels, use a dimen resource
    popupWindow.setOnItemClickListener(myListener); // the callback for when a list item is selected
    popupWindow.show();
}

Answer 2

Here is my demo for custom ListPopupWindow by custom adapter

Model

public class ListPopupItem {
    private String title;
    private int imageRes;

    public ListPopupItem(String title, int imageRes) {
        this.title = title;
        this.imageRes = imageRes;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public int getImageRes() {
        return imageRes;
    }
}

ListAdapter

public class ListPopupWindowAdapter extends BaseAdapter {
    private List<ListPopupItem> items;

    public ListPopupWindowAdapter(List<ListPopupItem> items) {
        this.items = items;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public ListPopupItem getItem(int i) {
        return items.get(i);
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_list_popup, null);
            holder = new ViewHolder(convertView);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.tvTitle.setText(getItem(position).getTitle());
        holder.ivImage.setImageResource(getItem(position).getImageRes());
        return convertView;
    }

    static class ViewHolder {
        TextView tvTitle;
        ImageView ivImage;

        ViewHolder(View view) {
            tvTitle = view.findViewById(R.id.text);
            ivImage = view.findViewById(R.id.image);
        }
    }
}

item_list_popup.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="ContentDescription"
        tools:src="@mipmap/ic_launcher"
        />
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        tools:text="Title"
        />
</LinearLayout>

Finally, show ListPopupWindow
(In this demo, I show MATCH_PARENT popup here, you can show a specific with for popup (eg: 100px, 200px,...) If you set popup width = WRAP_CONTENT, popup width will equals ANCHOR width)

private void showListPopupWindow(View anchor) {
    List<ListPopupItem> listPopupItems = new ArrayList<>();
    listPopupItems.add(new ListPopupItem("Menu 1", R.mipmap.ic_launcher));
    listPopupItems.add(new ListPopupItem("Menu 2", R.mipmap.ic_launcher));
    listPopupItems.add(new ListPopupItem("Menu 3", R.mipmap.ic_launcher));

    final ListPopupWindow listPopupWindow =
            createListPopupWindow(anchor, ViewGroup.LayoutParams.MATCH_PARENT, listPopupItems);
    listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            listPopupWindow.dismiss();
            Toast.makeText(MainActivity.this, "clicked at " + position, Toast.LENGTH_SHORT)
                    .show();
        }
    });
    listPopupWindow.show();
}

private ListPopupWindow createListPopupWindow(View anchor, int width,
        List<ListPopupItem> items) {
    final ListPopupWindow popup = new ListPopupWindow(this);
    ListAdapter adapter = new ListPopupWindowAdapter(items);
    popup.setAnchorView(anchor);
    popup.setWidth(width);
    popup.setAdapter(adapter);
    return popup;
}

Example using

button.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View view) {
            showListPopupWindow(view);
       }
});

DEMO