Date and Time Picker Views | Android Developer Tutorial (Part 20)

Continuing my tutorials on some UI related stuff… In Part 16 & 17, I spoke about Simple ListView and Custom ListView. In Part 18, though it seems like a tutorial on Threads and Handlers, I have touched upon ProgressDialog, another view.


Here I would like to talk on the DatePicker and TimePicker that are bundled with the SDK. Both are very similar. So, I will talk only about DatePicker, but the sample code will have both.

Typically, we would want an end user to be able to set a date though a DatePickerDialog that pops-up on some user action. So, I have a button “Set Date” on the click of which a DatePickerDialog pops-up. Once the user selects a date and “sets” it, it is displayed back in a TextView field.

So, the code associated with the button is:

pickDate.setOnClickListener( new OnClickListener() {
@Override
    public void onClick(View v) {
        showDialog(DATE_DIALOG_ID);
    }
});

showDialog(…) is a method available on an Activity Itself. It just takes an integer to help decide which dialog should actually be shown. This is decided in the onCreateDialog(…) method that gets automatically invoked when showDialog(…) is called.

Here is the code for the same:

protected Dialog onCreateDialog(int id){
    switch(id) {
        case DATE_DIALOG_ID:
            return new DatePickerDialog(this, dateListener, year, month, day);
        case ….
    }
    return null;
}

In this method, when the int passed is DATE_DIALOG_ID, a new DatePickerDialog is passed along with the values for year, month and day. Where did I set values for these? In the onCreate(…) method itself, I have done this:

final Calendar cal = Calendar.getInstance();
year = cal.get(Calendar.YEAR);
month = cal.get(Calendar.MONTH);
day = cal.get(Calendar.DAY_OF_MONTH);

Also note that a handle to a listener is expected to be given to the DatePickerDialog. I will come to this listener a little later.

I have also updated the Date - TextView with these values in the updateDate() method which is invoked in the onCreate(…) method itself.

private void updateTime() {
    timeDisplay.setText(new StringBuilder().append(hours).append(':')
    .append(min));
}

So far, what I have done is shown how to create a Dialog and set the date.

Once the dialog shows up, when a user sets the date and clicks ‘set’, the listener that is invoked in on the DatePickerDialog. The method is onDateSetListener whose handle is passed during the creation of the DatePickerDialog itself.

private DatePickerDialog.OnDateSetListener dateListener =
    new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int yr, int monthOfYear, int dayOfMonth) {
            year = yr;
            month = monthOfYear;
            day = dayOfMonth;
            updateDate();
     }
};

In this method, on the click on the dialog, we are setting the day, month, year values to the new values that the user selected and also calling the updateDate() method to refresh the TextView with what the user selected.

It is this simple.

Same thing can be done with the TimePicker as well. The only difference is that you can pass a Boolean variable to say whether you want the time in 24 hour or 12 hour pattern.

Here is the complete code for the same.