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.

Answer 1

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+"");
}