In your application, if you need to provide an option of allowing user to select a number from a pre defined range of numbers, then you’ll have to use android NumberPicker widget. Depending on the theme applied, number picker is displayed in different styles.
In this tutorial, topics related to number picker such as using number picker with an example, number picker listener, number picker material style, number picker custom style, and number picker formatter are covered.
Below example shows how you can use number picker in your application. You need to set range for number picker by setting min and max attributes in xml or calling setMinValue and setMaxValue on NumberPicker object in activity.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zoftino.numberpicker.MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="NumberPicker Tutorial"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<NumberPicker
android:id="@+id/numberPicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
</android.support.constraint.ConstraintLayout>Below screen shows number picker when application theme is set to one of the app compact material themes.
To listen to current value change of NumberPicker, you need to provide implementation of NumberPicker.OnValueChangeListener interface which has one call back method onValueChange. In this method, you can get user picked or current value of number picker.
You can call setOnValueChangedListener method on number picker object to add value change listener to NumberPicker.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.numberpicker);
NumberPicker np = findViewById(R.id.numberPicker);
np.setMinValue(2);
np.setMaxValue(20);
np.setOnValueChangedListener(onValueChangeListener);
}
NumberPicker.OnValueChangeListener onValueChangeListener =
new NumberPicker.OnValueChangeListener(){
@Override
public void onValueChange(NumberPicker numberPicker, int i, int i1) {
Toast.makeText(MainActivity.this,
"selected number "+numberPicker.getValue(), Toast.LENGTH_SHORT);
}
};
}
You can use number picker formatter to convert number picker values to the desired format, for example, you can use number formatter to display currency.
For that, you need to create an implementation of NumberPicker.Formatter interface. The interface has format method which gets called for each number from the NumberPicker number range and the returned value from this method is what is seen in UI. You can add formatter to NumberPicker by calling setFormatter on number picker object.
NumberPicker.Formatter formatter = new NumberPicker.Formatter(){
@Override
public String format(int i) {
return NumberFormat.getCurrencyInstance(Locale.CANADA).format((long)i).toString();
}
};
Android introduced material themes in android api level 21. To use material themes and make your app run on previous version of android, you should use app compact themes. For more information on android themes and styles, read android themes and styles tutorial and for material styles, read android material styles and themes tutorial.
Above pictures show NumberPicker in mater style. You can customize number picker material style to change color of selection divider or background as shown below. Since number picker material style Widget.Material.NumberPicker is available from api level 21, if your application needs to run on prior android versions, you need to create version specific style using Widget.NumberPicker number picker style.
<style name="MyAppThemeThree" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="android:numberPickerStyle">@style/MyNumberPickerTheme</item>
</style>
<style name="MyNumberPickerTheme" parent="@android:style/Widget.Material.NumberPicker">
<item name="colorControlNormal ">#33691e</item>
<item name="android:background">#b3e5fc</item>
</style>
