Thursday, March 28, 2013

24 How to create custom Date Time Picker in Android

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.

24 comments:

  1. This is very inspiring, as getting from the start & Having no real background in programming (aside from making some adventures on ZX-81 and MSX), I want to get started on developing something for my own Android based eBook reader and android app development training and know that if you are android apps developer who wants to design and develop android-based apps you must go through the design guidelines set by the official Android user experience UX team.Read more even this online course seems to be interesting http://www.wiziq.com/course/13599-professional-android-app-development-training-1-on-1-sessions. Has anyone tried any online courses so far. Please do provide a light on this also.

    ReplyDelete
  2. all source code of this tutorial availble here: http://www.mediafire.com/?9wk4sxx811z0dlb

    ReplyDelete
  3. thanks man! I've been looking for this. How do I change the color or theme of the timepicker?

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. i have changed some code in the above given tutorial and make it look like default android date picker.
    follow the following link.--> http://hukum-android-lab.blogspot.in/2013/06/custom-date-picker-in-android.html

    and Thanks man for creating such wonderful tutorial....:)

    ReplyDelete
  6. how to change color of the timepicker

    ReplyDelete
  7. awesome mannn!!!! great and simple workkkkkk

    ReplyDelete
  8. Great effort - love the designt. I adapted the code so it has 2 of these for scheduling purposes in one activity. Hope it's ok to use this in one of my projects.Thanks :)

    ReplyDelete
  9. Perfect Solution.Works like a charm. Thanks for the awesome tutorial

    ReplyDelete
  10. Date Picker in android studio
    if you are beginner and do not know how to create data picker in android then this lecture can help a lot

    http://themasterworld.com/creating-date-picker-in-android/

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. http://www.geekbit.es/2015/11/custom-date-time-picker-for-android.html

    this one is easier to implement

    ReplyDelete
  14. Hi,

    Great work and detailed about how to create custom date time picker in android. This coding is very helpful to mobile application developers. Mobile application - Digital Pursuit

    ReplyDelete
  15. hi, nice tutorial but i require a picker like this can you help me achieve it thanks http://i.stack.imgur.com/QOhD5.jpg

    ReplyDelete
  16. Thank you , you save my day

    ReplyDelete
  17. DateTimePicker.DateTimePicker where can i find this attribute in android studtio
    And dependency file you used

    ReplyDelete