How to use NumberPicker in Android with Kotlin

This post will show you how to use the Android NumberPicker widget in any Android application. We will also discuss various attributes of his NumberPicker widget that can be used for customization.

Android NumberPicker Widget Example

First, let's create an Android application. Then use the NumberPicker widget in this application.

Creating a New Project

Follow these steps to create a new project. And ignore the steps if you have already created a new application.

Step Description

1. Open Android Studio.

2. Navigate to File -> New -> New Project. Write the application name as NumberPicker. Then click the Next button.

3. Select the minimum required SDK, However, I chose 17 as my minimum SDK. Then click the Next button.

4. Select Empty Activity => click next => and click finish.

5. If you have followed the above process correctly, you will get the newly created project successfully. However, you can also visit the post to create a new project and learn more about the steps.

Now modify the XML and KT files to use the NumberPicker widget in your application. Using the NumberPicker Widget in an XML File Open the res/layout/activity_main.xml file. Then add the following code:

<?XML version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.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="match_parent"

        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

In the activity_main.xml file, I defined the Android NumberPicker widget. Then access this widget in a kt file and do some manipulation.

Display ArrayOfString values ​​in NumberPicker

Open src/main/java/com.oodles.numberpicker/MainActivity.kt file. Then add the following code:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

    }

    override fun onStart() {

        super.onStart()

        val numberPicker = findViewById(R.id.numberpicker)

        numberPicker.minValue = 0  //set minimum value of NumberPicker

        numberPicker.maxValue = data.size - 1  //set maximum value of NumberPicker

    }

}

Here the numberPicker only accepts integer values. The minValue property sets the minimum value of the numberPicker. The maxValue property sets the maximum value of the numberPicker. wrapSelectorWheel sets whether to display the first number when the end is reached. Finally, set up a listener to display a toast message showing the new and old values.

Displaying an Array of String Values ​​in a NumberPicker

Open the file src/main/java/com.oodles.numberpicker/MainActivity.kt. Then add the following code:

class MainActivity : AppCompatActivity() {

    Val data = mutableListOf("DATA 1", "DATA 2", "DATA 3", "DATA 4") // initialise mutable list so you can manipulate it.

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

    }

    override fun onStart() {

        super.onStart()

        val numberPicker = findViewById(R.id.numberpicker)

        numberPicker.minValue = 0  //set minimum value of NumberPicker

        numberPicker.maxValue = data.size - 1  //set maximum value of NumberPicker

        numberPicker.displayedValues = data.toTypedArray()  // set DisplayValue in NumberPicker

    }

}

Here we are providing the numberPicker with an array of string values. value contains an array of string values. The displayedValues method sets the values ​​to display in the numberPicker. The rest of the method is the same as described above. And then we run the program.