Android Group multiple number pickers together

Question

I would like to group number pickers together so they would form a number

with this I was able to make it look like this

XML:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.appcompat.widget.Toolbar 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:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:title="@string/app_name"
        app:subtitle="@string/app_description"
        app:expandable="true"
        app:expanded="true"
        tools:context=".MainActivity">
    
        <LinearLayout
            android:id="@+id/mainLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:orientation="horizontal">
    
            <NumberPicker
                android:id="@+id/numberPicker1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
    
            <NumberPicker
                android:id="@+id/numberPicker2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
    
            <NumberPicker
                android:id="@+id/numberPicker3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <NumberPicker
                android:id="@+id/numberPicker4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
    
        </LinearLayout>
        
    
    </androidx.appcompat.widget.Toolbar>

MainActivity.java

    package com.company.app;
    
    import android.app.Activity;
    import android.content.Context;
    import android.content.Intent;
    import android.content.SharedPreferences;
    import android.os.Build;
    import android.os.Bundle;
    import android.os.VibrationEffect;
    import android.os.Vibrator;
    import android.widget.NumberPicker;
    import android.widget.Toast;
    
    import androidx.annotation.NonNull;
    import androidx.annotation.RequiresApi;
    import androidx.appcompat.app.AppCompatActivity;
    
    import com.google.android.material.textview.MaterialTextView;
    import com.company.app;
    
    public class MainActivity extends AppCompatActivity {
    
        private SharedPreferences sharedPreferences;
    
    
        @RequiresApi(api = Build.VERSION_CODES.Q)
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //Number picker
            NumberPicker numberPicker = findViewById(R.id.numberPicker1);
            if (numberPicker != null) {
    
                //If API level >= 29
                numberPicker.setSelectionDividerHeight(0);
    
                numberPicker.setMinValue(0);
                numberPicker.setMaxValue(5);
                numberPicker.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
                    @Override
                    public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                        //String text = "Changed from " + oldVal + " to " + newVal;
                        //Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
                    }
                });
            }
    
            //Number picker
            NumberPicker numberPicker2 = findViewById(R.id.numberPicker2);
            if (numberPicker2 != null) {
    
                //If API level >= 29
                numberPicker2.setSelectionDividerHeight(0);
    
                //Else read here: https://stackoverflow.com/a/48144749/3368585
    
                numberPicker2.setMinValue(0);
                numberPicker2.setMaxValue(5);
                numberPicker2.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
                    @Override
                    public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                        //String text = "Changed from " + oldVal + " to " + newVal;
                        //Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
                    }
                });
            }
    
            //Number picker
            NumberPicker numberPicker3 = findViewById(R.id.numberPicker3);
            if (numberPicker3 != null) {
    
                //If API level >= 29
                numberPicker3.setSelectionDividerHeight(0);
    
                //Else read here: https://stackoverflow.com/a/48144749/3368585
    
                numberPicker3.setMinValue(0);
                numberPicker3.setMaxValue(5);
                numberPicker3.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
                    @Override
                    public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                        //String text = "Changed from " + oldVal + " to " + newVal;
                        //Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
                    }
                });
            }
    
            //Number picker
            NumberPicker numberPicker4 = findViewById(R.id.numberPicker4);
            if (numberPicker2 != null) {
    
                //If API level >= 29
                numberPicker4.setSelectionDividerHeight(0);
    
                //Else read here: https://stackoverflow.com/a/48144749/3368585
    
                numberPicker4.setMinValue(0);
                numberPicker4.setMaxValue(5);
                numberPicker4.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
                    @Override
                    public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                        //String text = "Changed from " + oldVal + " to " + newVal;
                        //Toast.makeText(MainActivity.this, text, Toast.LENGTH_SHORT).show();
                    }
                });
            }
    
    }

Mine currently looks like this

But it should look like this (aligned and on center of course (mine image is a bit crooked)

also I would like this collection of NumberPickers to behave more like one number, like you can still change individual pickers, but that you would get one onChangeEvent which would get you one number (sort of like combination lock where you change individual wheels, but at the end the whole number has to be correct)

Because right now, I have to have 4 pickers, each having its own event and it duplicates code to much

Thanks for Anwsering and Best Regards

Hoa.Tran · Answer 1 · 2023-03-31T07:16:41.630

I don't know what you want, but if you want short code you can try this:

public class MainActivity extends AppCompatActivity {
    Integer[] pass =  {0,0,0,0};
    String currentPass = "0000";// 0000 is your default selection in number picker

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn_check).setOnClickListener(view -> {
            currentPass = "";
            for (Integer item : pass) {
                currentPass += item.toString();
            }
            Toast.makeText(getApplication(), currentPass, Toast.LENGTH_LONG).show();
        });
        NumberPicker numberPicker = findViewById(R.id.numberPicker1);
        NumberPicker numberPicker2 = findViewById(R.id.numberPicker2);
        NumberPicker numberPicker3 = findViewById(R.id.numberPicker3);
        NumberPicker numberPicker4 = findViewById(R.id.numberPicker4);
        List<NumberPicker> list = new ArrayList<>();
        list.add(numberPicker);
        list.add(numberPicker2);
        list.add(numberPicker3);
        list.add(numberPicker4);
        for (int i = 0; i < list.size(); i++) {
            final int posChange = i;
            NumberPicker item = list.get(i);
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                item.setSelectionDividerHeight(0);
            }
            item.setMinValue(0);
            item.setMaxValue(5);
            item.setOnValueChangedListener((picker, oldVal, newVal) -> pass[posChange] = newVal);
        }
    }
}

Android Group multiple number pickers together

1 Answers1