Android Material Design Datepicker with AppCompat


I'm trying to add the new Android 5.0 Material Design Datepicker to my pre 5.0 application using AppCompat. I've added

compile ""

to my build.gradle file and updated my Theme to:

<?xml version="1.0" encoding="utf-8"?>

<style name="AppTheme.Base" parent="@style/Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>

but the Datepicker still looks like this:
old datepicker
And not like this:
material design datepicker

Can anybody tell me how to get the new datepicker to work on pre 5.0 devices?

Thanks in advance.

Best Solution


As well pointed out by jfcartier, there's now also MaterialDateTimePicker. It's probably a nicer solution than the one below since it has a nice themable API.

You could try the android-betterpickers library. It has a CalendarDatePickerDialog widget that looks like the one you want. It provides a light and a dark theme, but for customizing colors you'd have to add it as a library project and change the code yourself.

Usage is pretty straightforward once you add the library to your project.

    // Create date picker listener.
    CalendarDatePickerDialog.OnDateSetListener dateSetListener = new CalendarDatePickerDialog.OnDateSetListener() {
        public void onDateSet(CalendarDatePickerDialog dialog, int year, int monthOfYear, int dayOfMonth) {
            // Set date from user input.
            Calendar date = Calendar.getInstance();
            date.set(Calendar.HOUR_OF_DAY, 9);
            date.set(Calendar.MINUTE, 0);
            date.set(Calendar.YEAR, year);
            date.set(Calendar.MONTH, monthOfYear);
            date.set(Calendar.DAY_OF_MONTH, dayOfMonth);

            // Do as you please with the date.

    // Create dismiss listener.
    CalendarDatePickerDialog.OnDialogDismissListener dismissListener = new CalendarDatePickerDialog.OnDialogDismissListener() {
        public void onDialogDismiss(DialogInterface dialoginterface) {
            // Do something when the user dismisses the dialog.

    // Show date picker dialog.
    CalendarDatePickerDialog dialog = new CalendarDatePickerDialog();
    dialog.setThemeDark(false);, "DATE_PICKER_TAG");

The end result should look like this (sorry for the poor quality).

AOSP Calendar Picker