RSS Feed

Time and Date Inputs in Android

Posted on Friday, June 15, 2012 in Coding

When designing Android apps, I have found that it is very helpful to look to the standard Google apps for best practices, guidelines and Android design guide inspiration. Their apps tend to set the trends for how design in Android will evolve over time. Unfortunately, sometimes even these Google apps use shortcuts and/or custom widgets which are not yet available on stock Android. Sometimes, these components are open sourced, like the Google IO app which always has nice examples of how to do stuff. Other times, the components are not openly available, and therefore, in order to “copy with pride”, you have to imagine how the widget works and implement yourself, or ask on Stack Overflow Winking smile.

A good example of this is the News and Weather app  which has been available since Gingerbread. The views used horizontal scrolling tabs with thinner tab title heights than was the norm in Android. The source code for this app was not available since the app was (I think) specific to phones “by Google”. Well, eventually, these kinds of tabs made their way to the Holo theme in Android 3.0+ which is good for everyone.

android_calendar_new_eventOne Google app which I find very useful for learning about “form inputs” is the Calendar app. The “new event” activity is full of almost all kinds of widgets you can imagine. Text fields, date, time, spinners, checkboxes etc. It is a gold mine for examples of input heavy forms. Luckily, the Android calendar source code is available as part of the stock Android distribution and is open source.

Recently I was writing “form” fragments for creating new transactions in Gnucash Mobile and I wanted to implement time and date inputs like are found in the Calendar app. I first tried using the simple DatePicker widget and a whole calendar was pasted into the view which is obviously not what I wanted. So I Googled a bit and found this Stack Overflow question.

Basically, this kind of view is a simple text view which is styled to look like a spinner. So your text view now looks like a spinner, which hints to the user to tap-to-select. You could use a button as well, but I think that looks out-of-place in the holo theme. Next we need a DatePickerDialogFragment which will be displayed.

You need to pass an OnDateSetListener as a parameter when creating the DatePickerDialogFragment. Also, the default constructor is required to prevent the app from crashing on device orientation changes.

Next, create an onClickListener for your TextView and display a DatePickerDialogFragment when it is triggered. When the dialog is closed, you can get the get time in your listener, format it and display it in your TextView.

Share and Enjoy:
  • Twitter
  • Google Bookmarks
  • Digg
  • del.icio.us
  • Facebook

Bring on the comments

  1. gopi says:

    how to show the picked date in a text box for date of birth selection purpose…help me pls

    • Ngewi Fet says:

      That’s what the OnDateSetListeners are for. If your activity implements that interface, then pass it to the DatePickerDialogFragment as a constructor and in the onDateSet(…) method, you can set the date of the textbox

  2. victor says:

    hi,

    I was trying your method too, but i don’t understand how to implement it, i have post a question to stack overflow, but seem no luck, mind to guide me

    http://stackoverflow.com/questions/13249696/android-text-spinner-with-date-picker

  3. Johan says:

    Nice! I think which it was a spinner xD

  4. Pavan Deshpande says:

    Hey Ngewi Fet Please remove the above my comment (pavan deshpande)

  5. prakriti says:

    hi, I am trying to implement your code but having some issues, as i get errors when i am using newFragment.show(), it says this method is not applicable for the arguments (FragmentTransaction,String), please help me i really want to solve this.
    Thanks

  6. tomlock says:

    I see one problem in your solution – the non default constructor in DialogFragment. When the e.g. screen orientation changes, the default constructor is fired and in effect the new date cannot be passed back to textView. Do you know a better solution how to pass a callback to DialogFragment?

  7. pavankumar says:

    forword my mail id any type of coding

  8. Giovanni says:

    i copy and paste your atePickerDialogFragment class
    but on android sdk i have this error:
    “Avoid non-default constructors in fragments: use a default constructor plus Fragment#setArguments(Bundle) instead”

    i don’t understand how can i fix this problem.
    in your article you wrote:
    “Also, the default constructor is required to prevent the app from crashing on device orientation changes.”

    so i think for this reason i have this error but i don’t know what i have to do.

    thx

    • Ngewi Fet says:

      Was that a warning or a compile error!?
      Android encourages you to use a static method for instantiating fragments. So you can add a static method for creating new objects of the class and use that to avoid the warning. See this question on StackOverflow http://goo.gl/uXEdLa

  9. Matt says:

    To get around the compile error, I put the OnDateSetListener inside the DatePickerDialogFragment and then added a method like:

    public void setTextView( TextView callback ) {

    mDateTextView = callback;
    }

    which I then call in the onDateSet:

    @Override
    public void onDateSet( DatePicker view, int year, int monthOfYear, int dayOfMonth ) {

    Calendar cal = new GregorianCalendar( year, monthOfYear, dayOfMonth );
    SimpleDateFormat sdf = new SimpleDateFormat( “dd/MM/yyyy” );
    mDateTextView.setText( sdf.format( cal.getTime() ) );
    }

    Hope this helps! Thanks for the example.

Leave a Reply to Juan Rey

Click here to cancel reply.