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"/>
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
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
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 MeterView. MeterNumberPicker 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.
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
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!
