NumberPicker in Android - Examples and Libraries

An Introduction to NumberPicker in Android with Examples.

NumberPicker is a widget in Android that allows users to select a number from a range of values. It is commonly used in apps where users need to input numerical values, such as age, weight, or height. In this article, we will discuss how to use NumberPicker in Android, step by step.

Step 1: Adding the NumberPicker Widget to Your Layout

Adding the NumberPicker widget to your layout is easy. Simply add the following code to your XML file:

<NumberPicker
    android:id="@+id/numberPicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

This will create a NumberPicker widget with default values. You can customize the appearance of the widget by adding additional attributes to the XML code.

Step 2: Setting the Range of Values

The next step is to set the range of values that the user can select from. This is done using the setMinValue() and setMaxValue() methods. For example, if you want the user to select a number between 1 and 10, you would use the following code:

val numberPicker = findViewById<NumberPicker>(R.id.numberPicker)
numberPicker.minValue = 1
numberPicker.maxValue = 10

Step 3: Adding a Value Change Listener

To detect when the user has selected a new value, you can add a value change listener to the NumberPicker widget. This is done using the setOnValueChangedListener() method. For example:

numberPicker.setOnValueChangedListener { picker, oldVal, newVal ->
    // Do something with the new value
}

In this example, the lambda expression inside the setOnValueChangedListener() method will be executed whenever the user selects a new value. The oldVal parameter contains the previous value, and the newVal parameter contains the new value.

Step 4: Customizing the Appearance of the Widget

You can customize the appearance of the NumberPicker widget by adding additional attributes to the XML code. For example, you can change the text color, background color, and divider color using the following attributes:

<NumberPicker
    android:id="@+id/numberPicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/black"
    android:background="@color/white"
    android:dividerColor="@color/grey" />

Step 5: Using NumberPicker with Fragments

If you are using NumberPicker with fragments, you need to be careful about when you initialize the widget. If you try to initialize the widget in the onCreateView() method of your fragment, you may get a NullPointerException. To avoid this, you should initialize the widget in the onViewCreated() method instead. For example:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val numberPicker = view.findViewById<NumberPicker>(R.id.numberPicker)
    numberPicker.minValue = 1
    numberPicker.maxValue = 10
    numberPicker.setOnValueChangedListener { picker, oldVal, newVal ->
        // Do something with the new value
    }
}

More Examples

You can build an input component for picking numbers using a spinner or a chooser dialog. Or you can use an already existing solution. In this tutorial we want to look at some solutions that can allow us pick numbers in ase we need such a functionality in our android apps.

Here are the solutions:

(a). NumberSlidingPicker

It is an Android Number Picker with gestures.

NumberSlidingPicker is a widget that enables the user to select a number from a predefined range. Progress value can be changed using the up and down arrows, click and edit the editable text or swiping up/down or left/right.

Check it below in the demo gif:

Step 1: Install it

Start by installing this widget:

Add jitpack in your project level build file:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Then the implementation statement in app levelbuild file:

implementation 'com.github.sephiroth74:NumberSlidingPicker:1.0.3'

Now sync for it to be downloaded.

Step 2: Add it To Layout

You need to add this numberpicker to your xml layout:

    <it.sephiroth.android.library.numberpicker.NumberPicker
        style="@style/NumberPicker.Filled"
        app:picker_max="100"
        app:picker_min="0"
        android:progress="50"
        app:picker_stepSize="2"
        app:picker_tracker="exponential"
        app:picker_orientation="vertical"
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... />

Step 3: Write Code

In your code you can attach a listener to the numberpicker to get when the user selects a given number:

        numberPicker.doOnProgressChanged { numberPicker, progress, formUser ->
            // progress changed
        }

        numberPicker.doOnStartTrackingTouch { numberPicker ->
            // tracking started
        }

        numberPicker.doOnStopTrackingTouch { numberPicker ->
            // tracking ended
        }

Example

Here's an example showing how to use this numberpicker widget:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.databinding.ViewDataBinding
import androidx.lifecycle.ViewModelProviders
import it.sephiroth.android.library.numberpicker.NumberPicker
import it.sephiroth.android.numberpicker.demo.databinding.ActivityMainBinding
import timber.log.Timber

class MainActivity : AppCompatActivity() {
    private lateinit var presenter: Presenter
    private lateinit var model: MainViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        model = ViewModelProviders.of(this).get(MainViewModel::class.java)
        presenter = Presenter()

        val binding: ActivityMainBinding =
                DataBindingUtil.setContentView<ViewDataBinding>(this, R.layout.activity_main) as ActivityMainBinding
        binding.lifecycleOwner = this
        binding.model = model
        binding.presenter = presenter

