Android Popup Menu Example

By | May 5, 2013
Android Popup Menu is a floating menu which displays a list of menu items on click of a view,which has a menu associated with it.

Lets see an example of how to create popup menu .

android radio button android radio button

Project Detail

Project Name PopupMenuDemo
Package com.pavan.popupmenudemo
Minimum SDK API 8
Target SDK API 17
Theme Holo Light with Dark Action Bar

1. XML Layout

Create popup_menu_demo.xml containing a button view having id=”popup_but_id” and text=”@string/Popup_button”(naming the button) .

file :- popup_menu_demo.xml

<RelativeLayout
     xmlns:android=”http://schemas.android.com/apk/res/android”
     xmlns:tools=”http://schemas.android.com/tools”
     android:layout_height=”match_parent”
     android:layout_width=”match_parent”    
     android:paddingbottom=”@dimen/activity_vertical_margin” 
     android:paddingleft=”@dimen/activity_horizontal_margin”
     android:paddingright=”@dimen/activity_horizontal_margin”
     android:paddingtop=”@dimen/activity_vertical_margin”
     tools:context=”.PopupMenuDemo” >

    <Button
          android:id=”@+id/popup_but_id”
          android:layout_alignparenttop=”true”    
          android:layout_centerhorizontal=”true”
          android:layout_height=”wrap_content”
          android:layout_margintop=”20dp”
          android:layout_width=”wrap_content”
          android:text=”@string/Popup_button” />
  
</RelativeLayout>

2. String Resource

  Define String Constants inside res/values/string.xml file

file:- string.xml

<string name=”app_name”>PopupMenuDemo</string>
<string name=”action_settings”>Settings</string>
<string name=”hello_world”>Hello world!</string>
<string name=”Popup_button”>Popup_Menu</string>
<string name=”menu_add”>Addition</string>
<string name=”menu_sub”>Substraction</string>
<string name=”menu_mul”>Multiplication</string>
<string name=”menu_div”>Division</string>

3. XML Layout For Menu

Create popup.xml file in res/menu and inside menu.xml file each menu item is assoicated with id which uniquely identifies each menu item and title which sets the name for menu item      

file :- popup.xml

<menu xmlns:android=”http://schemas.android.com/apk/res/android”>
  <item android:id=”@+id/add” android:title=”@string/menu_add” />
  <item android:id=”@+id/sub” android:title=”@string/menu_sub” />
  <item android:id=”@+id/mul” android:title=”@string/menu_mul” />
  <item android:id=”@+id/div” android:title=”@string/menu_div” />
</menu>

4. Activity

Create a PopupMenuDemo.class and extend it to activity class and override the onCreate() method of activity class and set the content of the actvity with the above defined xml file by call setContentView() method and passing xml file name as a parameter to it
 

                    setContentView(popup_menu_demo);

and get the id of the button view declared in popup_menu_demo.xml  

                    popupbut=(Button) findViewById(R.id.menu_but); 
 
file :- PopupMenuDemo.java

public class PopupMenuDemo extends Activity {

    Button popup_but;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.popup_menu_demo);
  popup_but = (Button) findViewById(R.id.popup_but_id);
 }

4.1 Inflating Menu


Now to make a menu.xml file to float up on click of button view , we need to set onclicklistener for button and inside the onclick method we call PopupMenu constructor and  pass application context and button as a parameter to it

                PopupMenu popup = new PopupMenu(PopupMenuDemo.this, popup_but);
              
To inflate the menu we call inflate method on MenuInflater object . 

 
                popup.getMenuInflater().inflate(R.menu.popup, popup.getMenu());

popup_but.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
   
    PopupMenu popup = new PopupMenu(PopupMenuDemo.this, popup_but);
    popup.getMenuInflater().inflate(R.menu.popup, popup.getMenu());
   }

4.2 Responding menu item click


Now to respond to menu item click we call setOnMenuItemClickListener on PopupMenu object ,inside this method we get to know which item is clicked by user by calling getItemId() on menuitem object .

  
and finally don’t forget to call show() method on popup menu object
                                popup.show();              

popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
     public boolean onMenuItemClick(MenuItem item) {
      Toast.makeText(PopupMenuDemo.this,
        “You Clicked : ” + item.getTitle(),
        Toast.LENGTH_SHORT).show();
      return true;
     }
    });
    popup.show();
   }
  });

Finally The Code Looks Like.

package com.pavan.popupmenudemo;
import android.app.Activity;
import android.os.Bundle;
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 PopupMenuDemo extends Activity {

 Button popup_but;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.popup_menu_demo);
  popup_but = (Button) findViewById(R.id.popup_but_id);
  popup_but.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
  
    PopupMenu popup = new PopupMenu(PopupMenuDemo.this, popup_but);
    popup.getMenuInflater().inflate(R.menu.popup, popup.getMenu());

    popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
     public boolean onMenuItemClick(MenuItem item) {
      Toast.makeText(PopupMenuDemo.this,
        “You Clicked : ” + item.getTitle(),
        Toast.LENGTH_SHORT).show();
      return true;
     }
    });

    popup.show();
   }
  });
 }
}

More on Menus

  1.  Android Options Menu .
  2.  Android Context Menu .
  3.  Android Sliding Menu .
  • how to add the image in popup menu?

  • I want to change width and height of menuItems can we do this anyhow?

  • how to use the popup menu in below API 9?

  • really nice and useful demo. can we use it in menu ?

  • Any solutions??