- 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 and Selecting Numbers Through NumberPicker
In this recipe, you will learn to display a NumberPicker that displays numbers in the specified range. The number that is selected from the NumberPicker is displayed through TextView. Create a new Android project called NumberPickerApp.
You just want to display TextView and NumberPicker in this application. The NumberPicker will display the numbers between the specified range, and the TextView will display the number selected from the NumberPicker. To define the TextView and NumberPicker, write the code shown in Listing 4.3 to the activity layout file activity_number_picker_app.xml.
Listing 4.3. Code Written in the Activity Layout File activity_number_picker_app.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Select a number from NumberPicker"
android:id="@+id/numberview"
android:textSize="@dimen/text_size"
android:textStyle="bold" />
<NumberPicker android:id="@+id/numberpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
You can see that the TextView control is assigned the ID numberview and is initialized to display the text Select a number from NumberPicker. The text displayed through TextView will appear in bold and in the size defined by the dimension resource text_size. To access and identify Java code, assign NumberPicker the ID numberpicker.
In the main Java activity file, you need to write the Java code to do the following tasks:
- Access the TextView and NumberPicker from the layout file, and map them to the respective objects.
- Set the maximum and minimum numerical values to be displayed through NumberPicker.
- Associate an event listener to the NumberPicker to listen if the current value in NumberPicker is changed.
- Display the number selected from the NumberPicker through TextView.
To perform all these tasks, write the code shown in Listing 4.4 to the Java activity file NumberPickerAppActivity.java.
Listing 4.4. Code Written in the Java Activity File NumberPickerAppActivity.java
package com.androidtablet.numberpickerapp;
import android.os.Bundle;
import android.app.Activity;
import android.widget.NumberPicker;
import android.widget.TextView;
public class NumberPickerAppActivity extends Activity {
TextView numberView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_number_picker_app);
numberView = (TextView)findViewById(R.id.numberview);
NumberPicker numberPicker = (NumberPicker) findViewById(R.id.numberpicker);
numberPicker.setMaxValue(100); #1
numberPicker.setMinValue(0); #2
numberPicker.setWrapSelectorWheel(true);
numberPicker.setOnValueChangedListener( new NumberPicker.
OnValueChangeListener() {
@Override
public void onValueChange(NumberPicker picker, int
oldVal, int newVal) {
numberView.setText("Selected number is "+
newVal);
}
});
}
}
You can see that the TextView control with ID numberview is accessed from the layout file and mapped to the TextView object numberView. Similarly, NumberPicker with ID numberpicker is accessed from the layout file and is mapped to the NumberPicker object numberPicker. The minimum and maximum values to be displayed through NumberPicker are set to 0 and 100, respectively.
The setWrapSelectorWheel() method is set to true to make the selector wheel wrap around the minimum and maximum values that are displayed through NumberPicker. When the range of values (that is, maximum value – minimum values) displayed through NumberPicker is more than the number of numerical shown in the selector wheel, wrapping is enabled by default. (The selector wheel wraps around the maximum and minimum values by default.)
The setOnValueChangedListener is associated with the NumberPicker. When the current value is changed in the NumberPicker, the callback method onValueChange is invoked. In the onValueChange method, the newly selected number in the NumberPicker is displayed through the TextView control.
After you run the application, the TextView will display a text message directing the user to Select a number from NumberPicker. The NumberPicker displays the assigned minimum value in editable form. The lesser value is shown above, and a greater value is shown below (see Figure 4.2 [top]). You can change the number by scrolling up or down and by tapping on the lesser or greater value shown above and below. When you tap a number, it is displayed through the TextView control, as shown in Figure 4.2 (bottom).
)
Figure 4.2. NumberPicker displaying the numbers beginning from the set minimum value (top) and the selected number displayed through TextView (bottom)
You can display any range of values through the NumberPicker. For example, to display odd values from 1 to 19, you can replace the statements #1 and #2 in Listing 4.4 with the following code:
String[] stringArray = new String[10];
int n=1;
for(int i=0; i<10; i++){
stringArray[i] = Integer.toString(n);
n+=2;
}
numberPicker.setMaxValue(stringArray.length-1);
numberPicker.setMinValue(0);
numberPicker.setDisplayedValues(stringArray);
You can see that a String array called stringArray is defined and values 1,3,5... 19 are stored in it. The min value of the NumberPicker is set to 0. The max value of NumberPicker is set equal to the length of stringArray -1 because you want to display all the elements of the array stringArray. Thereafter, through the setDisplayedValues() method, the values in the stringArray are displayed through NumberPicker.
Because the current theme in the Android application is derived from Theme_Holo or Theme_Holo_Light, the NumberPicker appears as shown in Figure 4.2 (that is, the current value as editable with lesser and greater value shown above and below the NumberPicker, respectively). If you change the theme of your application, you can change the appearance of the NumberPicker. For example, the following statements applied in the AndroidManifest.xml file will set the current theme of the application to be derived from Theme:
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar" >
The preceding statements will change the theme of the application to Theme.Black.NoTitleBar and hence the appearance of the NumberPicker widget. In other words, the NumberPicker will display the current value in editable form with an increment and decrement button displayed above and below, respectively (see Figure 4.3 [top]). After you change the current value, it will be displayed through TextView, as shown in Figure 4.3 (bottom).
)
Figure 4.3. NumberPicker with black background, increment, and decrement buttons on changing the theme of the application (top), and the selected number displayed through TextView (bottom)