Android NumberPicker

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.