Android Number Picker: How to Use the Widget and Libraries

In android, a number picker is a UI widget that allows users to select a number from a predefined range. Android provides the android.widget.NumberPicker class for this purpose. In this tutorial, we will discuss how to use the NumberPicker widget in Android Studio and also mention some libraries that you can use for more advanced features.

Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!

How to use the Android Number Picker

To use the NumberPicker widget in your android app, you need to add the following XML code in your XML File:

 <NumberPicker
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>
android number picker

The NumberPicker widget is available in the android.widget package and we can also create an instance of this widget by using the following code:

NumberPicker numberPicker = new NumberPicker(context);

You can also specify the maximum and minimum values for the number picker by using the setMinValue() and setMaxValue() methods respectively.

The default maximum value is Integer.MAX_VALUE and the default minimum value is 0 . You can also get or set the current value of the number picker by using the getValue() and setValue() methods.

The following code snippet shows how to use the NumberPicker widget in your android app:

NumberPicker numberPicker = new NumberPicker(context); 
numberPicker.setMinValue(0); 
numberPicker.setMaxValue(100); 

// Get or set current value int 
currentVal = numberPicker.getValue();

Now to listen to the change in Number Picker values we use the following code:

// Listen for selection change events
numberPicker.setOnSelectionChangedListener(new OnSelectionChangedListener() {
            @Override
            public void onSelectionChanged(NumberPicker view, int selected) {
                // Do something 

            }
        });

Now that we have seen how to use the NumberPicker widget, let’s look at some libraries that you can use for more advanced features.

Android Number Picker Library | Top 5

ShawnLin013 Number Picker

android number picker theme

This library provides a custom number picker widget with more features than the default number picker widget. Its features are as mentioned below:

Features
  • Customizable fonts(color, size, strikethrough, underline, typeface)
  • Customizable dividers(color, distance, length, thickness, type)
  • Horizontal and Vertical mode are both supported
  • Ascending and Descending order are both supported
  • Also supports negative values and multiple lines

To get started add the following lines of code to your build.gradle app file

buildscript {
    repositories {
        mavenCentral()
    }
}

dependencies {
    implementation 'io.github.ShawnLin013:number-picker:2.4.13'
}
<!-- XML Code --!>
<com.shawnlin.numberpicker.NumberPicker
    android:id="@+id/number_picker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    app:np_width="64dp"
    app:np_height="180dp"
    app:np_dividerColor="@color/colorPrimary"
    app:np_formatter="@string/number_picker_formatter"
    app:np_max="59"
    app:np_min="0"
    app:np_selectedTextColor="@color/colorPrimary"
    app:np_selectedTextSize="@dimen/selected_text_size"
    app:np_textColor="@color/colorPrimary"
    app:np_textSize="@dimen/text_size"
    app:np_typeface="@string/roboto_light"
    app:np_value="3" />
// The Java Code
NumberPicker numberPicker = (NumberPicker) findViewById(R.id.number_picker);

// Set divider color
numberPicker.setDividerColor(ContextCompat.getColor(this, R.color.colorPrimary));
numberPicker.setDividerColorResource(R.color.colorPrimary);

// Set formatter
numberPicker.setFormatter(getString(R.string.number_picker_formatter));
numberPicker.setFormatter(R.string.number_picker_formatter);

// Set selected text color
numberPicker.setSelectedTextColor(ContextCompat.getColor(this, R.color.colorPrimary));
numberPicker.setSelectedTextColorResource(R.color.colorPrimary);

// Set selected text size
numberPicker.setSelectedTextSize(getResources().getDimension(R.dimen.selected_text_size));
numberPicker.setSelectedTextSize(R.dimen.selected_text_size);

// Set selected typeface
numberPicker.setSelectedTypeface(Typeface.create(getString(R.string.roboto_light), Typeface.NORMAL));
numberPicker.setSelectedTypeface(getString(R.string.roboto_light), Typeface.NORMAL);
numberPicker.setSelectedTypeface(getString(R.string.roboto_light));
numberPicker.setSelectedTypeface(R.string.roboto_light, Typeface.NORMAL);
numberPicker.setSelectedTypeface(R.string.roboto_light);

// Set text color
numberPicker.setTextColor(ContextCompat.getColor(this, R.color.dark_grey));
numberPicker.setTextColorResource(R.color.dark_grey);

