How to create a custom PopupMenu in Android

Question

How can I replicate something like I made below in Balsamiq?

I made this menu, but it is only displaying the text of the items (not the icons). Is it possible to display both the title and icon in a PopupMenu?

Here is my create_post_menu.xml

<?xml version="1.0" encoding="utf-8"?>

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

    <item
        android:id="@+id/action_photo"
        android:icon="@drawable/ic_action_camera"
        android:title="@string/action_photo"
        android:showAsAction="always|withText" />

    <item
        android:id="@+id/action_video"
        android:icon="@drawable/ic_action_video"
        android:title="@string/action_video"
        android:showAsAction="always|withText" />

    <item
        android:id="@+id/action_text"
        android:icon="@drawable/ic_action_edit"
        android:title="@string/action_text"
        android:showAsAction="always|withText" />

    <item
        android:id="@+id/action_link"
        android:icon="@drawable/ic_action_web_site"
        android:title="@string/action_link"
        android:showAsAction="always|withText" />

</menu>

Edit

Here are my onCreateOptionsMenu and onOptionsItemSelected methods:

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == R.id.action_new) {
        View menuItemView = findViewById(R.id.action_new);
        PopupMenu popupMenu = new PopupMenu(this, menuItemView);
        popupMenu.inflate(R.menu.create_post_menu);
        popupMenu.show();
        return true;
    } else if(item.getItemId() == R.id.action_search) {
        return true;
    } else if(item.getItemId() == R.id.action_settings) {
        startActivity(new Intent(MainActivity.this, SettingsActivity.class));
        return true;
    } else if(item.getItemId() == R.id.action_help) {
        return true;
    } else {
        return super.onOptionsItemSelected(item);
    }
}

Answer 1

I resolved this issue by simply putting the create_post_menu inside of the item whose icon is a +.

For example, I have (using AppCompat):

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

    <item
            android:id="@+id/action_new"
            android:icon="@drawable/ic_action_new"
            android:title="@string/action_new"
            app:showAsAction="always">

            <menu>

                <item
                    android:id="@+id/action_photo"
                    android:icon="@drawable/ic_action_camera"
                    android:title="@string/action_photo"
                    app:showAsAction="always|withText" />
                <item
                    android:id="@+id/action_video"
                    android:icon="@drawable/ic_action_video"
                    android:title="@string/action_video"
                    app:showAsAction="always|withText" />
                <item
                    android:id="@+id/action_text"
                    android:icon="@drawable/ic_action_text"
                    android:title="@string/action_text"
                    app:showAsAction="always|withText" />
                <item
                    android:id="@+id/action_place"
                    android:icon="@drawable/ic_action_place"
                    android:title="@string/action_place"
                    app:showAsAction="always|withText" />
                <item
                    android:id="@+id/action_more"
                    android:title="@string/action_more"
                    android:visible="false"
                    app:showAsAction="always|withText" />

            </menu>
        </item>
        ...(more menu items here)
</menu>

Without AppCompat, you could just get rid of the XML Namespace app by replacing app with android.