Android Popup Menus

• EmailShare

Popup menus in android are useful for displaying extended options associated with a specific action. For eg: ‘send’ action could have multiple extended options, like ‘send by email’ or ‘send by sms’ etc. Unlike android context menus they can be invoked by any event such a button click not just long clicks. They are associated with the specific view that invoked it and each view in an activity can have its own popup window.

Steps to create a Popup menu

• Create a new instance of PopupMenu class and pass the instance of the Context ( usually the current activity) and the view (for which the pop-up menu is desired) as arguments.
• Inflate the menu resource using:
  • popupMenu.inflate () if you are using Android 4.0 SDK and above (or)
  • MenuInflater class (popupMenu.getMenuInflater().inflate() method) if you are using Android 3.0 SDK
• Call popupMenu.show() to display the menu

Responding to menu item selections

Override the popupMenu.setOnMenuItemClickListener () method and provide a call back for handling user selections. The use selected menu item is passed in as argument to the callback method.

Example

Lets adapt the same example we saw for the android context menupreviously to use popup menus instead. What we have here is a single button that is wrapped inside a linear layout. Clicking the button invokes a popup menu that lets us change the background color for the button as shown in the sample screenshot.

Menu resource File

This is the same color menu resource file under res/menu folder that we used in android context menu example.

?

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">     <item android:id="@+id/menu_red" android:title="Red" />     <item android:id="@+id/menu_green" android:title="Green"/>     <item android:id="@+id/menu_blue" android:title="Blue"/> </menu>

Layout definition file

One single button within a linear layout.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"               android:orientation="vertical"               android:layout_width="match_parent"               android:layout_height="match_parent">       <Button android:id="@+id/popupMenuBtn"             android:layout_height="wrap_content"             android:layout_width="wrap_content"             android:text="Show me the Popup"             android:layout_gravity="center"             android:gravity="center"/> </LinearLayout>

Java Source Code

Nothing fancy here again. We just follow the 3 steps mentioned above for creating a context menu and define the menu handler to handle user selections.

• The button element acts as the view responsible for invoking the popup menu. Create a new instance of the popup menu and pass the activity and the button as arguments
• Inflate the menu resource and associate it with the popup menu instance.
• Call popupmenu.show () method within the onClick listener to display the menu when the user clicks the button.
• Override the popupMenu.setOnMenuItemClickListener () method to change the background color of the button based on user selections.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

public class MenuDemo extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.menudemo);         /**          * A Button that acts as the view element for the popup menu.          */         final Button btn = (Button) findViewById(R.id.popupMenuBtn);         /**          * Step 1: Create a new instance of popup menu          */         final PopupMenu popupMenu = new PopupMenu(this, btn);         /**          * Step 2: Inflate the menu resource. Here the menu resource is          * defined in the res/menu project folder          */         popupMenu.inflate(R.menu.color_menu);         /**          * Step 3: Call show() method on the popup menu to display the          * menu when the button is clicked.          */         btn.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 popupMenu.show();             }         });         /**          *  Handle menu item clicks          */         popupMenu.setOnMenuItemClickListener(                 new PopupMenu.OnMenuItemClickListener() {             @Override             public boolean onMenuItemClick(MenuItem item) {                 switch (item.getItemId()) {                     case R.id.menu_red:                         btn.setBackgroundResource(R.color.LightRed);                         break;                     case R.id.menu_blue:                         btn.setBackgroundResource(R.color.DullBlue);                         break;                     case R.id.menu_green:                         btn.setBackgroundResource(R.color.LightGreen);                         break;                 }                 return true;             }         });       } }

Happy Coding !!!

Thanks

akm

cdacians