Material Date Picker Custom Styling

Question

i have used range date picker from google material with this library

implementation 'com.google.android.material:material:1.2.0-alpha02'

this is my code

     MaterialDatePicker.Builder<Pair<Long, Long>> builder =
            MaterialDatePicker.Builder.dateRangePicker();

    CalendarConstraints.Builder constraintsBuilder = new CalendarConstraints.Builder();
    builder.setCalendarConstraints(constraintsBuilder.build());
    MaterialDatePicker<Pair<Long,Long>> picker = builder.build();
    assert getFragmentManager() != null;
    picker.show(getFragmentManager(), picker.toString());

i want to custom the dialog picker change text field,make dialog not full screen etc.. how can i make all this modifications

Answer 1

About the fullscreen.

The range picker should cover the entire screen (default = dialog for single date, fullscreen for range). However you can change this behavior in your style.

You can use the setTheme method to apply a theme overlay:

//To apply a dialog
builder.setTheme(R.style.ThemeOverlay_MaterialComponents_MaterialCalendar);
//To apply the fullscreen:
builder.setTheme(R.style.ThemeOverlay_MaterialComponents_MaterialCalendar_Fullscreen);

Note: it requires at least the version 1.2.0-alpha01.

As alternative you can add in your app theme the materialCalendarFullscreenTheme attribute.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
   <item name="materialCalendarFullscreenTheme">@style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>
</style>

where:

  <style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
      parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="materialCalendarStyle">@style/Custom_MaterialCalendar.Fullscreen</item>
  </style>

Here you can override the value with the android:windowFullscreen attribute:

  <style name="Custom_MaterialCalendar.Fullscreen"
      parent="@style/Widget.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="android:windowFullscreen">false</item>
  </style>

---

About the strings.
Currently there isn't a method to change the strings.
The only existing method is builder.setTitleText to change the title.

However you can override all the existing strings in your project, but this workaround can stop to run in the next releases. For example:

  <string name="mtrl_picker_save" description="Confirms the selection [CHAR_LIMIT=12]">....</string>
  <string name="mtrl_picker_text_input_date_range_start_hint" description="Label for the start date in a range selected by the user [CHAR_LIMIT=60]">...</string>
  <string name="mtrl_picker_text_input_date_range_end_hint" description="Label for the end date in a range selected by the user [CHAR_LIMIT=60]">...</string>

Here you can find all the strings used by the material calendar in the 1.2.0-alpha02.