Search code examples
androidmaterial-designandroid-datepickermaterial-components-androidmaterial-components

How to change Theme of "MaterialDatePicker" in Android?


I've used MaterialDatePicker for the purpose of selecting a single date & also I had achieved that task but I cannot change the theme of the header & button.

        MaterialDatePicker.Builder builder;
        MaterialDatePicker materialDatePicker;

        long today = MaterialDatePicker.todayInUtcMilliseconds();
        CalendarConstraints.Builder con = new CalendarConstraints.Builder();
        con.setValidator(DateValidatorPointForward.now());
        builder.setSelection(today);
        builder.setCalendarConstraints(con.build());

        materialDatePicker = builder.build();

        findViewById(R.id.startCalender).setOnClickListener(v ->
                materialDatePicker.show(getSupportFragmentManager(), builder.toString())
        );

        materialDatePicker.addOnPositiveButtonClickListener(selection -> 
        Toast.makeText(this, materialDatePicker.getHeaderText(), 
        Toast.LENGTH_SHORT).show());

Screenshot attached


Solution

  • You have different options.
    You can use:

    builder.setTheme(R.style.MaterialCalendarTheme);
    

    with:

      <style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <!-- just override the colors used in the default style -->
        <item name="colorOnPrimary">@color/primaryDarkColor</item>
        <item name="colorPrimary">@color/primaryLightColor</item>
      </style>
    

    or you can use something like:

      <style name="MaterialCalendarTheme" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
    
        <!-- Header panel -->
        <item name="materialCalendarHeaderLayout">@style/MaterialCalendar.HeaderLayout1</item>
        <!-- Buttons -->
        <item name="buttonBarPositiveButtonStyle">@style/TextButton.Dialog1</item>
        <item name="buttonBarNegativeButtonStyle">@style/TextButton.Dialog1</item>
      </style>
      <style name="MaterialCalendar.HeaderLayout1" parent="Widget.MaterialComponents.MaterialCalendar.HeaderLayout">
        <!--<item name="android:background">?attr/colorPrimary</item>-->
        <item name="android:background">@color/primaryLightColor</item>
      </style>
      <style name="TextButton.Dialog1" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">@color/white</item>
        <item name="backgroundTint">@color/primaryDarkColor</item>
      </style>
    

    enter image description here