Android Material Design Datepicker with AppCompat
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
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).