Working with Android’s PopupMenu class
March 21, 2013, 2:42 AM PDT
Takeaway: Android’s PopupMenu widget takes all of the heavy lifting out of adding popup-like menu functionality in your apps. Here are the basics about PopupMenu.
On the Android operating system over the last several years, we have seen major overhauls in user interface (UI) and user experience. One pattern that has emerged and taken hold is the quick action or popup menu. These menus appear in context and can be attached to any view in your hierarchy in a non-intrusive manner.
Prior to Honeycomb, achieving a popup-like menu functionality inside your apps was quite a bit of work, but now the thoughtful folks on Google’s Android framework team have built a PopupMenu widget right into the UI kit that does all the heavy lifting. This tutorial will walk you through the basics of PopupMenu. Feel free to follow along with the step-by-step tutorial below or download and import the entire project into Eclipse.
1. Create a new Android project in Eclipse. The PopupMenu class requires you to target API level 11 or greater. Be sure to rename your startup activity to Main.java and the associate layout to main.xml.
2. In the /res/layout folder, modify main.xml. We will use a linear layout with a series of vertically stacked text views.
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="20sp"
android:textColor="#000000"
android:layout_margin="20dip"
android:text="Popup Menu Example" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Touch here to see the menu."
android:layout_margin="20dip"
android:layout_gravity="center"
android:textColor="#0000ff"
android:id="@+id/anchor"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:layout_gravity="center"
android:textSize="40sp"
android:textColor="#808080"
android:id="@+id/selection"/>
</LinearLayout>
3. Next we will work with Main.java in the /src folder. The main class extends activity and implements both an on click listener and the on menu item click listener. In the on create override we create a new menu and wire it up. The popup menu class is based on the common menu item entity, so if you’ve used context menus or standard menus it should look familiar.
Main.java
package com.authorwjf.popmenu;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.PopupMenu;
import android.widget.PopupMenu.OnMenuItemClickListener;
import android.widget.TextView;
import android.app.Activity;
public class Main extends Activity implements OnClickListener, OnMenuItemClickListener
{
private PopupMenu popupMenu;
private final static int ONE = 1;
private final static int TWO = 2;
private final static int THREE = 3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
popupMenu = new PopupMenu(this, findViewById(R.id.anchor));
popupMenu.getMenu().add(Menu.NONE, ONE, Menu.NONE, "Item 1");
popupMenu.getMenu().add(Menu.NONE, TWO, Menu.NONE, "Item 2");
popupMenu.getMenu().add(Menu.NONE, THREE, Menu.NONE, "Item 3");
popupMenu.setOnMenuItemClickListener(this);
findViewById(R.id.anchor).setOnClickListener(this);
}
}
4. In our on click handler we only need to show the popup menu. Android will take care of deciding whether to toggle the menu on or off, as well as lay it out on the screen so it does not obscure the view that acts as its anchor.
@Override
public void onClick(View v) {
popupMenu.show();
}
5. We want to update our display showing which item is selected using the appropriate callback.
@Override
public boolean onMenuItemClick(MenuItem item) {
TextView tv = (TextView) findViewById(R.id.selection);
switch (item.getItemId()) {
case ONE:
tv.setText("ONE");
break;
case TWO:
tv.setText("TWO");
break;
case THREE:
tv.setText("THREE");
break;
}
return false;
}
There we have it — a simple but elegant widget you can employ to enhance your applications. Load the sample code to a device or emulator and give it a try. Remember, the target needs to be running Honeycomb or better.
Figure A
Figure B
Figure C
Thanks
akm
cdacians
