如何在安卓中更改Material DateRangePicker的颜色？

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());

            }
        });

我想要这个输出：

我从上面的代码得到了这个输出： 在使用绿色勾选解决方案后，我得到了这个输出： 在此输入图片描述 我提到了日期选择器的样式：

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

- aarti foxdeveloper

Answer 1

由于您正在使用 Bridge 主题，因此您需要在应用程序主题中添加这些属性：

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

然后，您可以在MaterialDatePicker中应用一个主题覆盖层，方法如下：

builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen)

在哪里：

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

颜色基于应用程序主题中定义的colorPrimary、colorOnPrimary和colorOnPrimary。您可以在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>

- Gabriele Mariotti

---

我已经更改了那个，但是我如何更改日期选择器的颜色，就像我在问题中附加的选择器一样？我得到了黑白日期选择器。 - aarti foxdeveloper

@aartifoxdeveloper 请查看已更新的答案。颜色基于应用程序主题中定义的 colorPrimary、colorOnPrimary、colorOnPrimary。您可以在 CustomThemeOverlay_MaterialCalendar_Fullscreen 中覆盖主题。 - Gabriele Mariotti

你有没有看到我问题附带的图片？我该如何将这个日期选择器与日期编辑框相连？ - aarti foxdeveloper

有没有办法在不更改基础主题为 Material 主题的情况下使用它？ - Vivek Thummar

Answer 2

实际上您不必使用这行代码：

。

builder.setTheme(R.style.CustomThemeOverlay_MaterialCalendar_Fullscreen)

您可以这样设置应用程序主题：

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

然后以这种方式设置CustomThemeOverlay_MaterialCalendar_Fullscreen：

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

就是这样。构建器将自动设置为应用程序的主题，其中日历主题设置为设计主题。只有在应用程序中使用不同的日历（每个日历具有不同的主题）时，我才会使用 setTheme。

- Amir Golan

Answer 3

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

试一下这个……

- aarti ladva