How can I change Material DateRangePicker color in android?

Question

    dateLI.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

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

            }
        });

I want this output:

enter image description here

I get this output from the above code: enter image description here

after use of green tick solution I get this output enter image description here

I mentioned style of datepicker:

    <style name="DateRangePickerTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">

        <item name="materialCalendarStyle">@style/Custom_MaterialCalendar.Fullscreen</item>
        <item name="android:orientation">horizontal</item>
        
    </style>


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

Gabriele Mariotti · Accepted Answer · 2020-08-18T11:06:53.670

Since you are using a Bridge theme you have to add these attributes in your app theme:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
    <!-- ...... -->
    <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>

Then you can apply a theme overlay in the MaterialDatePicker with:

builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen)

where:

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

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

The color are based on the colorPrimary, colorOnPrimary, colorOnPrimary defined in your app theme. You can override theme in the CustomThemeOverlay_MaterialCalendar_Fullscreen:

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

ok I changed that but how can I change the color of datepicker like I attach the picker in quetion ? I got black and white datepicker. — aarti foxdeveloper, Aug 18 '20 at 11:06
@aartifoxdeveloper check the updated answer. the color are based on the `colorPrimary`, `colorOnPrimary`, `colorOnPrimary` defined in your app theme. You can override theme in the `CustomThemeOverlay_MaterialCalendar_Fullscreen`. — Gabriele Mariotti, Aug 18 '20 at 11:09
have u any idea about image first that attach with my question how can i attach this datepicker with edittext of date — aarti foxdeveloper, Aug 19 '20 at 10:30
is there any way we can use this without changing base theme to material theme?? — Vivek Thummar, Feb 14 '22 at 08:26

score 1 · Answer 2 · answered Sep 13 '20 at 10:43

Actually you don't have to use this line:

builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen)

You can just set your app theme this way:

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

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

and then set the CustomThemeOverlay_MaterialCalendar_Fullscreen this way:

    <style name="CustomThemeOverlay_MaterialCalendar_Fullscreen"
    parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen">
    <item name="colorPrimary">@color/yourcolor</item>
    <item name="colorOnSurface">@color/yourcolor</item>
</style>

and that's it. The builder will be set automatically to the app's theme, in which the calendar theme is set to the designed theme. I would use setTheme only if I'd use different calendars in the app (which have each different theme).

score 0 · Answer 3 · answered Aug 18 '20 at 12:16

0

 `<style name="DateRangePickerTheme"parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
    <item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item></style>`

try this....

answered Aug 18 '20 at 12:16

aarti ladva

69
6

How can I change Material DateRangePicker color in android?

3 Answers3