Skip to main content

Number Picker - Android Tutorial

Here we are going to see how to use NumberPicker.

NumberPicker is a widget that enables the user to select a number from a predefined range.


We can see the NumberPicker in Old Style of TimePicker


How it works - 

       You can select the values on scroll up or down
       You can also edit the value that on view

Lets see an Example to implement (E.g. for Select the date)




Create and XML
<LinearLayout
    android:id="@+id/id_picker_ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3">

    <NumberPicker
        android:id="@+id/year_pick"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="1dp"
        android:layout_weight="1"/>

    <NumberPicker
        android:id="@+id/month_pick"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="0.5dp"
        android:layout_marginLeft="0.5dp"
        android:layout_weight="1"/>

    <NumberPicker
        android:id="@+id/date_pick"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="1dp"
        android:layout_weight="1"/>

</LinearLayout>

In Your class

if (pickYear != null) {
    pickYear.setMinValue(1950);
    pickYear.setMaxValue(2019);
    pickYear.setWrapSelectorWheel(true);
    pickYear.setValue(2019);
    pickYear.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
        @Override
        public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
            String text = "YEAR from " + oldVal + " to " + newVal;
            Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
            strYear ""+newVal;
        }
    });
}

Text in Number Picker

if (pickMonth != null) {
    final String[] values = {"January""February""March""April""May""June""July""August""September""October""November""December"};
    pickMonth.setMinValue(0);
    pickMonth.setMaxValue(values.length - 1);
    pickMonth.setDisplayedValues(values);
    pickMonth.setWrapSelectorWheel(true);
    pickMonth.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
        @Override
        public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
            String text = "MONTH from " + oldVal + " to " + newVal;
            month =newVal;
            setDay();
            strMonth = values[newVal];
            Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
        }
    });
}

if (pickDay != null) {
    int maxValue;

    if(month==0||month==2||month==4||month==6||month==7||month==9||month==11){
        maxValue = 31;
    }else if(month==3||month==5||month==8||month==10||month==12){
        maxValue = 30;
    }else{
        maxValue = 29;
    }
    pickDay.setMinValue(1);
    pickDay.setMaxValue(maxValue);
    pickDay.setWrapSelectorWheel(true);
    pickDay.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
        @Override
        public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
            String text = "DAY from " + oldVal + " to " + newVal;
            strDat ""+newVal;
            Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
        }
    });
}

___________________________________________________________________________

Happy Coding...

Comments

Popular posts from this blog

Zoom Image - Android Tutorial

Here we are going to see how to zoom an image in Imageview Will see it through a sample 1. Create xml with an ImageView <? 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" >     < LinearLayout         android:layout_width="200dp"         android:layout_height="200dp"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"    ...

Spinner with Search on DropDown - Android Tutorial

If you have more values on Dropdown of Spinner its hard to select the last item by making a long scroll. To overcome this issue Android introduced a component called  AutoCompleteTextView Yes it is!!! Then why Spinner with Search? There may be some requirement even though gave much knowledge about it. There is a simple and good library that helps us to achieve this -  SearchableSpinner Gradle dependencies {     ...     implementation 'com.toptoche.searchablespinner:searchablespinnerlibrary:1.3.1' } Usage Now replace your Normal Android Spinner on XML with the following < com.toptoche.searchablespinnerlibrary.SearchableSpinner     android:id="@+id/id_city"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:background="@android:color/transparent"     android:padding="5dp" /> ______________________________________...

Bluetooth Chat Application - Android Tutorial

In this tutorial, we will see about how to design an Android layout for chat application using Chat Bubbles  and the main part is chat via Bluetooth . Main objective of this post is to give an idea about how to allow two-way text chat over Bluetooth in android. Bubbles: Chat bubbles are background image that expands horizontally and vertically as required based on the message posted. Bubbles are Nine-patch Images. Image Nine-patch Image In creating Android chat bubbles, nine-patch image plays a crucial role.  Nine-patch image  is a bitmap which stretches to fit the content posted in the View where it is applied as a background. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension  .9.png , and saved into the  res/drawable/  directory of your project. The border is used to define the stretchable and static areas of the image. You indicate a stretchable section ...