In this second installment on my series on Android development, I am going to focus on the DateTimePickerDialog. Now, the DateTimePicker widget in Android is straightforward and allows the user to select a date from a calendar. You create an instance of the widget in the layout’s XML file, and then you can customize the widget using its attributes. However, in most applications, this may not be practical because the widget takes up a significant amount of screen real estate on the device. This is where the DateTimePickerDialog comes into play. Using this technique allows us to display the calendar as a dialog, allowing the user to select the date and then returning that date to our activity which saves us some much-needed screen space. The following steps will show how to complete this task.

  1. When we create our dialog, the code will be very much the same every time. Android being Android, we must do things the Android way. In the following code, we create a class named DateTimePickerFragment that inherits from DialogFragment and implements IOnDateSetListener that will handle the user selected date. In the first method of the class, we create an instance of the DatePickerFragment, which is the dialog in which our DatePicker will be housed. In the second method, OnCreateDialog, we are creating the DatePickerDialog that will be shown inside of the fragment. Notice that inside this method I am setting the minimum date to today through a Java method. Depending on your application you could set this to a date in the past and use a similar call to set the maximum date as well. In the third method, OnDateSet, is where we will get the date that is selected by the user and return to the activity.

  1. To call the NewInstance method of our DateTimePickerFragment, we need to create a button that the user will click to select the date. In the following example, I have already created a button named “btnCheckInDate” on the layout that I am using. This example is merely showing the event handler for the button, in which I am calling the NewInstance method. You will notice that I am passing an argument called ActionHandlerCheckInDate. This call is explained in step 3.

  1. The below example shows the action handler that will handle the date that is selected by the user. In other words, this is how we will return the data from our DateTimePicker. Here I have created a TextView widget named “txtCheckInDate” in which to house the user selected date. So, now when the user selects the date, it will be passed back to the activity and shown to the user in a TextView widget. And now we can have our user select a date, and the only screen real estate that is necessary is the button. Using this technique allows for a better UI for the user that is not cluttered with calendars, and instead allows us to house the calendars in a dialog.

I hope that this short tutorial helps you with developing a good UI for your users. Please let me know your thoughts by commenting below. If you liked the content in this blog, remember to share by clicking the buttons below.

 

Happy Programming!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s