带有 AppCompat 的 Android Material Design Datepicker

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).

Answer 2

Material components is the recommended way for date picker

With the Material Components for Android you can use the new MaterialDatePicker .

add the following to your build.gradle

implementation 'com.google.android.material:material:1.1.0'

For kotlin

 val builder = MaterialDatePicker.Builder.datePicker()
 val picker = builder.build()
 picker.show(parentFragmentManager, "date_picker_tag")

For Java

   MaterialDatePicker.Builder<Long> builder = 
   MaterialDatePicker.Builder.datePicker();
   MaterialDatePicker<Long> picker = builder.build();
   picker.show(getSupportFragmentManager(), picker.toString());

It supports the following configurations

portrait - mode date picker

landscape - mode date picker

date range picker

Mobile input picker

Additional reference

Here is the official design guideline

A complete demo app can be found here

Answer 3

I liked this library. It's a clone of Flavien Laurent Date and Time Picker with some improvements. Both of them are based on Official Google Date and Time Picker for Android 4.3+ but adapted for Android 2.1+.