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

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 –

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

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

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.

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.