ZOFTINO.COM android and web dev tutorials

Android Number Picker Tutorial

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.

Android Number Picker Example

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.

NumberPicker element in xml layout

<?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>

Android Number Picker

Below screen shows number picker when application theme is set to one of the app compact material themes.

android number picker example

Android Number Picker Listener

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);
        }
    };
}

NumberPicker Formatter

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 numberpicker number formatter example

Android NumberPicker Material Style

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>
android numberpicker material style