Number Picker in Android

There are many Android Applications in our phones that we use in our day-to-day life, and many of them use a scrollable list of items to select the quantity of something. This scrollable list of numbers can be shown by a number picker.  With the help of Number Picker, users can experience a smooth and consistent experience throughout the application to increase or decrease the quantity of something in the application.

What is Number Picker?

It is a widget that gives a feature to select an item or number from available options or a given range. So, in this article, we are going to create Number Picker. For creating Number Picker, we are going to create an android application in android studio. A sample video is given below to get an idea about what we are going to do in this article.

Note: This Android article covered in both Java and Kotlin languages. 

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the below code to it.

XML

<!-- main page on which Number Picker will be shown-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Number Picker"
        android:textColor="#00FF00"
        android:textSize="40sp"
        android:layout_gravity="center"/>

    <NumberPicker
        android:id="@+id/picker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:solidColor="#00FF00"
        android:layout_gravity="center"
        android:layout_marginTop="100dp"/>

</LinearLayout>

Step 3: Working with the MainActivity file

Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail. 

Kotlin

package com.example.numberpickergfg

import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // for setting the max and
        // min value of number picker
        picker1.maxValue=50
        picker1.minValue=1

        // for changing the background
        // color of title bar
        val aBar = supportActionBar
        val cd = ColorDrawable(Color.parseColor("#FF00FF00"))
        aBar?.setBackgroundDrawable(cd)

    }
}

Java

package com.example.numberpickergfg;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.widget.NumberPicker;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // for setting the max and
        // min value of number picker
        picker1.setMaxValue(50);
        picker1.setMinValue(1);


        // for change the background color of title bar
        ActionBar aBar; aBar= getSupportActionBar();
        ColorDrawable cd = new ColorDrawable(Color.parseColor("#FF00FF00"));
        aBar.setBackgroundDrawable(cd);
    }
}

Output: