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.

Answer 2

import android.os.Bundle;  
import android.app.Activity;  
import android.view.Menu;  
import android.view.MenuItem;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.widget.Button;  
import android.widget.PopupMenu;  
import android.widget.Toast;  
public class MainActivity extends Activity {  
Button button1;  

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

          button1 = (Button) findViewById(R.id.button1);//your created butto
          button1.setOnClickListener(new OnClickListener() {  

           @Override  
           public void onClick(View v) {  
            //Creating the instance of PopupMenu  
            PopupMenu popup = new PopupMenu(MainActivity.this, button1);  
            //Inflating the Popup using xml file  
            popup.getMenuInflater().inflate(R.menu.popup_menu, popup.getMenu());  

            //registering popup with OnMenuItemClickListener  
            popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {  
             public boolean onMenuItemClick(MenuItem item) {  
              Toast.makeText(MainActivity.this,"You Clicked : " + item.getTitle(),Toast.LENGTH_SHORT).show();  
              return true;  
             }  
            });  

            popup.show();//showing popup menu  
           }  
          });//closing the setOnClickListener method  
         }  
    }