Is it possible to make a horizontal NumberPicker?

I couldn't find a reliable solution so I made my own in the end, but I needed it to look like a circular cog, so it's adapted for that use case.

You can get the idea from the source though.. Here it is:

https://github.com/milosmns/actual-number-picker


I was looking for a similar solution, and created an implementation based on the screenshot in this question. Mind you it is fairly basic and will just allow for integer numbers and setting a minimum and maximum value. (Any extra features you will need to add yourself.)

This is how it will look:

horizontal number picker screenshot

You need a layout file and a class file for the custom component, and then you can use it in your other layout (and class) files.

Layout file: numberpicker_horizontal.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btn_less"
        android:layout_width="0sp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="-" />

    <EditText
        android:id="@+id/et_number"
        android:layout_width="0sp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:textAlignment="center"
        android:inputType="number"
        android:text="0" />

    <Button
        android:id="@+id/btn_more"
        android:layout_width="0sp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="+" />
</LinearLayout>

Class file: HorizontalNumberPicker.java

public class HorizontalNumberPicker extends LinearLayout {
    private EditText et_number;
    private int min, max;

    public HorizontalNumberPicker(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        inflate(context, R.layout.numberpicker_horizontal, this);

        et_number = findViewById(R.id.et_number);

        final Button btn_less = findViewById(R.id.btn_less);
        btn_less.setOnClickListener(new AddHandler(-1));

        final Button btn_more = findViewById(R.id.btn_more);
        btn_more.setOnClickListener(new AddHandler(1));
    }

    /***
     * HANDLERS
     **/

    private class AddHandler implements OnClickListener {
        final int diff;

        public AddHandler(int diff) {
            this.diff = diff;
        }

        @Override
        public void onClick(View v) {
            int newValue = getValue() + diff;
            if (newValue < min) {
                newValue = min;
            } else if (newValue > max) {
                newValue = max;
            }
            et_number.setText(String.valueOf(newValue));
        }
    }

    /***
     * GETTERS & SETTERS
     */

    public int getValue() {
        if (et_number != null) {
            try {
                final String value = et_number.getText().toString();
                return Integer.parseInt(value);
            } catch (NumberFormatException ex) {
                Log.e("HorizontalNumberPicker", ex.toString());
            }
        }
        return 0;
    }

    public void setValue(final int value) {
        if (et_number != null) {
            et_number.setText(String.valueOf(value));
        }
    }

    public int getMin() {
        return min;
    }

    public void setMin(int min) {
        this.min = min;
    }

    public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
    }
}

Then include it in your other layout files in the following way (replacing com.yourpackage with your own package name):

<com.yourpackage.HorizontalNumberPicker
    android:id="@+id/np_channel_nr"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

You can then use the component like any other component, and use the getValue() method to retrieve the value currently set:

// get a reference to the component
final HorizontalNumberPicker np_channel_nr = dialogView.findViewById(R.id.np_channel_nr);

// use value in your code
final int nr = np_channel_nr.getValue();

You cannot change NumberPicker AFAIK, but writing your own should be fairly straightforward.


Nope. In fact, you can't even really use it yet, even though it appears in the Graphical Layout builder. It's still protected.

This question has some related info: Android Number Picker Dialog