This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Suggesting Options Using PopupMenu
PopupMenu displays a menu in a modal pop-up window. You can anchor it to a view and make it display the desired menu items or options. In this recipe, you will anchor PopupMenu to an EditText control to display a list of suggestions while entering data in the EditText control. The difference between the previous recipe and this one is that the list of options is displayed through PopupMenu instead of ListPopupWindow.
Create a new Android project called PopupMenuApp. Because you want to anchor PopupMenu to the EditText control, it is defined in the layout file activity_popup_menu_app.xml using the code shown in Listing 4.12.
Listing 4.12. Code Written in the Activity Layout File activity_popup_menu_app.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/product_name"
android:hint="Enter product name"
android:textSize="@dimen/text_size" />
</LinearLayout>
You can see that the EditText control is assigned the ID product_name and is set to display the message Enter product name.
You will define the menu items or options for PopupMenu through the XML file. In other words, you will inflate the menu through an XML file. To the res/menu folder, add an XML file called popupmenu.xml. You want to display product names in the form of suggestions in the EditText control, so define the menu items in the form of product names in the popupmenu.xml file. The menu items are defined as shown in Listing 4.13 in the popupmenu.xml file.
Listing 4.13. Code Written in the popupmenu.xml File
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/group_popupmenu">
<item android:id="@+id/camera"
android:title="Camera"
android:textSize="@dimen/text_size" />
<item android:id="@+id/laptop"
android:title="Laptop"
android:textSize="@dimen/text_size" />
<item android:id="@+id/watch"
android:title="Watch"
android:textSize="@dimen/text_size" />
<item android:id="@+id/smartphone"
android:title="Smartphone"
android:textSize="@dimen/text_size" />
<item android:id="@+id/television"
android:title="Television"
android:textSize="@dimen/text_size" />
</group>
</menu>
You can see that products, Camera, Laptop, Watch, Smartphone, and Television are defined as menu items in the popupmenu.xml file. Each product name is assigned a unique ID, too.
You need to write Java code to accomplish the following tasks:
- Access the EditText control defined in the layout file and map it to the EditText object.
- Define the PopupMenu object and inflate the menu items or product name defined in the popupmenu.xml file to be displayed through PopupMenu.
- Associate setOnClickListener to the EditText control to listen for an occurrence of the click event in the EditText control.
- Display the PopupMenu when the user clicks in the EditText control.
- Associate setOnMenuItemClickListener to PopupMenu.
- When any menu item (product) is selected from PopupMenu, it is assigned to the EditText control.
To perform the preceding tasks, write the code shown in Listing 4.14 into the main Java activity file, PopupMenuAppActivity.java.
Listing 4.14. Code Written in the Java Activity File PopupMenuAppActivity.java
package com.androidtablet.popupmenuapp;
import android.os.Bundle;
import android.app.Activity;
import android.widget.EditText;
import android.view.View.OnClickListener;
import android.view.View;
import android.widget.PopupMenu;
import android.view.MenuItem;
public class PopupMenuAppActivity extends Activity {
EditText productName;
PopupMenu popupMenu;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_popup_menu_app);
productName = (EditText) findViewById(
R.id.product_name);
popupMenu = new PopupMenu(PopupMenuAppActivity.this,
productName);
popupMenu.getMenuInflater().inflate( R.menu.popupmenu,
popupMenu.getMenu());
productName.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
popupMenu.setOnMenuItemClickListener(new
PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem
item) {
productName.setText(item.toString());
return true;
}
});
popupMenu.show();
}
});
}
}
After you run the application, the EditText appears on startup. The EditText control displays a message directing the user to enter a product name (see Figure 4.7 [top]). When the user clicks in the EditText control, the PopupMenu appears showing product names in the form of menu items (see Figure 4.7 [middle]). The user selects a product from the PopupMenu, and it is assigned to the EditText control (see Figure 4.7 [bottom]).
)
Figure 4.7. EditText prompting to enter a product name (top); PopupMenu appears showing the options after clicking in the EditText control (middle); the selected product from PopupMenu appears in the EditText (bottom).
You see that PopupMenu appears below the anchor view (EditText control) because there is enough space below the EditText control. If there is not enough space, PopupMenu would have appeared above the anchor view.