MaterialDatePicker not working on Android

Question

I want to change the date picker of my project to the date picker provided by the Material Components for Android, but it is not working.

This is the code I've tried:

MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();

MaterialDatePicker<Long> picker = builder.build();

picker.show(getSupportFragmentManager(), picker.toString());

This is how it looked like:

An this is how it should've looked like:

Can anybody tell me what's missing?

Thanks

Collis

Hi your expected result image is missing, please fix it and we will do our best to help you. – Brookins

Answer 1

The problem was in the colorPrimary.

The default color of my project to colorPrimary was "white" and the Material Date Picker style uses that colorPrimary to color the background and the text of the buttons. Since the color of the header text was also white, it appear that there was nothing there when there was everything.

I solved it by importing the styles file to my project and making some adjustments to the styles in my project.

Thank you all for your answers, all of them helped in finding the problem!

Collis

Please share the changes. Did you change your primaryColor to something else other than white? – Burrus

Answer 2

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

To work fine, in your app you have to use a Material Components Theme.
In this way you inherit the style and theme for the pickers.

To select a single date just use:

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

To select a range date you can use a DateRange Picker using:

MaterialDatePicker.Builder<Pair<Long, Long>> builder =
                    MaterialDatePicker.Builder.dateRangePicker();
CalendarConstraints.Builder constraintsBuilder = new CalendarConstraints.Builder();
builder.setCalendarConstraints(constraintsBuilder.build());
MaterialDatePicker<?> picker = builder.build();
picker.show(getSupportFragmentManager(), picker.toString());

Check the colors used in your theme.

These attributes define your style. You don't need to add them, they are provided by default with the Material Components theme.

<!-- Picker styles and themes. -->
<item name="materialCalendarStyle">@style/Widget.MaterialComponents.MaterialCalendar</item>
<item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item>
<item name="materialCalendarTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar</item>

Based on these style, the colors used by the picker are:

HeaderLaoyout     -> background:colorPrimary, textColor:colorOnPrimary
HeaderSelection   -> background:colorPrimary, textColor:colorOnPrimary
ConfirmButtons    -> background:colorPrimary, textColor:colorOnPrimary
Buttons           -> background:colorPrimary, textColor:colorOnSurface
HeaderToggleButton->                          textColor:colorOnPrimary
Day               ->                          text:colorOnSurface  stroke:colorOnSurface
SelectedDay       -> background:colorPrimary, textColor:colorOnPrimary
RangeFillColor    -> background:colorPrimary

Strung

how do I setup a theme for this? Mine is showing blank in positive/negative buttons and title, accent, etc. – Xiphisternum

You have to use a Material theme in your app as described in the doc. The styles in the answer are the default in all material themes. – Strung

How can we declare the picker in XML layout file instead of programmatically? – Baldpate

Answer 3

I had the same issue with my primary color being white.

The simple solution is to override the primaryColor in the Calendar style:

Base Theme:

<style name="Base.Theme.YV.Bible" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  <item name="materialCalendarStyle">@style/Theme.YV.Bible.DatePicker</item>
  <item name="android:datePickerDialogTheme">@style/Theme.YV.Bible.DatePicker</item>
</style>

Calendar / Datepicker Theme

<style name="Theme.YV.Bible.DatePicker" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
  <item name="colorPrimary">?colorPrimaryDark</item> // this is the key, we need to use a dark color instead of our theme's primary color
</style>

Usage

val picker = MaterialDatePicker.Builder
    .datePicker()
    .setCalendarConstraints(CalendarConstraints.Builder().setStart(now().time).build())
    .setSelection(c.timeInMillis)
    .setTheme(com.bible.base.R.style.Theme_YV_Bible_DatePicker)
    .build()
picker.show(fragmentManager, null)

Ergonomics

Answer 4

For getting your desired output, make sure to add this before calling show():

builder.setTitleTextResId(R.string.your_text);
// Where R.string.your_text must be equal to "Selected Date" or whatever you want

For Material DatePicker specifically, you need to first implement the latest library

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

Then

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

You can also simply show the DatePickerDialog instead of using Builder. The Dialog is For showing dialog and getting selected data:

EditText date;
DatePickerDialog datePickerDialog;

// Calendar object to hold the selected data
final Calendar c = Calendar.getInstance();
int mYear = c.get(Calendar.YEAR); // current year
int mMonth = c.get(Calendar.MONTH); // current month
int mDay = c.get(Calendar.DAY_OF_MONTH); // current day
// date picker dialog
datePickerDialog = new DatePickerDialog(MainActivity.this,
        new DatePickerDialog.OnDateSetListener() {

            @Override
            public void onDateSet(DatePicker view, int year,
                                  int monthOfYear, int dayOfMonth) {
                // set day of month , month and year value in the edit text
                date.setText(dayOfMonth + "/"
                        + (monthOfYear + 1) + "/" + year);

            }
        }, mYear, mMonth, mDay);
datePickerDialog.show();

Allisan

I have the last library implemented and it still doesnt work. – Collis

DatePickerDialog doesn't support ranges. – Baldpate

Answer 5

Add latest dependency:

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

MaterialDatePicker.Builder<Long> builder = MaterialDatePicker.Builder.datePicker();
       builder.setTitleTextResId(R.string.your_text);// here is the title for your datepicker
       MaterialDatePicker<Long> picker = builder.build();
       picker.show(getSupportFragmentManager(), picker.toString());

Other options: https://github.com/wdullaer/MaterialDateTimePicker

Durrett

you can check it on Google's Maven Repository. Google's Maven Repository com.google.android.material > material >1.1.0-alpha10 – Durrett