// Set text size
numberPicker.setTextSize(getResources().getDimension(R.dimen.text_size));
numberPicker.setTextSize(R.dimen.text_size);

// Set typeface
numberPicker.setTypeface(Typeface.create(getString(R.string.roboto_light), Typeface.NORMAL));
numberPicker.setTypeface(getString(R.string.roboto_light), Typeface.NORMAL);
numberPicker.setTypeface(getString(R.string.roboto_light));
numberPicker.setTypeface(R.string.roboto_light, Typeface.NORMAL);
numberPicker.setTypeface(R.string.roboto_light);

// Set value
numberPicker.setMaxValue(59);
numberPicker.setMinValue(0);
numberPicker.setValue(3);

// Using string values
// IMPORTANT! setMinValue to 1 and call setDisplayedValues after setMinValue and setMaxValue
String[] data = {"A", "B", "C", "D", "E", "F", "G", "H", "I"};
numberPicker.setMinValue(1);
numberPicker.setMaxValue(data.length);
numberPicker.setDisplayedValues(data);
numberPicker.setValue(7);

// Set fading edge enabled
numberPicker.setFadingEdgeEnabled(true);

// Set scroller enabled
numberPicker.setScrollerEnabled(true);

// Set wrap selector wheel
numberPicker.setWrapSelectorWheel(true);

// Set accessibility description enabled
numberPicker.setAccessibilityDescriptionEnabled(true);
        
// OnClickListener
numberPicker.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Log.d(TAG, "Click on current value");
    }
});

// OnValueChangeListener
numberPicker.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
    @Override
    public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
        Log.d(TAG, String.format(Locale.US, "oldVal: %d, newVal: %d", oldVal, newVal));
    }
});

// OnScrollListener
numberPicker.setOnScrollListener(new NumberPicker.OnScrollListener() {
    @Override
    public void onScrollStateChange(NumberPicker picker, int scrollState) {
        if (scrollState == SCROLL_STATE_IDLE) {
            Log.d(TAG, String.format(Locale.US, "newVal: %d", picker.getValue()));
        }
    }
});

Link to library: GitHub – ShawnLin013/NumberPicker

Quantitizer Number Picker

This library provides a custom number picker widget with good amount of animation whenever the user changes the counter number.

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        //...omitted for brevity
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency

dependencies {
   implementation "com.github.kojofosu:Quantitizer:$latest_release"
}

Link to library: https://github.com/kojofosu/Quantitizer

Meter Number Picker

Android Number Picker

The android library that provides a simple and customizable Number Picker styled as meter.

To get started make sure you’ve added maven central to the list of your repositories at the root build.gradle:

repositories {
    mavenCentral()
}

Then add a dependency into your module’s build.gradle:

dependencies {
    implementation 'com.alex-zaitsev:meternumberpicker:1.0.5'
}

The library contains 2 views: MeterNumberPicker and MeterViewMeterNumberPicker is a base block for MeterView. On the screenshot above whole view is the MeterView and a single block of it is MeterNumberPicker. They are pretty simple, you can easily create your own meter class based on them.

Link to Library: https://github.com/alexzaitsev/meter-number-picker

ScrollableNumberPicker

This view provides an user-friendly numerical input interface. It can easily be customized and is built to be used on Android-TV as well.

Android Number Picker Library

The library is available on jcenter(). Just add these lines in your build.gradle:

dependencies {
    compile 'com.michaelmuenzer.android:ScrollableNumberPicker:0.2.2'
}

Link to the Library: https://github.com/michaelmuenzer/ScrollableNumberPicker

DWRulerView

This library showcases a Ruler UI base number picker

Ruler Number Picker

To get started add the following lines of code to respective build.gradle file:

allprojects {
		repositories {
			...
			maven { url "https://jitpack.io" }
		}
}
dependencies {
	  compile 'com.github.dwfox:DWRulerView:1.1.0'
}

Link to the libary: https://github.com/dwfox/DWRulerView

Interested in exploring To 20 Android libraries to explore? Click here

Conclusion

In this tutorial, we have discussed how to use the android.widget.NumberPicker widget in Android Studio and also mentioned some libraries that you can use for more advanced features. Happy coding!