33

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!

Beryllium
  • 12,808
  • 10
  • 56
  • 86
ndtrek07
  • 499
  • 1
  • 4
  • 8
  • 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 Feb 26 '14 at 13:31

8 Answers8

19

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.

Marcel Bro
  • 4,907
  • 4
  • 43
  • 70
12

Since the API 11 there natively: CalendarView

enter image description here

This View is in HoloEverywhere since API 7.

Brais Gabin
  • 5,827
  • 6
  • 57
  • 92
11

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.

CommonsWare
  • 986,068
  • 189
  • 2,389
  • 2,491
7

what i found so far:

oae
  • 1,513
  • 1
  • 17
  • 23
4

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

Gaurav Vashisth
  • 7,547
  • 8
  • 35
  • 56
  • +1 for mentioning the native date picker. There's also the DatePickerDialog: http://developer.android.com/reference/android/app/DatePickerDialog.html – Jarett Millard Jun 20 '12 at 23:22
  • and here is great rewrite without grid view: https://github.com/AtRow/CalendarView – Cfr Mar 05 '13 at 11:42
4

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

kostmo
  • 6,222
  • 4
  • 40
  • 51
2

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);
Fedir Tsapana
  • 1,283
  • 16
  • 19
0

you can use this lib for date selection

https://github.com/square/android-times-square/

Moktahid Al Faisal
  • 850
  • 9
  • 19