How to achieve this custom number picker?

Question

Im trying to make something like this

This is what i wanna achieve
How do you achieve the second value and the third value picker ?
Do i need to change to datepicker ?

*EDIT

for the second value i tried this method :

private String[] getDatesFromCalender() {
    Calendar c1 = Calendar.getInstance(TimeZone.getTimeZone("GMT+7"));
    Calendar c2 = Calendar.getInstance(TimeZone.getTimeZone("GMT+7"));

    List<String> dates = new ArrayList<String>();
    DateFormat dateFormat = new SimpleDateFormat("EE, dd MMM", new Locale("en", "Singapore"));
    dates.add(dateFormat.format(c1.getTime()));

    for (int i = 0; i < 60; i++) {
        c1.add(Calendar.DATE, 1);
        dates.add(dateFormat.format(c1.getTime()));
    }
    c2.add(Calendar.DATE, -60);

    for (int i = 0; i < 60; i++) {
        c2.add(Calendar.DATE, 1);
        dates.add(dateFormat.format(c2.getTime()));
    }
    return dates.toArray(new String[dates.size() - 1]);
}

then i put this on onCreate

 date = getDatesFromCalender();

and set the numberpicker

 private void setUpDatePicker() {
    npBookingDate.setDisplayedValues(date);
    npBookingDate.setMaxValue(date.length - 1);
    npBookingDate.setMinValue(0);
    npBookingDate.setFormatter(new NumberPicker.Formatter() {
        @Override
        public String format(int value) {
            return date[value];
        }
    });
}

The result is what i wanted to but it add another date before today check the pict:
Here is what i tried
How to disable dates before today dates ?

Answer 1

OK , for showing two number picker in same dialog, i will post a code snippet as shown below

LinearLayout LL = new LinearLayout(mContext);
LL.setOrientation(LinearLayout.HORIZONTAL);
//
final NumberPicker aNumberPicker = new NumberPicker(mContext);
aNumberPicker.setMaxValue(50);
aNumberPicker.setMinValue(1);
//
final NumberPicker aNumberPickerA = new NumberPicker(mContext);
aNumberPickerA.setMaxValue(11);
aNumberPickerA.setMinValue(1);
aNumberPickerA.setDisplayedValues(new String[] { "Tea Cup", "Glass","Plate","Small Plate","Cutlets","Medium","Piece","Katori","Balls","Serving","egg"});
//
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(50, 50);
params.gravity = Gravity.CENTER;
//
LinearLayout.LayoutParams numPicerParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
numPicerParams.weight = 1;
//
LinearLayout.LayoutParams qPicerParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
qPicerParams.weight = 1;
//
LL.setLayoutParams(params);
LL.addView(aNumberPicker,numPicerParams);
LL.addView(aNumberPickerA,qPicerParams);

so , for three number picker, you can add one more number picker view inside the linear layout and attach this view to the dialog fragment, and you can achieve the funtionality