How to create custom Date Time Picker in Android

1. Make application interface:
The main layout of this app demo is very simple layout. It have one edit test, one button. When user touch on the button the DateTimePicket will show for choose the date and time, the result will be show on edit text. Here is some xml code to make main layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <EditText android:id="@+id/edittext1"

        android:hint="date and time"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_toLeftOf="@+id/button1"

        android:maxLines="1"

        android:layout_alignParentLeft="true"

    />

    <Button android:id="@+id/button1"

        android:text="Choose"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:onClick="button_click"

    />

 </RelativeLayout>

To show the custom picker shown in picture above i created a dialog contains three buttons and a new custom view DateTimePicker. The xml file design for dialog is shown here:

                                            Download : Code

   

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/DateTimeDialog" android:layout_width="fill_parent"

        android:layout_height="wrap_content">

        <DateTimePicker.DateTimePicker

                android:id="@+id/DateTimePicker" android:layout_width="fill_parent"

                android:layout_height="wrap_content" />

        <LinearLayout android:id="@+id/ControlButtons"

                android:layout_width="fill_parent" android:layout_height="wrap_content"

                android:layout_below="@+id/DateTimePicker"

                android:padding="5dip">

                <Button android:id="@+id/SetDateTime" android:layout_width="0dip"

                        android:text="@android:string/ok" android:layout_weight="1"

                        android:layout_height="wrap_content"  />

                <Button android:id="@+id/ResetDateTime" android:layout_width="0dip"

                        android:text="Reset" android:layout_weight="1"

                        android:layout_height="wrap_content" />

                <Button android:id="@+id/CancelDialog" android:layout_width="0dip"

                        android:text="@android:string/cancel" android:layout_weight="1"

                        android:layout_height="wrap_content" />

        </LinearLayout>

</RelativeLayout>

Finally, we need to create an interface for new DateTimePicker view. It simply has only some button and edit text. Here is all following xml codes to do that. Of course, you can make it better than me.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="fill_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"

        android:padding="5dip" android:id="@+id/DateTimePicker">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:baselineAligned="true"

    android:orientation="horizontal">

   

        <LinearLayout

        android:id="@+id/month_container"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:gravity="center"

        android:orientation="vertical" >

        <Button

            android:id="@+id/month_plus"

            android:layout_width="40dp"

            android:layout_height="28dp"    

            android:background="@drawable/image_button_up"/> 

        <EditText

            android:id="@+id/month_display"

            android:layout_width="45dp"

            android:layout_height="35dp"

            android:background="@drawable/picker_middle"

            android:focusable="false"

            android:gravity="center"

            android:singleLine="true"

            android:textColor="#C0C0C0" >

        </EditText>

        <Button

            android:id="@+id/month_minus"

            android:layout_width="40dp"

            android:layout_height="28dp"       

            android:background="@drawable/image_button_down" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/date_container"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:gravity="center"

        android:orientation="vertical" >

        <Button

            android:id="@+id/date_plus"

            android:layout_width="40dp"

            android:layout_height="28dp"       

            android:background="@drawable/image_button_up" />

        <EditText

            android:id="@+id/date_display"

            android:layout_width="45dp"

            android:layout_height="35dp"

            android:background="@drawable/picker_middle"

            android:gravity="center"

            android:inputType="number"

            android:textColor="#C0C0C0"

            android:singleLine="true" />

        <Button

            android:id="@+id/date_minus"

            android:layout_width="40dp"

            android:layout_height="28dp"       

            android:background="@drawable/image_button_down"/>

    </LinearLayout>

    <LinearLayout

        android:id="@+id/year_container"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:gravity="center"

        android:orientation="vertical" >

        <Button

            android:id="@+id/year_plus"

            android:layout_width="40dp"

            android:layout_height="28dp"       

                android:background="@drawable/image_button_up" />

        <EditText

            android:id="@+id/year_display"

            android:layout_width="45dp"

            android:layout_height="35dp"

            android:background="@drawable/picker_middle"

            android:gravity="center"

            android:inputType="number"

            android:textColor="#C0C0C0"

            android:singleLine="true" />

        <Button

            android:id="@+id/year_minus"

            android:layout_width="40dp"

            android:layout_height="28dp"       

            android:background="@drawable/image_button_down" />

    </LinearLayout>

    <LinearLayout

            android:id="@+id/hour_container"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginLeft="20dp"

            android:layout_marginRight="5dp"

            android:layout_marginTop="5dp"

            android:layout_marginBottom="5dp"

            android:gravity="center"

            android:orientation="vertical" >

            <Button

                android:id="@+id/hour_plus"

                android:layout_width="40dp"

                android:layout_height="28dp"           

                android:background="@drawable/image_button_up" />

            <EditText

                android:id="@+id/hour_display"

                android:layout_width="45dp"

                android:layout_height="35dp"

                android:background="@drawable/picker_middle"

                android:gravity="center"

                android:inputType="number"

                android:textColor="#C0C0C0"

                    android:singleLine="true" >

            </EditText>

            <Button

                android:id="@+id/hour_minus"

                android:layout_width="40dp"

                android:layout_height="28dp"       

                android:background="@drawable/image_button_down"/>

        </LinearLayout>

        <LinearLayout

            android:id="@+id/min_container"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="5dp"

            android:gravity="center"

            android:orientation="vertical" >

            <Button

                android:id="@+id/min_plus"

                android:layout_width="40dp"

                android:layout_height="28dp"       

                android:background="@drawable/image_button_up" />

            <EditText

                android:id="@+id/min_display"

                android:layout_width="45dp"

                android:layout_height="35dp"

                android:background="@drawable/picker_middle"

                android:gravity="center"

                android:inputType="number"

                android:textColor="#C0C0C0"

                android:singleLine="true" />

            <Button

                android:id="@+id/min_minus"

                android:layout_width="40dp"

                android:layout_height="28dp"       

                android:background="@drawable/image_button_down"/>

        </LinearLayout>

