Number Picker

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

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

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

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	default
np_width	The width of this widget.
np_height	The height of this widget.
np_accessibilityDescriptionEnabled	Flag whether the accessibility description enabled.	enabled
np_dividerColor	The color of the selection divider.
np_dividerDistance	The distance between the two selection dividers.
np_dividerLength	The length of the selection divider.
np_dividerThickness	The thickness of the selection divider.
np_dividerType	The type of the selection divider.	side_lines
np_fadingEdgeEnabled	Flag whether the fading edge should enabled.
np_fadingEdgeStrength	The strength of fading edge while drawing the selector.
np_formatter	The formatter of the numbers.
np_hideWheelUntilFocused	Flag whether the selector wheel should hidden until the picker has focus.
np_itemSpacing	Amount of space between items.
np_lineSpacingMultiplier	The line spacing multiplier for the multiple lines.
np_max	The max value of this widget.
np_maxFlingVelocityCoefficient	The coefficient to adjust (divide) the max fling velocity.
np_min	The min value of this widget.
np_order	The order of this widget.	ascending
np_orientation	The orientation of this widget.	vertical
np_scrollerEnabled	Flag whether the scroller should enabled.
np_selectedTextAlign	The text align of the selected number.	center
np_selectedTextColor	The text color of the selected number.
np_selectedTextSize	The text size of the selected number.
np_selectedTextStrikeThru	Flag whether the selected text should strikethroughed.
np_selectedTextUnderline	Flag whether the selected text should underlined.
np_selectedTypeface	The typeface of the selected numbers.
np_textAlign	The text align of the numbers.	center
np_textColor	The text color of the numbers.
np_textSize	The text size of the numbers.
np_textStrikeThru	Flag whether the text should strikethroughed.
np_textUnderline	Flag whether the text should underlined.
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 {
        mavenCentral()
    }
}

dependencies {
    implementation 'io.github.ShawnLin013:number-picker:2.4.13'
}

Support

Thank you to all our backers! 🙏

License

The source code is licensed under the MIT license.

JiangJQ527/NumberPicker