Android MaterialDatePicker如何修改日历右侧白色区域背景色

问题场景 #

尝试通过XML样式修改Material日期选择器配色时，无法更改日历主体区域的背景色，需要将截图中日历右侧的白色区域替换为自定义颜色。

当前已实现左侧选中态蓝色配置、弹窗圆角效果，使用的样式和业务代码如下：

<!--Calendar-->
<style name="AppDatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="colorPrimary">@color/blue_click</item>
    <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent
    </item>
</style>

<style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
    <item name="cornerSize">16dp</item>
</style>

long today = MaterialDatePicker.todayInUtcMilliseconds();

// 往前推一周
long startDate = today - 604800000L;
long endDate = today;

// 仅设置一周范围内日期可选
List<CalendarConstraints.DateValidator> validatorList = new ArrayList<>();
validatorList.add(DateValidatorPointBackward.now());
validatorList.add(DateValidatorPointForward.from(startDate));

CalendarConstraints constraints = new CalendarConstraints.Builder()
        .setStart(startDate)
        .setEnd(endDate)
        .setOpenAt(today)
        .setValidator(CompositeDateValidator.allOf(validatorList))
        .build();

MaterialDatePicker<Long> selectDate = MaterialDatePicker.Builder
        .datePicker()
        .setCalendarConstraints(constraints)
        .setTheme(R.style.AppDatePicker)
        .setSelection(sharedPref.getSelectedSyncDate())
        .setTitleText("SELECT DATE")
        .build();

DateFormat dateFormat = new SimpleDateFormat("MM-dd");
Calendar cal = Calendar.getInstance();
selectDate.show(getActivity().getSupportFragmentManager(), "DATE_PICKER"); 

实现方法 #

你看到的白色区域是日期选择器的月份网格容器背景，通过新增样式属性覆盖即可完成修改：

• 首先自定义日历组件样式，继承Widget.MaterialComponents.MaterialCalendar，通过monthNavigatorBackground属性指定目标背景色：

<style name="Widget.App.MaterialCalendar" parent="Widget.MaterialComponents.MaterialCalendar">
    <!-- 替换为你需要的自定义背景色 -->
    <item name="monthNavigatorBackground">@color/your_custom_bg_color</item>
    <!-- 如需修改顶部标题栏背景，可新增如下配置 -->
    <!-- <item name="headerBackground">@color/your_custom_header_color</item> -->
</style>

• 之后在原有的AppDatePicker主题中，关联上述自定义的日历样式：

<style name="AppDatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="colorPrimary">@color/blue_click</item>
    <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent</item>
    <!-- 新增关联自定义日历样式的配置 -->
    <item name="materialCalendarStyle">@style/Widget.App.MaterialCalendar</item>
</style>

低版本兼容说明：如果项目使用的Material Components依赖版本低于1.4.0，monthNavigatorBackground属性未适配，可以直接在主题中重写colorSurface属性——该白色区域默认使用colorSurface值作为背景色：

<style name="AppDatePicker" parent="@style/ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="colorPrimary">@color/blue_click</item>
    <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent</item>
    <!-- 低版本直接修改colorSurface即可替换白色背景 -->
    <item name="colorSurface">@color/your_custom_bg_color</item>
</style>

注意该方式会同步修改弹窗内所有默认绑定colorSurface的区域（比如底部操作按钮栏）背景，如果需要给不同区域设置差异化颜色，建议将Material Components库升级到1.4.0及以上版本，使用分属性配置的方案。

内容的提问来源于stack exchange，提问作者ashishdhiman2007