how to change numberpicker to show plus and minus buttons

Question

I have a numberpicker -

 <NumberPicker
                android:id="@+id/shopping_cart_holder_quantity_picker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/noto_sans"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

I am trying to implement a numberpicker like the following picture -

Yeah, this is in iOS. I was wondering how can I implement the same thing in Android.

Does this answer your question? [Is it possible to make a horizontal NumberPicker?](https://stackoverflow.com/questions/6796243/is-it-possible-to-make-a-horizontal-numberpicker) — Md. Asaduzzaman, Jan 08 '20 at 10:07

score 3 · Answer 1 · answered Jan 08 '20 at 10:08

You can achieve this effect by simply using a android library. I would suggest this one.

Just add following lines to your gradle file:

compile 'com.github.travijuu:numberpicker:1.0.7'

Then you can implement the number picker in your .xml file like this:

<com.travijuu.numberpicker.library.NumberPicker
    android:id="@+id/number_picker"
    android:layout_width="130dp"
    android:layout_height="40dp"
    numberpicker:min="0"
    numberpicker:max="10"
    numberpicker:value="-5"
    numberpicker:unit="1"
    numberpicker:focusable="false"
    numberpicker:custom_layout="@layout/number_picker_custom_layout" />

You can customize your picker like this:

    NumberPicker numberPicker = (NumberPicker) findViewById(R.id.number_picker);
    numberPicker.setMax(15);
    numberPicker.setMin(5);
    numberPicker.setUnit(2);
    numberPicker.setValue(10);

Isn't it risky to use a library that has not been updated for 4 years and going? — Alon Shlider, Jan 08 '20 at 11:33

Avinash · Accepted Answer · 2020-01-08T11:30:18.880

You don't need to use any library for implement this functionality in android.You can use your custom view and write minimum code for increase and decrease quantity.i have an example, please look into this.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content">
<android.support.constraint.ConstraintLayout
    android:id="@+id/constraint_inner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent">

   <ImageView
    android:id="@+id/imgMinus"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:padding="5dp"
    android:src="@drawable/minus"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/txtNumbers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="24dp"
        android:layout_marginStart="24dp"
        android:inputType="number"
        android:textColor="@android:color/black"
        app:layout_constraintTop_toTopOf="@+id/imgMinus"
        app:layout_constraintBottom_toBottomOf="@id/imgMinus"
        app:layout_constraintStart_toEndOf="@+id/imgMinus"/>

    <ImageView
        android:id="@+id/imgPlus"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginStart="24dp"
        android:src="@drawable/plus"
        android:padding="5dp"
        app:layout_constraintStart_toEndOf="@+id/txtNumbers"
        app:layout_constraintTop_toTopOf="parent" />
  </android.support.constraint.ConstraintLayout>
  </android.support.constraint.ConstraintLayout>

In your class file take a global variable for set new quantity on your TextView and set click event of plus and minus icon.

int num=0;(Global Variable)

1-On Click of Plus icon=>

       num++;
      setText();

2-On Click of Minus icon=>

      if(num>0){
          num--;
         }
        setText();

setText is a function for update your quantity in textview

   public void setText(){
     txtNumber.setText(num+"");
}

This is a horrible solution. Not only is it ugly, but furthermore you are abusing an imageview as a pseudo button... — Andrew, Oct 13 '20 at 21:00

how to change numberpicker to show plus and minus buttons

2 Answers2