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.
How does it look like?
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.