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: