Written by Mike James
Thursday, 10 September 2015
Article Index
Coding the TimePicker
Date Picker
Number Picker
Multi-Digit Input
Summary & Conclusion

## Multi-Digit Input

Finally if you want to create a multi-digit input - say hundreds, tens, units - then simply use three NumberPickers. This is more tricky than it first appears if you want to dynamically track the current value across more than one NumberPicker.

For example, to build a three-digit input you first need to place three NumberPickers on the design surface with ids numberPicker1, numberPicker2 and numberPicker3. Also add a TextView somewhere convenient:

You could initialize each of the NumberPickers in turn but it is instructive to use an array of NumberPickers to do the job:

`NumberPicker[] nps=new NumberPicker[3]; nps[0]= (NumberPicker)           findViewById(R.id.numberPicker1); nps[1]= (NumberPicker)           findViewById(R.id.numberPicker2); nps[2]= (NumberPicker)           findViewById(R.id.numberPicker3);`

Now we have an array of NumberPicker objects we can initialize them all in the same way using a for loop but first we need the array of values to be used:

`String[] values=new String[10]; for(int i=0;i<values.length;i++){ values[i]=Integer.toString(i); }`

As we are using 0 to 9 this could be done as an index without using an array but this makes the example more general.

Now we have the array of values we can initialize the NumberPickers:

`for(int i=0;i<3;i++){ nps[i].setMaxValue(values.length-1); nps[i].setMinValue(0); nps[i].setDisplayedValues(values); nps[i].setOnValueChangedListener(onValueChanged); }`

Notice that the same event handler is used for all of the NumberPickers. In some cases this is the way to do things in other it is better to have an event handler for each widget.

The next small problem is how to update the value displayed in a TextView when one of the NumberPickers changes its value.

Again the simplest solution for an example is to get the values from each of the NumberPickers using a for loop:

`NumberPicker.OnValueChangeListener onValueChanged       =new NumberPicker.OnValueChangeListener() { @Override public void onValueChange(    NumberPicker picker,     int oldVal,     int newVal) {`` NumberPicker[] nps=new NumberPicker[3]; nps[0]=  (NumberPicker) findViewById(R.id.numberPicker1); nps[1]=  (NumberPicker) findViewById(R.id.numberPicker2); nps[2]=  (NumberPicker) findViewById(R.id.numberPicker3); String temp=""; for(int i=0;i<3;i++){  String[] values=nps[i].getDisplayedValues();  temp=values[nps[i].getValue()]+temp;`` } TextView tv=(TextView)findViewById(R.id.textView); tv.setText(temp);``} };`

In this case we don't use any of the event method's parameters we simply get the three NumberPickers and get their DisplayValues as a String array and the current value using the index returned by getValue.

The only tricky but is building up the string of digits to be displayed in temp. If you aren't sure what is going on try changing the line that sets temp to read:

` temp=temp+values[nps[i].getValue()];`

In the jargon of math String concatenation is not commutative - in the jargon of programming it matters which end you stick something new on to a String.

Of course as all three NumberPickers share the same set of values we really only need to getDisplayedValues once but this is more general. Also it is very obvious that parts of the code are repeated and it would be better to refactor to create a function to get the three NumberPickers for example.

If you run the program you should be able to alter what is displayed in the TextView in a sensible three digit place value way:

The complete program, which you will find in the CodeBin, is:

` `

`import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.NumberPicker;import android.widget.TextView;`

`public class MainActivity extends AppCompatActivity {`

` @Override`` protected void onCreate(Bundle savedInstanceState{ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);``  NumberPicker.OnValueChangeListener onValueChanged    =new NumberPicker.OnValueChangeListener() { @Override public void onValueChange(        NumberPicker picker,         int oldVal,         int newVal) {``  NumberPicker[] nps=new NumberPicker[3];  nps[0]= (NumberPicker)                          findViewById(R.id.numberPicker1);  nps[1]= (NumberPicker)             findViewById(R.id.numberPicker2);  nps[2]= (NumberPicker)             findViewById(R.id.numberPicker3);  String temp="";  for(int i=0;i<3;i++){   String[] values=nps[i].getDisplayedValues();   temp=values[nps[i].getValue()]+temp;``  }  TextView tv=     (TextView) findViewById(R.id.textView);  tv.setText(temp);``  } };``  String[] values=new String[10]; for(int i=0;i<values.length;i++){  values[i]=Integer.toString(i); }`

` NumberPicker[] nps=new NumberPicker[3]; nps[0]= (NumberPicker)           findViewById(R.id.numberPicker1); nps[1]= (NumberPicker)           findViewById(R.id.numberPicker2); nps[2]= (NumberPicker)           findViewById(R.id.numberPicker3); for(int i=0;i<3;i++){  nps[i].setMaxValue(values.length-1);  nps[i].setMinValue(0);  nps[i].setDisplayedValues(values);  nps[i].setOnValueChangedListener(onValueChanged); }``}`

Last Updated ( Saturday, 15 October 2016 )