241 How to create custom Date Time Picker in Android

Tweet

By the original SDK, you can choose the time and date for your app by using DatePicker, TimePicker and Date - TimePickerDialog but there is nothing built into Android to choose Date and Time in the same time like such a DateTimePicker. In this tutorial, i try to create a custom DateTimePicker that user can choose both date and time at the same time.
Here is a result of this tutorial:

This project is developed in Eclipse 4.2.0.
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:

   

<?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();                

}

All we do in this function is create a new dialog, Inflate the root layout for that dialog then set OnClick Listener for three button in interface of dialog, finally we show diallog to the screen. When user click on one of three button, we must execute some task associate with each button. Exactly, cancel the dialog when the "Cancel" button is clicked, Reset Date and Time pickers when the "Reset" button is clicked and Update demo edittext when the "OK" button is clicked. 

The most important thing is we declare a DateTimePicker object mDateTimePicker and use many methods are  defined in the java class file like reset(), getDay(), getMonth() etc. The source code of DateTimePicker class available here.

3. DEMO

3.1. Run application

3.2. After click on the Choose button

3.3. click "OK" button on DateTimePicker Dialog

Reference: http://datetimepicker.googlecode.com/svn/trunk/

                   and

                   https://github.com/luminousman/DatePicker

PS: May be i make a lot of English grammar mistakes when create this tutorial cause my low level of English. Sorry about that.