Android NumberPicker Tutorial With Example

Hello Readers! In this post, we are going to learn about how to use android numberPicker widget in any android application. We will also go through different attributes of numberPicker widget that can be used to customise it.

Output

Tutorialwing Android NumberPicker Integer Output Android NumberPicker Accepting Only Integer Values

Tutorialwing Android NumberPicker Integer Output

Tutorialwing Android NumberPicker String output Android NumberPicker Accepting array of string values

Tutorialwing Android NumberPicker String output

Getting Started

NumberPicker widget can be defined as below –

NumberPicker is a widget that allows user to select a number from predefined range.

Attributes of Android NumberPicker Widget

Some of the popular attributes of android numberPicker inherited from linearLayout are –

Sr. XML Attributes Description
1 android:divider Drawable to use as a vertical divider between buttons
2 android:gravity Specifies how an object should be placed inside LinearLayout i.e. specifies position, CENTER, VERTICAL_CENTER, HORIZONTAL_CENTER etc. relative to the boundaries of the linearLayout
3 android:orientation Specifies whether linearLayout should be column or row. i.e. views inside linearLayout will be aligned as horizontally or vertically.
4 android:weightSum Specifies maximum weight sum

Some of the popular attribute of android numberPicker inherited from viewGroup are –

Sr. XML Attributes Description
1 android:animationCache Defines whether layout animation should create a drawing cache for their children
2 android:clipChildren Defines whether a child is limited to draw inside of its bounds or not
3 android:clipToPadding Defines whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero
4 android:layoutMode Defines layout mode of this viewGroup

Some of the popular attribute of android numberPicker inherited from View are –

Sr. XML Attributes Description
1 android:alpha Sets alpha of the view
2 android:background Sets background of the view
3 android:focusable Sets whether view can take focus or not
4 android:id Sets unique identifier of the view
5 android:padding Sets padding of view
6 android:visibility Sets whether this view is visible or not



Example of Android NumberPicker Widget

At first, we will create android application. Then, we will use numberPicker widget in this application.

1. Creating New Project

Follow steps below to create new project. Please ignore the steps if you have already created a new application.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as NumberPicker. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Now, we will modify xml and java file to use numberPicker widget in the application.

2. Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">NumberPicker</string>
</resources>

3. Use NumberPicker Widget in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_marginTop="20dp"
	android:orientation="horizontal">

	<NumberPicker
		android:id="@+id/numberPicker"
		android:layout_width="0dp"
		android:layout_height="wrap_content"
		android:layout_weight="1"/>
</LinearLayout>

In activity_main.xml file, we have defined android numberPicker widget. Now, we will access this widget in java file and perform some operations on it.

We can provide two type of data to the numberPicker. They are –
a. Only Integer values.
b. Array of String values.

So, we will see how we can provide each type of data to the numberPicker. At first, we will see how to provide only integer values to the numberPicker.

4. Show Only Integer Values in NumberPicker

Open src/main/java/com.tutorialwing.numberpicker/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.numberpicker;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.NumberPicker;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		NumberPicker numberPicker = findViewById(R.id.numberPicker);
		if (numberPicker != null) {
			numberPicker.setMinValue(0);
			numberPicker.setMaxValue(10);
			numberPicker.setWrapSelectorWheel(true);
			numberPicker.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
				@Override
				public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
					String text = "Changed from " + oldVal + " to " + newVal;
					Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
				}
			});
		}
	}
}

Here, we are only providing integer values to the numberPicker. setMinValue() method sets the minimum value to the numberPicker. setMaxValue() method sets maximum value the numberPicker. setWrapSelectorWheel() sets whether first number should be shown once we reach at end. Finally, we have set a listener to show toast message that displays the new value and old value.

5. Show Array Of String Values in NumberPicker

Open src/main/java/com.tutorialwing.numberpicker/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.numberpicker;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.NumberPicker;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		NumberPicker numberPicker = findViewById(R.id.numberPicker);
		if (numberPicker != null) {
			final String[] values = {"Blue", "Magenta", "Yellow", "Red", "Pink", "White", "Green", "Violet"};
			numberPicker.setMinValue(0);
			numberPicker.setMaxValue(values.length - 1);
			numberPicker.setDisplayedValues(values);
			numberPicker.setWrapSelectorWheel(true);
			numberPicker.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
				@Override
				public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
					String text = "Changed from " + values[oldVal] + " to " + values[newVal];
					Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
				}
			});
		}
	}
}

Here, we are providing array of string values to the numberPicker. values contains arrays of string values. setDisplayedValues() method sets the values to be displayed in the numberPicker. Remaining methods are same as we discussed above.

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml

Code inside src/main/AndroidManifest.xml file is as below –

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.numberpicker"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of tutorial on Android NumberPicker widget.

Leave a Reply