milosmns / actual-number-picker

Android: A horizontal number picker

Actual Number Picker

What is this?

Actual Number Picker is an Android custom-built View for choosing numbers. It's simple, elegant, fits in a small-height constraint box and it can be completely customized in XML. You can easily swipe it right and left, or click on arrow controls to increase/decrease the current value.

Requirements

• Android 3.0 or later (Minimum SDK level 11)
• Android Studio (to compile and use)
• Eclipse is not supported

Getting Started

1. Download Android Studio
2. Launch Android Studio
3. Start your new project
4. Open your project's main Gradle file, in root directory (/build.gradle)
5. Make sure you are using jcenter() in the repository block (mavenCentral() should work too)
6. Open your app module Gradle file, for example /app/build.gradle
7. In dependencies block, add the following line: compile 'me.angrybyte.picker:picker:1.3.1'
8. Click Tools/Android/Sync Project with Gradle Files or click on the Sync icon in the top toolbar
9. Click Run/Run 'app' to see if it's resolved correctly

This will run the app on your device. You may need to download a newer version of Gradle, which will be available in the Android Studio UI if compile fails.

What does it look like?

A Lollipop-inspired look

Various configuration options (v1)

Various configuration options (v2)

Sample usage

First, define the View in your layout file (of course, you don't need to add all the app attributes, I just added them for demo).

<me.angrybyte.numberpicker.view.ActualNumberPicker
    android:id="@+id/actual_picker"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="25dp"
    android:background="#FFFF3040"
    app:bar_color="@android:color/white"
    app:bar_width="1dp"
    app:bars_count="26"
    app:controls_color="@android:color/white"
    app:draw_over_controls="true"
    app:draw_over_text="false"
    app:fast_controls_color="@android:color/darker_gray"
    app:highlight_color="#FFFF3040"
    app:max_value="100"
    app:min_value="0"
    app:selection_color="#A0FF3040"
    app:show_bars="true"
    app:show_controls="true"
    app:show_fast_controls="true"
    app:show_highlight="true"
    app:show_text="false"
    app:text_color="@android:color/white"
    app:text_size="16sp"
    app:value="50" />

Then, from Java (your Activity or Fragment), you can easily get the view and attach the listener.

public class DemoActivity extends AppCompatActivity implements OnValueChangeListener {

    private static final String TAG = DemoActivity.class.getSimpleName();

    private ActualNumberPicker mPicker;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo);
        mPicker = (ActualNumberPicker) findViewById(R.id.actual_picker);
        mPicker.setListener(this);
    }

    @Override
    public void onValueChanged(int oldValue, int newValue) {
        float percent = (float) newValue / (float) (mPicker.getMaxValue() - mPicker.getMinValue());
        Log.d(TAG, "Currently the picker is at " + percent + " percent.");
    }

}

Note: onValueChanged() event will always get fired on the UI thread.

Explanation of attributes

Here are some short explanations for the attributes provided by the view. You can leave out any of them, values will get set to default ones.

• show_bars: (boolean) Whether show the vertical lines or not.

• bars_count: (integer) How many bars to show. Note that the number may be changed by 1 if symmetry issues occur (ignored if bars are not visible).

• bar_color: (color) Recolors all of the vertical lines to the specified color (ignored if bars are not visible).

• bar_width: (dimension) How wide should each bar be (ignored if bars are not visible).

• draw_over_text: (boolean) Whether to show the bars over the text (ignored if text or bars are not visible).

• draw_over_controls: (boolean) Whether to show the bars over the arrow controls (ignored if controls or bars are not visible).

• selection_color: (color) The touch highlight color on each of the arrow controls (ignored if controls are not visible).

• show_highlight: (boolean) Whether to show the blurry highlight behind each of the arrow controls (ignored if controls are not visible).

• highlight_color: (color) Recolors the blurry highlight to the specified color (ignored if controls or highlights are not visible).

• show_controls: (boolean) Whether to show the slow arrow controls or not.

• controls_color: (color) Recolors all of the slow arrows to the specified color (ignored if slow arrows are not visible).

• show_fast_controls: (boolean) Whether to show the fast arrow controls or not.

• fast_controls_color: (color) Recolors all of the fast arrows to the specified color (ignored if fast arrows are not visible).

• show_text: (boolean) Whether to show the text with the current number value or not.

• text_size: (dimension) Set the current number value text size (ignored if text is not shown).

• text_color: (color) Recolors the current number value text to the specified color (ignored if text is not shown).

• min_value: (integer) How low can the value numbers go.

• max_value: (integer) How high can the value numbers go.

• value: (integer) Set the current value (must be between min_value and max_value).

Support

If you've found an error while using the library, please file an issue. All patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub. Some more help can be found here:

• Stack Overflow
• On my blog

actual-number-picker's Issues

W/View: ActualNumberPicker not displayed because it is too large to fit into a software layer (or drawing cache), needs 15322800 bytes, only 14745600 available

