Android Calendar View for Date Picker

33
votes

I'm writing my first app, and I have a question about DatePicker.

My app requires the user to input a date. The most user-friendly way would be to popup a calendar-like widget that displays the current month like a calendar grid - something like this:

enter image description here

I want to use that in place of the DatePicker interface - which has Month, Day, and Year fields, each with an up and down button to increment/decrement.

Is this type of functionality built into any Android widget or view, or would I have to design my own custom component to do this? I figured this would already exist, seeing how much this type of UI is used so frequently in non-mobile apps and web pages.

Thanks!

8
androidcalendarandroid-datepicker
Could you please update the selected answer to this question? People may be mislead if they don't look at all the answers. As stated by other people's responses, there is a CalendarView in API level 11+. Thanks! - vosmith

8 Answers

19
votes

Now, in 2014, even the native DatePicker (link) contains small Holo looking CalendarView (link) to pick a day in month.

You can choose, if both spinners and CalendarView or just one of them is displayed by setting:

  • android:calendarViewShown
  • android:spinnersShown

I'm not sure if it's just API level 16+ or if it was even in Ice Cream Sandwich, but it's there. This is how it looks by default:

enter image description here

Moreover, on API level 21 and higher there is a new Material themed DatePicker that looks like following:

enter image description here

This is default on API 21+ and there are no spinners anymore, but you can switch back to the Holo one by setting 

android:datePickerMode="spinner"

in your XML.

12
votes

Since the API 11 there natively: CalendarView

enter image description here

This View is in HoloEverywhere since API 7.

11
votes

Is this type of functionality built into any android widget or view, or would I have to design my own custom > component to do this?

There is no component for that in the Android SDK, sorry. The widget you illustrate is too small for a touchscreen. You can implement something larger (see the Calendar app), but you are largely on your own for that.

4
votes

I have recently written exactly this as a modular app. Here is some sample code, documentation with screenshots, and .apk download.

4
votes

Found a good implemetation in http://caughtinthemobileweb.wordpress.com/2011/06/20/how-to-implement-calendarview-in-android/

Also Since API level 11 (Android 3.0) there has been the native implementation of the CalendarView http://developer.android.com/reference/android/widget/CalendarView.html

2
votes

Try to use this component: https://github.com/truefedex/android-date-picker enter image description here

If you want to use it like popup write on your onclick:

if (calendarPopup == null) {
  calendarPopup = new PopupWindow(getContext());
  CalendarPickerView calendarView = new CalendarPickerView(getContext());
  CalendarNumbersView calendar = (CalendarNumbersView) calendarView.findViewById(com.phlox.datepick.R.id.calendar);
  calendar.setShowDayNames(false);
  calendarView.setListener(onDateSelectionListener);
  calendarPopup.setContentView(calendarView);
  calendarPopup.setWindowLayoutMode(
        MeasureSpec.makeMeasureSpec(llCalendar.getWidth(), MeasureSpec.EXACTLY),
        ViewGroup.LayoutParams.WRAP_CONTENT);
  calendarPopup.setHeight(1);
  calendarPopup.setWidth(llCalendar.getWidth());
  calendarPopup.setOutsideTouchable(true);
}
calendarPopup.showAsDropDown(llCalendar);