ScrollableNumberPicker
michaelmuenzer
48
Visit GitHub RepoNumber Pickers

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 Arsenal Download API

How does it look like?

alt tag

Getting started

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

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

Alternatively you can use jitpack.io

Usage

Just include ScrollableNumberPicker inside our xml-layout. There are samples available for mobile and tv applications inside this repository.

<com.michaelmuenzer.android.scrollablennumberpicker.ScrollableNumberPicker
    android:id="@+id/number_picker_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

If you want to change the value by scrolling on the view, you can enable and control speed like this:

<com.michaelmuenzer.android.scrollablennumberpicker.ScrollableNumberPicker
    [...]
    app:snp_scrollEnabled="true"
    app:snp_updateInterval="25"
    />

You can make use of various other custom attributes to define how the increment and decrement interactions should behave:

<LinearLayout
    [...]
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    
    <com.michaelmuenzer.android.scrollablennumberpicker.ScrollableNumberPicker
        [...]
        app:snp_maxValue="1000"
        app:snp_minValue="10"
        app:snp_stepSize="5"
        app:snp_updateInterval="100"
        app:snp_value="10"
        />
</Linearlayout>

There exist further attributes which let you customize the general appearance of the view:

<com.michaelmuenzer.android.scrollablennumberpicker.ScrollableNumberPicker
        [...]
        app:snp_buttonIconLeft="@drawable/btn_left_selector_main"
        app:snp_buttonIconRight="@drawable/btn_right_selector_main"            
        app:snp_buttonBackgroundTintSelector="@color/white"
        app:snp_buttonTouchScaleFactor="0.8"
        app:snp_orientation="horizontal"
        app:snp_valueMarginEnd="5dp"
        app:snp_valueMarginStart="5dp"
        app:snp_value_text_color="@color/colorPrimary"
        app:snp_value_text_size="16sp"
        app:snp_value_text_appearance="?android:attr/textAppearanceMedium"
        app:snp_buttonPaddingBottom="8dp"
        app:snp_buttonPaddingLeft="8dp"
        app:snp_buttonPaddingRight="8dp"
        app:snp_buttonPaddingTop="8dp"
        />

You can essentially make the element look exactly like you want by using the android:background attribute:

<com.michaelmuenzer.android.scrollablennumberpicker.ScrollableNumberPicker
        [...]
        android:background="@drawable/number_picker_bg_color"
        />

number_picker_bg_color.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="@color/green"/>

    <corners android:radius="24dp"/>

    <size
        android:width="24dp"
        android:height="24dp"/>
</shape>

You can use ScrollableNumberPickerListener to build further processing logic around the selected number:

numberPicker.setListener(new ScrollableNumberPickerListener() {
    @Override
    public void onNumberPicked(int value) {
        // Do some magic
    }
});

If you use it on Android TV, please include the following to allow D-pad support.

<com.michaelmuenzer.android.scrollablennumberpicker.ScrollableNumberPicker
    android:id="@+id/number_picker_horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:focusable="true"
    android:nextFocusUp="@+id/number_picker_vertical"/>
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    return onKey(keyCode, event);
}

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    return onKey(keyCode, event);
}

private boolean onKey(int keyCode, KeyEvent event) {
    if (horizontalNumberPicker.isFocused()) {
        return horizontalNumberPicker.handleKeyEvent(keyCode, event);
    }

    return false;
}

Questions?

If you have any questions feel free to open a github issue with a 'question' label

License

Licensed under the MIT license. See 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