androiddatepickerandroid-datepickermaterial-components-androidmaterial-components

Material Date Range Picker selection color formatting


When you select two date in the range picker the in-between dates get highlighted. How do i change the color of the in-between dates?

datepicker


Solution

  • You can define a style as:

      <style name="MaterialCalendarTheme_RangeFill" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="materialCalendarStyle">@style/MyMaterialCalendar</item>
      </style>
      <style name="MyMaterialCalendar"  parent="Widget.MaterialComponents.MaterialCalendar">
        <item name="rangeFillColor">@color/my_calendar_range</item>
      </style>
    

    with this selector:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:alpha="..." android:color="@color/...."/>
    </selector>
    

    Then in your code:

    MaterialDatePicker.Builder<Pair<Long, Long>> builderRange =
            MaterialDatePicker.Builder.dateRangePicker();
    builderRange.setTheme(R.style.MaterialCalendarTheme_RangeFill);
    

    enter image description here

    If you want to change totally the color only in the MaterialDatePicker you can also use something like:

      <style name="MaterialCalendarTheme_RangeFill" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="colorPrimary">@color/....</item>
      </style>
    

    enter image description here