Getting Choosy with Dates and Times

What would your Task Reminder application be without a way to set the date and time for the reminder? Well, it wouldn't be a Task Reminder application at all! It would simply be a Task List application — and that's kind of boring if you ask me.

If you've done any programming with dates and times in other programming languages, you know that building a mechanism for a user to enter a date and a time can be a painstaking process all in itself. However, I'm happy to report that the Android platform has relieved Android programmers of this difficulty. The Android platform provides two classes that assist you in this process — the DatePicker and TimePicker — and these pickers also provide built-in classes that allow you to pop up a dialog box so that the user can select a date and a time. This means you have the option to either embed the DatePicker or TimePicker into your application's views or to use the Dialog classes, which saves you the process of creating a view in which to contain the DatePicker and TimePicker views.

Enough jibber-jabber about what the picker widgets can do. I'm sure you're ready to start using them!

Creating picker buttons

You have not added the DatePicker or TimePicker to the Task Reminder application yet, but you do so in this section. Part of the reminder_edit.xml file contains mechanisms to help display the DatePicker and TimePicker. These mechanisms are located after the EditText definitions discussed earlier in this chapter — two buttons with two labels above them, as shown in Listing 13-1. Please add this code to your reminder_edit.xml file now.

Listing 13-1: The Date and Time Buttons with Their Corresponding TextView Labels

<TextView android:layout_width=“wrap_content”                        →1
    android:layout_height=“wrap_content”
    android:text=“@string/date” />
<Button                                                              →4
    android:id=“@+id/reminder_date”
    android:layout_height=“wrap_content”
    android:layout_width=“wrap_content”
    />
<TextView android:layout_width=“wrap_content”                        →9
    android:layout_height=“wrap_content”
    android:text=“@string/time” />
<Button                                                             →12
    android:id=“@+id/reminder_time”
    android:layout_height=“wrap_content”
    android:layout_width=“wrap_content”
    />

The code lines are explained here:

Wiring up the date picker

When the user clicks the Date button, he should be able to edit the date. To do this, you need to declare the onClickListener() for the Date button, and then, when a click is detected, open a dialog box that allows the user to make the change. I show you how to do this in the following sections.

Setting up the Date button click listener

To implement this functionality, open the activity where your code is to be placed — for the Task Reminder application, open the ReminderEditActivity.java file.

In the onCreate() method, type the following code:

registerButtonListenersAndSetDefaultText();

Eclipse informs you that you need to create the method, so do that now. The easiest way to do this is by hovering your cursor over the method call's squiggly and choosing from the resulting context menu the “Create method ‘registerButtonListenersAndSetDefaultText()’” option. In the registerButtonListenersAndSetDefaultText() method, type the code shown in Listing 13-2.

Listing 13-2: Implementing the Date Button Click Listener

mDateButton.setOnClickListener(new View.OnClickListener() {          →1

    @Override
    public void onClick(View v) {                                    →4
           showDialog(DATE_PICKER_DIALOG);                           →5
    }
});
updateDateButtonText();                                              →8
updateTimeButtonText();                                              →9

This code is explained as follows:

private Button mDateButton;

mDateButton = (Button) findViewById(R.id.reminder_date);

private static final int DATE_PICKER_DIALOG = 0;
private static final int TIME_PICKER_DIALOG = 1;

Creating the showDialog() method

The showDialog() method performs some work for you in the base activity class, and at the end of the day, the only thing you need to know is that by calling showDialog() with an ID, the activity's onCreateDialog() method is called. At the bottom of your ReminderEditActivity file, type the code from Listing 13-3 to respond to the showDialog() method call.

Listing 13-3: Responding to showDialog() with onCreateDialog()

@Override
protected Dialog onCreateDialog(int id) {                                                                                                                 →2
    switch(id) {
       case DATE_PICKER_DIALOG:                                                                                                                           →4
         return showDatePicker();
    }
    return super.onCreateDialog(id);
}

