Search code examples
androidmaterial-designandroid-datepicker

How to change the color of Year Picker and Month picker chevron on the Android Material Date Picker?


How is it possible to change the color of the chevron and the year selector on the Material Datepicker dialog? enter image description here


Solution

  • From further on please post what you have tried to do so far so it shows that you have done some research.

    Yes you can change the color of both, Add the following

     <style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <!-- just override the colors used in the default style -->
        <item name="colorOnPrimary">@color/white</item>
        <item name="colorPrimary">@color/spruce_valencia</item>
        <item name="materialCalendarHeaderTitle">@style/date_text_appearance</item>
        <item name="cardCornerRadius">@dimen/card_corner_radius</item>
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
        <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.App.MediumComponent</item>
    
        <!-- With following you can change change and update the tint, text colors , sizes etc of Month & Year  -->
        
        <item name="materialCalendarMonthNavigationButton">@style/navigationButtonMonthStyle</item>
        <item name="materialCalendarYearNavigationButton">@style/navigationButtonYearStyle</item>
    
    </style>
    

    Month Pagination theme can be customised from this

     <style name="navigationButtonMonthStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
        <item name="iconTint">@color/spruce_valencia</item> <!-- This will change month pagination chevron color -->
    </style>
    

    Year theme can be customised from this

      <style name="navigationButtonYearStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog.Flush">
        <item name="iconTint">@color/error_color</item> <!-- This will change Year icon color -->
        <item name="android:textColor">@color/error_color</item> <!-- This will change Year text color -->
    </style>
    

    1

    for more information about customisation please check out this google repo link here