NumberPicker
ShawnLin013
417
Visit GitHub RepoNumber Pickers

Number Picker

The android library that provides a simple and customizable NumberPicker. It's based on android.widget.NumberPicker.

Platform Language Android Arsenal API Download

Features

  • Customizable fonts(color, size, typeface)
  • Customizable dividers(color, distance, thickness)
  • Horizontal and Vertical mode are both supported
  • Ascending and Descending order are both supported
  • Also supports the negative values

Usage

Java

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

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

XML

add xmlns:app="http://schemas.android.com/apk/res-auto"

<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" />

Attributes

attribute name attribute description
np_width The width of this widget.
np_height The height of this widget.
np_dividerColor The color of the selection divider.
np_dividerDistance The distance between the two selection dividers.
np_dividerThickness The thickness of the selection divider.
np_fadingEdgeEnabled Flag whether the fading edge should enabled.
np_formatter The formatter of the numbers.
np_max The max value of this widget.
np_min The min value of this widget.
np_order The order of this widget. Default is ascending.
np_orientation The orientation of this widget. Default is vertical.
np_scrollerEnabled Flag whether the scroller should enabled.
np_selectedTextColor The text color of the selected number.
np_selectedTextSize The text size of the selected number.
np_textColor The text color of the numbers.
np_textSize The text size of the numbers.
np_typeface The typeface of the numbers.
np_value The current value of this widget.
np_wheelItemCount The number of items show in the selector wheel.
np_wrapSelectorWheel Flag whether the selector should wrap around.

Gradle

Add the dependency in your build.gradle

buildscript {
    repositories {
        jcenter()
    }
}

dependencies {
    compile 'com.shawnlin:number-picker:2.4.6'
}

License

The source code is licensed under the MIT license.

Join India's largest learning revolution
Free Video Tutorials
Learn Programming
Learning is a journey, let's learn together

MindOrks Newsletter
100,000+ Subscribers
A free weekly newsletter that comes with the latest Android articles, open source projects, events and hot discussions.

Subscribe Now

Featured Blogs

Our Team

MindOrks is Certainly one of the best online blog to stay on top of all the Android development news, coding and design patterns. Finally a blog I can count on to keep myself updated with latest and greatest things happening in Android world.

Vipul Shah
Android Developer
Microsoft

OUR LEARNERS WORK AT