        // regular listener
//        numberPicker.setListener {
//            onProgressChanged { numberPicker, progress, fromUser ->
//                Timber.v("doOnProgressChanged($progress, $fromUser)")
//            }
//
//            onStartTrackingTouch {
//                Timber.v("onStartTrackingTouch")
//            }
//
//            onStopTrackingTouch {
//                Timber.v("onStopTrackingTouch")
//            }
//        }
    }

    inner class Presenter {
        fun onProgressChanged(numberPicker: NumberPicker, progress: Int, fromUser: Boolean) {
            Timber.d("onProgressChanged")
            model.globalProgress.value = progress
        }

        fun onStartTracking(numberPicker: NumberPicker) {
            Timber.d("onStartTracking")
        }

        fun onStopTracking(numberPicker: NumberPicker) {
            Timber.d("onStopTracking")
        }
    }
}

You can find the full code here.

Reference

Find code referencehere.

(b).NumberPicker

An android library that provides a simple and customizable NumberPicker.

This widget has the following features:

• Customizable fonts(color, size, strikethrough, underline, typeface)
• Customizable dividers(color, distance, length, thickness, type)
• Horizontal and Vertical mode are both supported
• Ascending and Descending order are both supported
• Also supports negative values and multiple lines

Here is demo of the project we will create:

Here is how you use this library to create a numberpicker:

Step 1: Install Library

Install the library by declaring it in your app/build.gradle file:

implementation 'io.github.ShawnLin013:number-picker:2.4.13'

In your project-level register mavenCentral as follows:

buildscript {
    repositories {
        mavenCentral()
    }
}

Step 2: Add to Layout

Add the numberpicker widget to your xml layout:

<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" />

Step 3: Write Code

If you are using Java you can reference the numberpicker:

NumberPicker numberPicker = (NumberPicker) findViewById(R.id.number_picker);

You can programmatically set the divider color:

// Set divider color
numberPicker.setDividerColor(ContextCompat.getColor(this, R.color.colorPrimary));
numberPicker.setDividerColorResource(R.color.colorPrimary);

You can set the formatter:

numberPicker.setFormatter(getString(R.string.number_picker_formatter));
numberPicker.setFormatter(R.string.number_picker_formatter);

You can also set the text color or text size:

// 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);

You can also use a custom 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);

Here is how you can set a value:

numberPicker.setMaxValue(59);
numberPicker.setMinValue(0);
numberPicker.setValue(3);

And here is how you can set string values:

// 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);

And here is how you can handle the event listeners:

// 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()));
        }
    }
});

Full Example

Step 1: Create Project

Create android studio project or download the one provided.

Step 2: Install Library

Install the library as has been discussed.

Step 3: Add to Layout

Add NumberPicker to your xml layout as shown:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.shawnlin.numberpicker.sample.MainActivity"
    tools:showIn="@layout/activity_main">

    <com.shawnlin.numberpicker.NumberPicker
        android:id="@+id/number_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.shawnlin.numberpicker.NumberPicker
        android:id="@+id/horizontal_number_picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        app:np_width="180dp"
        app:np_height="64dp"
        app:np_accessibilityDescriptionEnabled="true"
        app:np_dividerColor="@color/colorAccent"
        app:np_max="10"
        app:np_min="0"
        app:np_order="descending"
        app:np_orientation="horizontal"
        app:np_selectedTextColor="@color/colorAccent"
        app:np_selectedTextSize="@dimen/selected_text_size"
        app:np_selectedTypeface="@string/roboto_light"
        app:np_textColor="@color/colorAccent"
        app:np_textSize="@dimen/text_size"
        app:np_typeface="@string/roboto_light"
        app:np_fadingEdgeEnabled="false"
        app:np_wrapSelectorWheel="true"
        app:np_dividerType="underline" />

</LinearLayout>

Step 4: MainActivity

Replace your MainActivity with the following code:

MainActivity.java

import android.graphics.Typeface;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.content.ContextCompat;

import com.shawnlin.numberpicker.NumberPicker;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    private static String TAG = "NumberPicker";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final 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);

        // Set string values
//        String[] data = {"A", "B", "C", "D", "E", "F", "G", "H", "I"};
//        numberPicker.setMinValue(1);
//        numberPicker.setMaxValue(data.length);
//        numberPicker.setDisplayedValues(data);

        // 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()));
                }
            }
        });
    }

}

Proceed to download the code below.

Reference

Here are the reference links:

Number	Link
1.	Download Example
2.	Follow code author

Conclusion

In conclusion, NumberPicker is a useful widget for allowing users to select numerical values in Android apps. By following the steps outlined in this article, you can easily add a NumberPicker widget to your app and customize its appearance and behavior.