- Recipe: Displaying the Calendar in an Android Application
- Recipe: Displaying and Selecting Numbers Through NumberPicker
- Recipe: Creating a Stack of Images Using StackView
- Recipe: Displaying a List of Options Using ListPopupWindow
- Recipe: Suggesting Options Using PopupMenu
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Recipe: Displaying a List of Options Using ListPopupWindow
You can use ListPopupWindow to anchor to a host view and display a list of options. In this recipe, you will learn to anchor ListPopupWindow to an EditText control. When the user clicks in the EditText control, ListPopupWindow will appear displaying a list of options. After the user selects an option from ListPopupWindow, it will be assigned to the EditText control. Create a new Android project called ListPopupWindowApp.
You want to anchor ListPopupWindow to an EditText control, so define an EditText control in the layout file. After you define an EditText control, the activity layout file activity_list_popup_window_app.xml will appear as shown in Listing 4.9.
Listing 4.9. Code Written in the Activity Layout File activity_list_popup_window_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. In this application, you will prompt the user to enter a product name in the EditText control. The text Enter product name is displayed in the EditText control. The text entered into the EditText control will appear in the font size defined by the dimension resource text_size.
The default size of the list items displayed in a ListView is suitable for phones but is quite smaller for tablets. To resize the list items of the ListView as per the device screen size, add one more XML file named list_item.xml to the res/layout folder. Write the code as shown in Listing 4.10 to the list_item.xml file.
Listing 4.10. Code Written in the list_item.xml File
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="6dp"
android:textSize="@dimen/text_size"
android:textStyle="bold" />
According to the preceding code, the list items of the ListView will be padded by 6dp spaces, will appear in bold, and will be the size defined in the dimension resource text_size.
Next, you need to write Java code to perform the following tasks:
- Access the EditText control from the layout file and map it to the EditText object.
- Define an object of ListPopupWindow.
- Define ArrayAdapter and set it to the list of products you want to display through ListPopupWindow.
- Set ArrayAdapter to ListPopupWindow to display the list of products defined in ArrayAdapter.
- Set the height and width of ListPopupWindow.
- Assign a modal nature to ListPopupWindow (that is, the control will not return to the caller until the ListPopupWindow is dismissed). ListPopupWindow will be dismissed either by selecting a product from ListPopupWindow or by clicking anywhere outside ListPopupWindow.
- Anchor ListPopupWindow to the EditText control.
- Associate setOnItemClickListener to the EditText control so that when the user clicks in the EditText, ListPopupWindow opens and shows the list of products.
- Set the activity class to implement OnItemClickListener. When an option is selected from ListPopupWindow, it is assigned to the EditText control.
To perform these listed tasks, write the code shown in Listing 4.11 to the main Java activity file, ListPopupWindowAppActivity.java.
Listing 4.11. Code Written in the Java Activity File ListPopupWindowAppActivity.java
package com.androidtablet.listpopupwindowapp;
import android.os.Bundle;
import android.app.Activity;
import android.widget.ListPopupWindow;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
import android.view.View.OnClickListener;
public class ListPopupWindowAppActivity extends Activity
implements OnItemClickListener {
EditText productName;
ListPopupWindow listPopupWindow;
String[] products={"Camera", "Laptop", "Watch","Smartphone",
"Television"};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_popup_window_app);
productName = (EditText) findViewById(
R.id.product_name);
listPopupWindow = new ListPopupWindow(
ListPopupWindowAppActivity.this);
listPopupWindow.setAdapter(new ArrayAdapter(
ListPopupWindowAppActivity.this,
R.layout.list_item, products));
listPopupWindow.setAnchorView(productName);
listPopupWindow.setWidth(300);
listPopupWindow.setHeight(400);
listPopupWindow.setModal(true);
listPopupWindow.setOnItemClickListener(
ListPopupWindowAppActivity.this);
productName.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
listPopupWindow.show();
}
});
}
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
productName.setText(products[position]);
listPopupWindow.dismiss();
}
}
In the preceding code, you see the use of an ArrayAdapter, which acts as the data source for ListPopupWindow. An ArrayAdapter makes use of a TextView control to represent the child views in a view (that is, it displays the elements of the products array via a TextView control). The ArrayAdapter constructor used earlier consists of the following:
- ListPopupWindowAppActivity.this—The current context.
- R.layout.list_item—Points to the TextView that you defined in the list_item.xml file. The TextView will be used to display each item in ListPopupWindow. The elements of the products array are wrapped in a view before being assigned to the widget for display. Therefore, the R.layout.list_item simply turns the strings defined in the products array into a TextView for display in ListPopupWindow.
- products—Acts as a data source.
After running the application, you get an EditText control with the message Enter product name (see Figure 4.6 [(top]). Click in the EditText control, and ListPopupWindow appears showing the list of products (see Figure 4.6 [middle]). After you select a product from ListPopupWindow, it will appear in the EditText control (see Figure 4.6 [bottom]).
)
Figure 4.6. EditText prompting to enter a product name (top); ListPopupWindow appears showing the options after clicking in the EditText control (middle); the selected product from ListPopupWindow appears in EditText (bottom).