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
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
Android popup menu exampleLets adapt the same example we saw for the android context menuAbout this nasa baba previously 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.
Code: Select all
<?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>One single button within a linear layout.
Code: Select all
<?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>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.
Code: Select all
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) {
<span class="skimlinks-unlinked">popupMenu.show</span>();
}
});
/**
* 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 !!!
Android Context Menus :freedom
Context menus are invoked in android when user performs a long click ( click and hold). While the Options menu is associated with a specific activity, context menus are associated with specific views within the activity. Thus an activity can have only one options menu but many context menus.
Context Menu Creation
To create a context menu, you need to:
- Register the view element to use a Context menu using the registerForContextMenu (View v)
- Override the onCreateContextMenu ()method. The method takes 3 arguments:
- A default ContextMenu object,
-The view element for which the context menu is desired and
- A ContextMenuInfo object that can be used to pass any additional information that can used for creation of the Context Menu.
To respond to context menus override the onContextItemSelected () method . The menu item that was selected is passed in as a argument to this method.
Example
Lets look at the context menu usage with a simple example. In this example we have an activity with two TextView elements, one with the context menu and the other without. The context menu lets us choose the background color of the TextView element as shown in the sample screenshot below.
Context Menu Definition
Menus are also resources in android. To define a menu create a file called “color_menu.xml” and place it under res/menu folder. As shown below, you define the menu inside the menu tag and populate the menu items using the item tag. You need to specify a valid id for each menu item. This is used to respond to menu item selections as shown later below.
Code: Select all
<?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>
The activity layout is simple and consists of a linear layout with two TextView elements within it as shown.
Code: Select all
<?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">
<TextView android:id="@+id/context_color"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_margin="5dip"
android:textColor="@color/DarkGrey"
android:text="Color Context Menu ( Click and Hold)"
/>
<TextView android:id="@+id/menuDemoDiv1"
android:layout_height="1dip"
android:layout_width="match_parent"
android:background="@color/white"
android:textColor="@color/DarkGrey"
android:text=""/>
<TextView android:id="@+id/menu_textView2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_margin="5dip"
android:textColor="@color/DarkGrey"
android:text="TextView with no context Menu"
/>
</LinearLayout>
- Register the first TextView element to use the ContextMenu within the onCreate() method of the activity
- Override the onCreateContextMenu() method to create the context menu. The general pattern is to use the id of the view element to generate different menus. In this case we delegate the menu creation to a private helper method. This method uses the MenuInflater instance available to the activity to inflate the color menu defined as a xml resource. Just as with layout files, android automatically generate unique ids for the menu resources based on the name of the file which is then passed into the getMenuInflater (). inflate ()method.
- You can respond to the menu selections by switching on the id of the MenuItem being passed as argument to the onContextItemSelected () method. In this case we change the background color of the TextView element based on the selection.
Code: Select all
public class MenuDemo extends Activity {
private TextView m_contextColor;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.menudemo);
m_contextColor = (TextView) findViewById(R.id.context_color);
/**
* Register the View elements in the activity to generate
* Context menus
*/
registerForContextMenu(m_contextColor);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenu.ContextMenuInfo menuInfo) {
switch (v.getId()) {
case R.id.context_color:
createMenu(R.menu.color_menu, menu, "Choose a color");
break;
default:
super.onCreateContextMenu(menu, v, menuInfo);
}
}
private void createMenu(int menuID, ContextMenu menu,
String title) {
/**
* Use a MenuInflater associated with the activity to
* inflate the Menu layout
*/
getMenuInflater().inflate(menuID, menu);
menu.setHeaderTitle(title);
}
@Override
public boolean onContextItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_red:
m_contextColor.setBackgroundResource(R.color.LightRed);
return true;
case R.id.menu_blue:
m_contextColor.setBackgroundResource(R.color.DullBlue);
return true;
case R.id.menu_green:
m_contextColor.setBackgroundResource(R.color.LightGreen);
return true;
default:
return super.onContextItemSelected(item);
}
}
}