</LinearLayout>

</RelativeLayout>

2. Time for java code:

The following code below implement when click on the button in main screen.

 public void button_click(View view){ 

        // Create the dialog

        final Dialog mDateTimeDialog = new Dialog(this);

        // Inflate the root layout

        final RelativeLayout mDateTimeDialogView = (RelativeLayout) getLayoutInflater().inflate(R.layout.date_time_dialog, null);

        // Grab widget instance

        final DateTimePicker mDateTimePicker = (DateTimePicker) mDateTimeDialogView.findViewById(R.id.DateTimePicker);

        mDateTimePicker.setDateChangedListener(this);

                 

        // Update demo edittext when the "OK" button is clicked

        ((Button) mDateTimeDialogView.findViewById(R.id.SetDateTime)).setOnClickListener(new OnClickListener() {

         public void onClick(View v) {

               mDateTimePicker.clearFocus();

               // TODO Auto-generated method stub

               String result_string = mDateTimePicker.getMonth() + "/" + String.valueOf(mDateTimePicker.getDay()) + "/" + String.valueOf(mDateTimePicker.getYear())

                                                + "  " + String.valueOf(mDateTimePicker.getHour()) + ":" + String.valueOf(mDateTimePicker.getMinute());

               edit_text.setText(result_string);

               mDateTimeDialog.dismiss();

         }

         });

         // Cancel the dialog when the "Cancel" button is clicked

         ((Button) mDateTimeDialogView.findViewById(R.id.CancelDialog)).setOnClickListener(new OnClickListener() {

                public void onClick(View v) {

                     // TODO Auto-generated method stub

                     mDateTimeDialog.cancel();

                }

         });

                // Reset Date and Time pickers when the "Reset" button is clicked

       

         ((Button) mDateTimeDialogView.findViewById(R.id.ResetDateTime)).setOnClickListener(new OnClickListener() {

                public void onClick(View v) {

                      // TODO Auto-generated method stub

                      mDateTimePicker.reset();

                }

         });

                 

        // Setup TimePicker

        // No title on the dialog window

        mDateTimeDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

        // Set the dialog content view

        mDateTimeDialog.setContentView(mDateTimeDialogView);

        // Display the dialog

        mDateTimeDialog.show();                

}