Date and time picker dialog

First make the time and date picker appear in the same dialog

Here i can help you some what: you can create a layout consisting of a DatePicker and a TimePicker in a LinearLayout with the orientation set to vertical.

custom_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
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>

    <TimePicker
        android:id="@+id/timePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </TimePicker>

</LinearLayout>

Then use this layout to create your dialog.

Dialog dialog = new Dialog(mContext);

dialog.setContentView(R.layout.custom_dialog);
dialog.setTitle("Custom Dialog");

To react to the user interacting with your TimePicker, do something like this:

TimePicker tp = (TimePicker)dialog.findViewById(R.id.timepicker1);
tp.setOnTimeChangedListener(myOnTimechangedListener);

To get the values from the Date- and TimePicker when the user has finished setting them, add an OK button in your dialog, and then read the date and time values from the Date- and TimePicker when the user presses OK.

To make something that looks exactly as in your screen shots I recommend you to make all things custom with your own logic.