how to customize colors and other things of the date range picker of material component?

Question

How I can change the color of the header only in date range picker, I search didnt find exactly how, I just know how to change the color of all date range picker with changing the color of the colorPrimary and that will change the color of all the header and the selected dates, I want to change only the header color

and also if there is a way to change the size of title text, I know we can change the title but can we change the title size?

this is what I tried in style

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/shamrock_green</item>
    <item name="colorPrimaryDark">@color/shamrock_green_dark</item>
    <item name="colorAccent">@color/shamrock_green</item>
    <item name="colorButtonNormal">@color/shamrock_green</item>
    <item name="colorOnSecondary">@color/white</item>
    <item name="colorOnSurface">@android:color/transparent</item>
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
    <item name="materialCalendarFullscreenTheme">@style/CustomThemeOverlay_MaterialCalendar_Fullscreen</item>

</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="colorOnSurface">@android:color/black</item>
    <item name="colorPrimary">@color/black</item>
</style>

<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>
    <item name="android:headerBackground">@color/shamrock_green</item>
</style>

<style name="ThemeMaterialCalendarButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
    <item name="android:textColor">@color/shamrock_green</item>
</style>

<style name="ThemeMaterialCalendarTextButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
    <item name="android:textColor">@color/shamrock_green</item>
    <item name="iconTint">@color/shamrock_green</item>
</style>

<style name="AppTheme.FullScreen" parent="@style/Theme.AppCompat">
    <item name="windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
</style>


</resources>

the thing that works now is its shows as dialog not full screen which what I want, but no text and background colors changes, the only way to change colors changes the colors like colorPrimary and these colors will affect all app

Answer 1

You can use a theme overlay:

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

with:

  <style name="CustomMaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
       <!-- Header Layout -->
       <item name="materialCalendarHeaderLayout">@style/customHeaderLayout</item>
       <!-- Header title -->
       <item name="materialCalendarHeaderTitle">@style/customHeaderTitle</item>
       <!-- Header selection title -->
       <item name="materialCalendarHeaderSelection">@style/CustomHeaderSelection</item>
  </style>


   <style name="customHeaderLayout" parent="@style/Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
      <item name="android:background">@color/.....</item>
   </style>

    <style name="customHeaderTitle" parent="@style/Widget.MaterialComponents.MaterialCalendar.HeaderTitle">
      <item name="android:textAppearance">@style/customTextAppearance</item>
    </style>

   <style name="customTextAppearance" parent="@style/TextAppearance.MaterialComponents.Overline">
      <item name="android:textSize">xxsp</item>
   </style>

   <style name="CustomHeaderSelection" parent="Widget.MaterialComponents.MaterialCalendar.HeaderSelection">
      <item name="android:textSize">xxsp</item>
   </style>