Android NumberPicker

NumberPicker can be defined as below –

"NumberPicker allows users to select a number from predefined range."

Attributes of Android NumberPicker

Some of the popular attributes of android NumberPicker inherited from View are –

S. No.	XML Attributes	Description
1	android:id	This is unique id of the NumberPicker to uniquely identify the NumberPicker.
2	android:width	Height of the NumberPicker.
3	android:height	Height of the NumberPicker.
4	android:alpha	Sets alpha of the view.
5	android:background	Sets background of the view.
6	android:focusable	Sets whether view can take focus or not.
7	android:padding	.Sets padding of view
8	android:visibility	Sets whether this view is visible or not.

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

S. No.	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 attributes of android NumberPicker inherited from linearLayout are –

S. No.	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.

At first, we will create android application. Then, we will use NumberPicker in the application.

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

S. No.	Steps
1	Open Android Studio.
2	Click on Start a new Android Studio Project Write application name as NumberPicker. Then, click next button.
3	Select minimum SDK you need. However, we have selected 14 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 tutorial to Create a New Project to know steps in detail.

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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context=".MainActivity">

<NumberPicker
android:id="@+id/numberPicker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

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

We can provide two type of data to the NumberPicker. They are –

Only Integer values.
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.

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

package com.ukacademe.numberpicker;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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're 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 displayed once we reach at end. Finally, we have set a listener to show toast message that displays the new value and old value.

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

package com.ukacademe.numberpicker;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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. The setDisplayedValues() method sets the values to be displayed in the NumberPicker. Remaining methods are same as we discussed above.

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

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

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

<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 below.

Android NumberPicker

Attributes of Android NumberPicker

Modify Values folder

NumberPicker in xml file

Show Only Integer Values in NumberPicker

Show Array Of String Values in NumberPicker

AndroidManifest.xml

Output

Course Topic