androidmaterial-designandroid-datepickermaterial-components-androidmaterialdatepicker

How can I change Material DateRangePicker color in android?


    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>

Solution

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

    enter image description here

    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>
    

    enter image description here