How can I create a custom dialog with two datepicker?

Question

I just started to learn Android as a hobby and I would like to create a dialog with two datepicker

final Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.data_picker_dialog);
dialog.setTitle(R.string.date_period_picker);
dialog.show();
return true;

How can I get the selected values from the dialog? Is there a possibility to include the OK/Cancel button automatically on the dialog?

Is there a library which has such a functionality(Start and end date/period selection)?

Answer 1

It's probably best to read about Dialogs and Pickers first.

As for the implementation, you can have two buttons: One to show a date picker for the start date and another for the end date.

Edit: If you really want to show 2 date pickers in 1 dialog, here's an example of how to do it. First, create a custom XML layout.

/res/layout/custom_date_picker.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <DatePicker
        android:id="@+id/dpStartDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:calendarViewShown="false" />

    <DatePicker
        android:id="@+id/dpEndDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:calendarViewShown="false" />

</LinearLayout>

Next is to use the above layout in a dialog:

// These variables will hold the date values later
private int startYear, startMonth, startDay, endYear, endMonth, endDay;

/**
 * Displays the start and end date picker dialog
 */
public void showDatePicker() {
    // Inflate your custom layout containing 2 DatePickers
    LayoutInflater inflater = (LayoutInflater) getLayoutInflater();
    View customView = inflater.inflate(R.layout.custom_date_picker, null);

    // Define your date pickers
    final DatePicker dpStartDate = (DatePicker) customView.findViewById(R.id.dpStartDate);
    final DatePicker dpEndDate = (DatePicker) customView.findViewById(R.id.dpEndDate);

    // Build the dialog
    AlertDialog.Builder builder = new AlertDialog.Builder(this);
    builder.setView(customView); // Set the view of the dialog to your custom layout
    builder.setTitle("Select start and end date");
    builder.setPositiveButton("OK", new DialogInterface.OnClickListener(){
        @Override
        public void onClick(DialogInterface dialog, int which) {
            startYear = dpStartDate.getYear();
            startMonth = dpStartDate.getMonth();
            startDay = dpStartDate.getDayOfMonth();
            endYear = dpEndDate.getYear();
            endMonth = dpEndDate.getMonth();
            endDay = dpEndDate.getDayOfMonth();
            dialog.dismiss();
        }});

    // Create and show the dialog
    builder.create().show();
}

Finally, you can show this dialog by simply calling showDatePicker().

Answer 2

Same for your layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<DatePicker
      android:id="@+id/datePicker1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

<DatePicker
      android:id="@+id/datePicker2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
</LinearLayout>