Android Material Design Datepicker with AppCompat

Question

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 "com.android.support:appcompat-v7:21.0.0" 

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> </style> 

but the Datepicker still looks like this:

And not like this:

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

Thanks in advance.

Answer 1

Update:

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() {         @Override         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() {         @Override         public void onDialogDismiss(DialogInterface dialoginterface) {             // Do something when the user dismisses the dialog.         }     };      // Show date picker dialog.     CalendarDatePickerDialog dialog = new CalendarDatePickerDialog();     dialog.setOnDateSetListener(dateSetListener);     dialog.setOnDismissListener(dismissListener);     dialog.setThemeDark(false);     dialog.show(getSupportFragmentManager(), "DATE_PICKER_TAG"); 

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