Like all fragments, instances of DialogFragment are managed by the FragmentManager of the hosting activity.

To get a DialogFragment added to the FragmentManager and put onscreen, you can call the following methods on the fragment instance:

    public void show(FragmentManager manager, String tag)
    public void show(FragmentTransaction transaction, String tag)

The string parameter uniquely identifies the DialogFragment in the FragmentManager’s list. Whether you use the FragmentManager or FragmentTransaction version is up to you. If you pass in a FragmentTransaction, you are responsible for creating and committing that transaction. If you pass in a FragmentManager, a transaction will automatically be created and committed for you.

Here, you will pass in a FragmentManager.

In CrimeFragment, add a constant for the DatePickerFragment’s tag. Then, in onCreateView(…), remove the code that disables the date button and set a View.OnClickListener that shows a DatePickerFragment when the date button is pressed.

public class CrimeFragment extends Fragment {

    private static final String ARG_CRIME_ID = "crime_id";
    private static final String DIALOG_DATE = "DialogDate";
    ...
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        ...
        mDateButton = (Button) v.findViewById(R.id.crime_date);
        mDateButton.setText(mCrime.getDate().toString());
        mDateButton.setEnabled(false);
        mDateButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentManager manager = getFragmentManager();
                DatePickerFragment dialog = new DatePickerFragment();
                dialog.show(manager, DIALOG_DATE);
            }
        });

        mSolvedCheckBox = (CheckBox) v.findViewById(R.id.crime_solved);
        ...
        return v;
    }
}

Run CriminalIntent and press the date button to see the dialog (Figure 12.4).

Figure 12.4  An AlertDialog with a title and a button

Next, you are going to add a DatePicker widget to your AlertDialog using the following AlertDialog.Builder method:

    public AlertDialog.Builder setView(View view)

This method configures the dialog to display the passed-in View object between the dialog’s title and its button(s).

In the project tool window, create a new layout resource file named dialog_date.xml and make its root element DatePicker. This layout will consist of a single View object – a DatePicker – that you will inflate and pass into setView(…).

Configure the DatePicker as shown in Figure 12.5.

Figure 12.5  DatePicker layout (layout/dialog_date.xml)

In DatePickerFragment.onCreateDialog(Bundle), inflate this view and then set it on the dialog.

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    View v = LayoutInflater.from(getActivity())
        .inflate(R.layout.dialog_date, null);

    return new AlertDialog.Builder(getActivity())
        .setView(v)
        .setTitle(R.string.date_picker_title)
        .setPositiveButton(android.R.string.ok, null)
        .create();
}

Run CriminalIntent. Press the date button to confirm that the dialog now presents a DatePicker. As long as you are running Lollipop or later, you will see a calendar picker (Figure 12.6).

Figure 12.6  DatePicker with a calendar

The calendar picker in Figure 12.6 was introduced along with material design. This version of the DatePicker widget ignores the calendarViewShown attribute you set in your layout. If you are running a previous version of Android, however, you will see the old spinner-based DatePicker version that respects that attribute (Figure 12.7).

Figure 12.7  An AlertDialog with a DatePicker

Either version works fine. The newer one sure is pretty, though.

You may be wondering why you went to the trouble of defining and inflating a layout when you could have created the DatePicker object in code, like this:

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    DatePicker datePicker = new DatePicker(getActivity());

    return new AlertDialog.Builder(getActivity())
        .setView(datePicker)
        ...
        .create();
}

Using a layout makes modifications easy if you change your mind about what the dialog should present. For instance, what if you wanted a TimePicker next to the DatePicker in this dialog? If you are already inflating a layout, you can simply update the layout file and the new view will appear.

Also, the selected date in the DatePicker is automatically preserved across rotation. (Try it.) How does this happen? Remember that Views can save state across configuration changes, but only if they have an ID attribute. When you created the DatePicker in dialog_date.xml you also asked the build tools to generate a unique ID value for that DatePicker.

If you created the DatePicker in code, you would have to programmatically set an ID on the DatePicker for its state saving to work.

Your dialog is onscreen and looks good. In the next section, you will wire it up to present the Crime’s date and allow the user to change it.