private DatePickerDialog showDatePicker() {                                                                                                              →10
    DatePickerDialog datePicker = new DatePickerDialog(ReminderEditActivity.this, new DatePickerDialog.OnDateSetListener() {                             →13

            @Override
            public void onDateSet(DatePicker view, int year, int monthOfYear,
                   int dayOfMonth) {                                                                                                                     →17

            mCalendar.set(Calendar.YEAR, year);                                                                                                          →19
            mCalendar.set(Calendar.MONTH, monthOfYear);
            mCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth);                                                                                            →21
            updateDateButtonText();                                                                                                                      →22
            }
    }, mCalendar.get(Calendar.YEAR), mCalendar.get(Calendar.MONTH),
               mCalendar.get(Calendar.DAY_OF_MONTH));                                                                                                    →25
    return datePicker;                                                                                                                                   →26
}

private void updateDateButtonText() {                                                                                                                    →29
    SimpleDateFormat dateFormat = new SimpleDateFormat(DATE_FORMAT);                                                                                     →30
    String dateForButton = dateFormat.format(mCalendar.getTime());                                                                                       →31
    mDateButton.setText(dateForButton);                                                                                                                  →32
}

Each important line of code is explained as follows:

private Calendar mCalendar;
mCalendar = Calendar.getInstance();

private static final String DATE_FORMAT = “yyyy-MM-dd”;

The DatePickerDialog widget is now wired up to accept input from the user.

Wiring up the time picker

The TimePickerDialog allows users to select a time during the day in which they would like to be reminded of the task at hand.

Setting up a TimePickerDialog is almost identical to setting up a DatePickerDialog, the only thing that differs is that you'll be using a different constant and showing a different dialog. The first thing you need to do is declare the onClickListener() for the Time button. To do so, create a local mTimeButton variable at the top of the class file with the following code:

private Button mTimeButton;

You then need to initialize the variable in the onCreate() method as follows:

mTimeButton = (Button) findViewById(R.id.reminder_time);

Setting up the Time button click listener

Now that you have a Time button to work with, you can set up the click listener for it. In the registerButtonListenersAndSetDefaultText() method, type the code shown in Listing 13-4.

Listing 13-4: Implementing the Time Button's OnClickListener

mTimeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
       showDialog(TIME_PICKER_DIALOG);                               →4
    }
});

This entire method is the same as the Date button's onClickListener(), except that on line 4, you use a different constant as a parameter to the showDialog() method. You do this because when showDialog() is called, it in turn calls onCreateDialog() with that ID. When showDialog() calls onCreateDialog(), you can determine which dialog box to show according to the constant that you used in showDialog(). You need to create the TIME_PICKER_DIALOG constant at the top of the class file.

Now you need to go back to the onCreateDialog() method and add the following code after the return showDatePicker() code:

case TIME_PICKER_DIALOG:
    return showTimePicker();

Creating the showTimePicker() method

The showTimePicker() method has not been created. Create that method now by adding the full method definition in Listing 13-5.

Listing 13-5: The showTimePicker() Method

private TimePickerDialog showTimePicker() {
    TimePickerDialog timePicker = new TimePickerDialog(this, new
        TimePickerDialog.OnTimeSetListener() {                       →3
        @Override
        public void onTimeSet(TimePicker view, int hourOfDay, int minute){                                                →5
            mCalendar.set(Calendar.HOUR_OF_DAY, hourOfDay);          →6
            mCalendar.set(Calendar.MINUTE, minute);                  →7
            updateTimeButtonText();                                  →8
        }
    }, mCalendar.get(Calendar.HOUR_OF_DAY),                         →10
                  mCalendar.get(Calendar.MINUTE), true);            →11

    return timePicker;
}

The code in Listing 13-5 is fairly straightforward because it's almost identical to that of the showDatePicker() method. However, you can see differences on the following lines:

At the end of the method, the instance of the TimePickerDialog is returned to the onCreateDialog() method to allow it to show the dialog box to the end user.

On line 8, you made a call to updateTimeButtonText(). This method is very similar to the updateDateButtonText(), as shown previously in this chapter. Type the code from Listing 13-6 into the editor to create the updateTimeButtonText() method.

Listing 13-6: The updateTimeButtonText() Method

private void updateTimeButtonText() {
    SimpleDateFormat timeFormat = new SimpleDateFormat(TIME_FORMAT); →2
    String timeForButton = timeFormat.format(mCalendar.getTime());   →3
    mTimeButton.setText(timeForButton);                              →4
}

This code is explained as follows:

private static final String TIME_FORMAT = “kk:mm”;

At this point, you've set up the date and time picker dialog widgets to accept values from the user. The best part is, you did not have to write the date and time logic; you simply had to respond to the click listeners.