MaterialDatePicker error: materialCalendarFullscreenTheme attribute to be set in your app theme

Question

What I did:

1. Added implementation 'com.google.android.material:material:1.1.0' in dependencies
2. Set Theme.MaterialComponents.Light.Bridge as parent to app theme

     <style name="AppTheme" parent="Theme.MaterialComponents.Light.Bridge">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

3. Tried to show date picker in fragment.

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

        Calendar now = Calendar.getInstance();
        now.set(Calendar.YEAR, 2020);
        now.set(Calendar.MONTH, 1);
        now.set(Calendar.DAY_OF_MONTH, 10);

        long first = now.getTimeInMillis();

        now.set(Calendar.YEAR, 2020);
        now.set(Calendar.MONTH, 5);
        now.set(Calendar.DAY_OF_MONTH, 20);

        long last = now.getTimeInMillis();

        builder.setSelection(new Pair<>(first, last));

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

        picker.show(fragmentActivity.getSupportFragmentManager(), "RangePicker");

When I ran the code, got this error

java.lang.IllegalArgumentException: com.google.android.material.datepicker.MaterialDatePicker
requires a value for the com.example:attr/materialCalendarFullscreenTheme attribute to be set
in your app theme. You can either set the attribute in your theme or update your theme to
inherit from Theme.MaterialComponents (or a descendant).

Answer 1

Just add the following to your app theme.

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

After adding

<style name="AppTheme" parent="Theme.MaterialComponents.Light.Bridge">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>

   <!-- Add these -->
   <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>
</style>