How to add Up and Down arrows to android EditText in Android

Question

how to add arrows to editText like these?

Is there a way to show the number picker in EditText ?

Answer 1

In your XML file

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

You can call setOnValueChangedListener method on number picker object to add value change listener to NumberPicker. public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.numberpicker);

       NumberPicker np = findViewById(R.id.numberPicker);

       np.setMinValue(2);
       np.setMaxValue(20);

       np.setOnValueChangedListener(onValueChangeListener);
    }

    NumberPicker.OnValueChangeListener onValueChangeListener =
            new     NumberPicker.OnValueChangeListener(){
        @Override
        public void onValueChange(NumberPicker numberPicker, int i, int i1) {
            Toast.makeText(MainActivity.this,
                    "selected number "+numberPicker.getValue(), Toast.LENGTH_SHORT);
        }
    };
}

Answer 2

Make a custom view composed of an EditText (or TextView) and 2 ImageButton's. This should get you started:

1. Create the class:

    public class MyNumberPickerView extends ConstraintLayout {
   
        private ImageButton incrementButton;
        private ImageButton decrementButton;
        private EditText numberEditText;
   
        public MyNumberPickerView(Context context) {
            super(context);
        }
   
        public MyNumberPickerView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
   
        public MyNumberPickerView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
   
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
            incrementButton = findViewById(R.id.increment);
            decrementButton = findViewById(R.id.decrement);
            numberEditText = findViewById(R.id.number);
        }
   
        // expose public functions for listeners, setting a number, etc.
    }
   

2. Create a layout:

    <?xml version="1.0" encoding="utf-8"?>
    <com.company.app.ui.common.MyNumberPickerView 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="wrap_content"
    android:layout_height="wrap_content">
   
        <ImageButton
            android:id="@+id/increment"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_arrow_up"
            app:layout_constraintBottom_toTopOf="@+id/number"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />
   
        <EditText
            android:id="@+id/number"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:gravity="center"
            android:inputType="number"
            android:selectAllOnFocus="true"
            app:layout_constraintBottom_toTopOf="@id/decrement"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/increment"
            tools:text="99" />
   
        <ImageButton
            android:id="@+id/decrement"
            style="@style/Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_arrow_down"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/number" />
   
    </com.company.app.ui.common.MyNumberPickerView>
   

3. Include your custom view in other layouts like:

    <include android:id="@+id/numberpicker"                     
        layout="@layout/view_mynumberpicker"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
   

4. And use it after inflation:

    MyNumberPickerView myNumberPickerView = findViewById(R.id.numberpicker);
   

Answer 3

I have some project like there, but i am not finish the sorce code, maybe you can found good ide. sorry bad english. Check my project https://github.com/AgungDev/ClockScrollComponent