Sunday, March 4, 2018

android kotlin - NumberPicker example

MainActivity.kt 

package com.cfsuman.kotlintutorials

import android.os.Bundle
import android.widget.NumberPicker
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import java.text.NumberFormat
import java.util.*


class MainActivity : AppCompatActivity() {

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

        // Get the widgets reference from XML layout
        val rootLayout = findViewById<ConstraintLayout>(R.id.rootLayout)
        val numberPicker = findViewById<NumberPicker>(R.id.numberPicker)
        val numberPickerString = findViewById<NumberPicker>(
            R.id.numberPickerString)
        val numberPickerFormatter = findViewById<NumberPicker>(
            R.id.numberPickerFormatter)
        val textView = findViewById<TextView>(R.id.textView)


        // Set the number picker minimum and maximum value
        numberPicker.minValue = 5
        numberPicker.maxValue = 10

        numberPicker.wrapSelectorWheel = false

        // Set number picker value changed listener
        numberPicker.setOnValueChangedListener { picker, oldVal, newVal ->
            //Display the newly selected number to text view
            textView.text = "Selected Value : $newVal"
        }


        // Display string values to the number picker
        // At first, initialize a new array instance with string values
        val colors = arrayOf("Red", "Green", "Blue", "Yellow",
            "Magenta", "Black", "Pink")

        // Set the number picker minimum and maximum values
        numberPickerString.minValue = 0
        numberPickerString.maxValue = colors.size - 1

        // Set the valued to be displayed in number picker
        numberPickerString.displayedValues = colors

        // Set number picker value change listener
        numberPickerString.setOnValueChangedListener { _, _, newVal ->
            // Display the picker selected value to text view
            textView.text = "Selected Color : ${colors[newVal]}"
        }


        // Manage the number picker which format value
        numberPickerFormatter.minValue = 1;
        numberPickerFormatter.maxValue = 10
        // Set value programmatically
        numberPickerFormatter.value = 5

        // Format the value
        numberPickerFormatter.setFormatter { i ->
            NumberFormat.getCurrencyInstance(
                Locale.US
            ).format(i.toLong())
        }

        // Number picker value changed listener
        numberPickerFormatter.setOnValueChangedListener {
                _, _, newVal ->
            textView.text = "Formatted Value : $newVal"
        }


        // Set a click listener for root layout widget
        rootLayout.setOnClickListener {
            // Display the pickers selected value on a toast message
            Toast.makeText(
                applicationContext,
                "Selected ${numberPicker.value} " +
                        "and ${colors[numberPickerString.value]}",
                Toast.LENGTH_SHORT
            ).show()
        }
    }
}
activity_main.xml 

<?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"
    android:id="@+id/rootLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DCDCDC"
    android:padding="24dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="24dp"
        android:textSize="24sp"
        android:fontFamily="sans-serif"
        app:layout_constraintTop_toTopOf="parent" />

    <NumberPicker
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="32dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <NumberPicker
        android:id="@+id/numberPickerString"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/numberPicker"
        app:layout_constraintStart_toEndOf="@+id/numberPicker" />

    <NumberPicker
        android:id="@+id/numberPickerFormatter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/numberPickerString"
        app:layout_constraintStart_toEndOf="@+id/numberPickerString" />

</androidx.constraintlayout.widget.ConstraintLayout>
More android examples