Home

Awesome

Number Picker

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

Platform Language Android Arsenal API Maven Central CircleCI GitHub stars GitHub forks

<img src="https://github.com/ShawnLin013/NumberPicker/blob/master/screenshot/number-picker-theme.png">

Features

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 nameattribute descriptiondefault
np_widthThe width of this widget.
np_heightThe height of this widget.
np_accessibilityDescriptionEnabledFlag whether the accessibility description enabled.enabled
np_dividerColorThe color of the selection divider.
np_dividerDistanceThe distance between the two selection dividers.
np_dividerLengthThe length of the selection divider.
np_dividerThicknessThe thickness of the selection divider.
np_dividerTypeThe type of the selection divider.side_lines
np_fadingEdgeEnabledFlag whether the fading edge should enabled.
np_fadingEdgeStrengthThe strength of fading edge while drawing the selector.
np_formatterThe formatter of the numbers.
np_hideWheelUntilFocusedFlag whether the selector wheel should hidden until the picker has focus.
np_itemSpacingAmount of space between items.
np_lineSpacingMultiplierThe line spacing multiplier for the multiple lines.
np_maxThe max value of this widget.
np_maxFlingVelocityCoefficientThe coefficient to adjust (divide) the max fling velocity.
np_minThe min value of this widget.
np_orderThe order of this widget.ascending
np_orientationThe orientation of this widget.vertical
np_scrollerEnabledFlag whether the scroller should enabled.
np_selectedTextAlignThe text align of the selected number.center
np_selectedTextColorThe text color of the selected number.
np_selectedTextSizeThe text size of the selected number.
np_selectedTextStrikeThruFlag whether the selected text should strikethroughed.
np_selectedTextUnderlineFlag whether the selected text should underlined.
np_selectedTypefaceThe typeface of the selected numbers.
np_textAlignThe text align of the numbers.center
np_textColorThe text color of the numbers.
np_textSizeThe text size of the numbers.
np_textStrikeThruFlag whether the text should strikethroughed.
np_textUnderlineFlag whether the text should underlined.
np_typefaceThe typeface of the numbers.
np_valueThe current value of this widget.
np_wheelItemCountThe number of items show in the selector wheel.
np_wrapSelectorWheelFlag 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! 🙏

<a href='https://ko-fi.com/shawnlin' target='_blank'><img height='48' style='border:0px;height:48px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

License

The source code is licensed under the MIT license.