here is the relevant portion of my XML

        <me.angrybyte.numberpicker.view.ActualNumberPicker
            android:id="@+id/my_account_card_month_picker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="22.5dp"
            android:layout_weight="1"
            android:layerType="software"
            app:show_bars="false"
            app:max_value="12"
            app:min_value="1"
            app:show_controls="true"
            app:show_fast_controls="false"
            app:show_text="true"
            app:text_color="@android:color/black"
            app:text_size="16sp" />


        <me.angrybyte.numberpicker.view.ActualNumberPicker
            android:id="@+id/my_account_card_year_picker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layerType="software"
            app:show_bars="false"
            app:max_value="12"
            app:min_value="1"
            app:show_controls="true"
            app:show_fast_controls="false"
            app:show_text="true"
            app:text_color="@android:color/black"
            app:text_size="16sp" />

    </LinearLayout>

here is my build.gradle

android {
compileSdkVersion 23
buildToolsVersion "24.0.1"

defaultConfig {
    applicationId "android.fusionofideas.com.uscca"
    minSdkVersion 17
    targetSdkVersion 23
    versionCode 1
    versionName "1.0"
}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}

}

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.2.0'
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.google.android.gms:play-services-base:9.8.0+'
compile 'com.google.android.gms:play-services-location:9.8.0+'
compile 'com.google.android.gms:play-services-maps:9.8.0+'
compile 'com.koushikdutta.ion:ion:2.1.9'
compile 'se.emilsjolander:stickylistheaders:2.7.0'
compile 'com.github.barteksc:android-pdf-viewer:2.4.0'
compile 'com.github.delight-im:Android-SimpleLocation:v1.0.1'
compile 'com.github.arimorty:floatingsearchview:2.0.3'
compile 'me.angrybyte.picker:picker:1.2.0'
}

can you help me? I am using your software in an aar generated from the github source
thank you

Let max and min range be set programmatically

I can't access the setters for maximum and minimum range.

new attribute step size?

Hi @milosmns,
Is it possible to add a step size attribute, so when I set min to 0 and max to 100, and set step size to 5, then numbers 5,10,15,20... etc are selected, rather than all numbers from 0 to 100.

Thanks

not any bug or something but i want my slow key to add or subtract 0.1 and fast key to add or subtract 1

As your slow arrow move with speed of 1 i want it to move with speed of 0.1
and fast arrow with speed of 1.

how can i change this.

How to discern how a value change is made

Hi,
inside the onValueChanged(int oldValue, int newValue), is there a way to discern if a change to the value has been made by "touching" the number picker o by the line code numberPicker.setValue(value)?

I don't know if this is the best solution, but I used the numberPicker.setOnTouchListener() to change the value of a boolen variable, so that I can know when the user touch the picker and so the value will be changed in that way.

Thanks

Can't compile

Hi,

When I tried to sync compile 'me.angrybyte.picker:picker:1.3.1' on my project, I got these errors :

Linked here :

This is my configuration :

If you need further information, please ask me,
Sorry for my broken english,

AerWyn81.

I can't make the view width "match_parent"

In no way, the control is being expanded to its parent width. Nothing works in the layout_width, even not hard coded dps. It only spans a little part of the parent width in a Linear Layout which has orientation vertical.

how to handle onValueChanged while using multiple ActualNumberPicker!

we can't handle onValueChanged while using multiple ActualNumberPicker! adding tag some thing to listener will help !!

Awesome library thanks !!

Touching the view should not fire valueChange event but only dragging

If I just touch the view at for example half, it will set the value to 50 or (which is half). The correct behavior for this half visible (moving cycle) as visible from the display is, to change value on its movement or dragging.

No matter where I touch, it should change the value according to the dragging distance,only when I drag. Even If I touch near end and move to half, and say I dragged for value 20, it should change the existing 50 value to 30. 50-20 = 30.

duplicate values in values.xml

Had a couple of duplicate definitions when I tried to include your numberpicker library (min_value, max_value and bar_color). Haven't messed around with libraries much. Can you give me some idea on how what I could modify to solve the problem?

Bug : i can't set value programmatically!!

when i change the value the text is still not changed

how can i use this function to stop wrapinng between min and max?

picker.setWrapSelectorWheel(false);

Values as float

Hi, thank you for this great component.
Did you remember about extension of values for float type?

Picker is not working for high values range

When using number picker with high range values like years, max value is always selected.

Setup used:
<me.angrybyte.numberpicker.view.ActualNumberPicker
android:id="@+id/actual_picker"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="@color/PrimaryColor"
app:bar_color="@android:color/white"
app:bar_width="1dp"
app:bars_count="10"
app:controls_color="@android:color/white"
app:draw_over_controls="true"
app:draw_over_text="false"
app:fast_controls_color="@android:color/darker_gray"
app:highlight_color="@color/PrimaryColor"
app:max_value="2016"
app:min_value="2000"
app:selection_color="@color/PrimaryColor"
app:show_bars="true"
app:show_controls="false"
app:show_fast_controls="false"
app:show_highlight="true"
app:show_text="true"
app:text_color="@android:color/white"
app:text_size="16sp"
app:value="2008" />

ActualNumberPicker.java, line 682:
mValue = (int) Math.floor(percent * mMaxValue + mMinValue);

new value is being calculated assuming mMinValue will be zero or close to zero?

Doesn't showing on Android 6.0 if on ListView

I did make one ListView and inflated the ActualNumberPicker on Adapter. Did works fine on Android 4.1.2, but on Android 6.0 doesn't is shown nothing.