Search code examples
androidandroid-styles

Android datepicker spinner text color styling

I'm using a spinner date picker and using the Theme.AppCompat.Light.Dialog parent theme. How do I set the text color for "Set date", "Cancel" & "Set" here?

xml attributes:

  <style name="SpinnerDatePickerDialogDark" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/white</item>
    <item name="android:windowBackground">@color/gray_10</item>
    <item name="android:textColorPrimary">@color/gray_02</item>
    <item name="android:textColorSecondary">@color/white</item>
    <!-- Divider color -->
    <item name="android:colorControlNormal">@color/gray_02</item>
    <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
  </style>

  <style name="SpinnerDatePicker" parent="android:Widget.Material.DatePicker">
    <item name="android:datePickerMode">spinner</item>
  </style>

Date picker spinner

Solution

  • To change the text color for "Cancel" and "Set" buttons you can use a custom dialog button style using the attribute android:buttonBarPositiveButtonStyle for the Positive Button and android:buttonBarNegativeButtonStyle for the Negative Button. To change the header text color for "Set date" you can simply use the android:textColor attribute.

    Define in your style.xml the below SpinnerDatePickerDialogStyle:

    <style name="SpinnerDatePickerDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <!--This will change the window dialog background color-->
    <item name="android:windowBackground">@android:color/black</item>
    <!-- This will change the date picker Day/Month/Year Text color-->
    <item name="android:textColorPrimary">@android:color/holo_green_dark</item>
    <!-- This will change the divider color -->
    <item name="android:colorControlNormal">@android:color/holo_orange_dark</item>
    <!-- This will set a custom style to the Date Picker eg: spinner mode style -->
    <item name="android:datePickerStyle">@style/MySpinnerDatePickerStyle</item>
    <!-- This will set a custom style to the dialog Button Positive-->
    <item name="android:buttonBarPositiveButtonStyle">@style/MyDatePickerButtonStyle</item>
    <!-- This will set a custom style to the dialog Button Negative-->
    <item name="android:buttonBarNegativeButtonStyle">@style/MyDatePickerButtonStyle</item>
    <!-- This will change the dialog Title Text color -->
    <item name="android:textColor">@android:color/holo_red_dark</item>
</style>

<!-- Custom  DatePicker Style-->
<style name="MySpinnerDatePickerStyle" parent="android:Widget.Material.DatePicker">
    <item name="android:datePickerMode">spinner</item>
</style>

<!-- Custom DatePicker Button Style-->
<style name="MyDatePickerButtonStyle" parent="android:Widget.Material.Button.Borderless">
    <item name="android:textColor">@android:color/holo_blue_light</item>
</style>

    And use the above style like below:

    DatePickerDialog datePickerDialog = new DatePickerDialog(context, R.style.SpinnerDatePickerDialogStyle,
        new DatePickerDialog.OnDateSetListener(){
            @Override
            public void onDateSet(DatePicker view, int year, int month, int dayOfMonth) {

            }
        },
        Calendar.getInstance().get(Calendar.YEAR),
        Calendar.getInstance().get(Calendar.MONTH),
        Calendar.getInstance().get(Calendar.DAY_OF_MONTH));
datePickerDialog.setTitle("Set Date");
datePickerDialog.setButton(DatePickerDialog.BUTTON_POSITIVE, "SET", datePickerDialog);
datePickerDialog.setButton(DatePickerDialog.BUTTON_NEGATIVE, "CANCEL", datePickerDialog);
datePickerDialog.show();

    Result:

    date_picker_dialog