Skip to content

Android 3.x and 4.x NumberPicker Example

I was working on a new, yet to be released, Android app that necessitated the need for the new NumberPicker widget introduced in Android 3.0. Unfortunately, there are almost no examples of its use floating around and the documentation in the Android API is extremely lacking. Thus, I spent a few hours of trial and error figuring out how it worked.

My goal: Use a NumberPicker to allow a user to select a multiple of 5 in the range 0-100.

First up: The XML.

<NumberPicker android:id="@+id/np"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:width="100dip"/>

The XML for our NumberPicker looks very similar to any other Android widget. By default the NumberPicker is set up for displaying two digit numbers, but our last number in this case, 100, is three digits. Hence, the leading 1 in 100 will be cutoff and only 00 is displayed in the NumberPicker. To remedy this, the width is set to 100dip which is wide enough to allow for three digit numbers.

Because of the lack of XML properties for the NumberPicker, we must do all of the configuration for it in code. Speaking of which…

NumberPicker np = (NumberPicker) findViewById(R.id.np);
np.setMaxValue(100);
np.setMinValue(0);

This will set up our NumberPicker to display all the numbers between 0-100, but I want the multiples of 5 between 0-100. We need to make use of the setDisplayedValues() function. Unfortunately, the documentation for this function is virtually non-existent, but here’s what I figured out: Think of the max and min values we just set in the NumberPicker as indices in an array. By default, the NumberPicker displays the index number, but setDisplayedValues() displays the value in the index of the corresponding array passed in setDisplayedValues() rather than the actual index number.

But first, we need a an array containing the multiples of 5 from 0-100. Sure, hard coding these numbers would be fine, but that’s no fun. Let’s use a quick loop.

String[] nums = new String[21];

for(int i=0; i<nums.length; i++)
   nums[i] = Integer.toString(i*5);

This quickly gives us the multiples of 5 between 0-100 without wasting loop cycles with an if and mod statement.

Onto the NumberPicker. We need to make a few changes.

NumberPicker np = (NumberPicker) findViewById(R.id.np);
np.setMaxValue(nums.length-1);
np.setMinValue(0);
np.setWrapSelectorWheel(false);
np.setDisplayedValues(nums);

First and foremost, the max value is not 100 anymore. It is now the length of the numbers array minus 1. This is because we have to treat the max value as the number of elements in an internal array. It should be the length of our numbers array minus 1. Naturally, we also call setDisplayedValues() and pass the numbers array as the argument.

As a side note, setWrapSelectorWheel allows/disallows consecutive scrolling through the NumberPicker; something not desirable in the app I’m working on so I disabled it.

Here’s a simple example app.

Read more from Uncategorized
11 Comments Post a comment
  1. Nov 27 2012

    and how to get the value?
    try and getValue () but I get error.

    Reply
    • shane
      Nov 29 2012

      Hi Chris, please post your code and stack trace.

      Reply
  2. CHristofer
    Nov 30 2012

    public class name extends Activity
    {
    public static NumberPicker np;
    public static TextView tv;
    public void onCreate(……)
    {
    .
    .
    .
    .
    np= (NumbetPicker) findViewById(R.id.np);
    tv=(TextView) findViewById(R.id.tv);
    .
    .
    .
    .

    }
    public void onClickMask(View x)
    {
    int x = np.getValue();
    tv.setText(x);
    }
    }

    Reply
    • shane
      Dec 2 2012

      Chris,

      I can’t actually test that because it’s not a full code segment, but the two problems I see are that your NumberPicker and TextView variables should not be static, and I’m not sure what onClickMask does. I tried looking for it in the Android docs, but I can’t find it. It looks like you want to see the text of tv to the number picker value when it is clicked? You should have a button that does that, not clicking the NumberPicker directly.

      Reply
  3. CHristofer
    Nov 30 2012

    public class name extends Activity
    {
    public static NumberPicker np;
    public static TextView tv;
    public void onCreate(……)
    {
    .
    .
    .
    .
    np= (NumbetPicker) findViewById(R.id.np);
    tv=(TextView) findViewById(R.id.tv);
    .
    .
    .
    .

    }
    public void onClickMask(View bu)
    {
    int x = np.getValue();
    tv.setText(x);
    }
    }

    Reply
  4. Sara
    Jan 29 2013

    It was reali helpful. thanx a lot. :)

    Reply
  5. Reza
    Mar 27 2013

    Thanks for your post, this is exactly what I needed.

    Reply
  6. Maik
    May 24 2013

    Thanks, that was really useful.

    Tho, I also had to tweak the way I read the values. The number picker returned the selected Index, not the selected value.

    Reply
  7. Jeric
    Dec 12 2013

    How to set current value?
    I use setValue( selected Index ) method , but id did’t work

    Reply
    • Dec 13 2013

      Hi Jeric, I’ll need to see some code before I can speculate on what’s not working.

      Reply
  8. Dec 30 2013

    Thanks – just trying to find how to configure NumberPicker and this was a great shortcut to understanding it.

    Reply

Leave a comment.

(required)
(required)

Note: HTML is allowed. Your email address will never be published and is only used for notification of comment replies by the blog owner.