Change DatePicker header text color

Question

I have a datepicker that's showing a header on Lollipop, it looks like this

I want to either change the color of the big date in the header from black to white, or remove the header altogether, I don't care which. I've tried changing textColorPrimary, textColor and titleTextColor but it has no effect.

Thrive

Please check this: https://mcmap.net/q/180224/-how-to-change-datepicker-dialog-color-for-android-5-0 – Kwasi

Answer 1

Well I have no clue what's the parent theme that you have for your Date Picker theme. Let's say you have a custom theme for your Date Picker like below,

 <style name="yourCustomStyle" parent="Theme.AppCompat.Light">

Now Ctrl + click on Theme.AppCompat.Light which leads you to a new way ;) where you can find what you are looking for meaning here your issue is only about the head text but you might wish to change another views color, so that's the place you need to have a look.

And as the answer create a custom theme like below and add this attribute with the color you like

android:textColorPrimaryInverse

should do the trick for you.

   <style name="yourCustomStyle" parent="Theme.AppCompat.Light">
        <item name="colorAccent">@color/blue</item>
        <item name="android:textColorPrimaryInverse">@color/yellow</item>
        .. other
    </style>

Feel free to use your own colors and code(I copied code from this) and it will do the job!

new DatePickerDialog(MainActivity.this, R.style.yourCustomStyle, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
      
    }
}, 2015, 02, 26).show();

_{Image : android:textColorPrimaryInverse with Theme.AppCompat.Dialog}

Canaliculus

Yup, that's it. I don't understand how I was supposed to find what to change (Ctrl+click shows me a huge list and datepicker is not mentioned) but the important thing is this looks the way I want it to look. Thanks! – Thrive

And in case anyone wants to know the year is changed with textColorSecondaryInverse – Thrive

@Thrive yes its a huge list and scroll a bit there is a colors section,if you have no idea about the attributes you can just copy the whole color set change their colors and view the difference or else you need to go through one by one using android developer site and get a good idea! – Canaliculus

Answer 2

I am able to change the date color in the header giving a custom theme CustomDatePickerDialogTheme to my datePicker DialogFragment:

<style name="CustomDatePickerDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="android:datePickerStyle">@style/CustomDatePickerStyle</item>
</style>

<style name="CustomDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
    <item name="android:headerMonthTextAppearance">@style/HeaderTextStyle</item>
</style>

<style name="HeaderTextStyle" parent="@android:style/TextAppearance.Medium">
    <item name="android:textColor">@color/colorAccent</item>
</style>

Mate

Just tried it, colorAccent (I've set it to #ff00ff to be obvious) doesn't appear anywhere – Thrive

How do you set the CustomDatePickerDialogTheme to the dialog? – Mate

I don't understand the question. I copied what you wrote just to test it. HeaderTextStyle is taking effect (changing TextAppearance.Medium to TextAppearance.Large changes the size of the font), but the color is being ignored. – Thrive

Ok thanks, I wanted to make sure that the theme was set correctly, but it is obvious that it is – Mate

Answer 3

You can change your DateTimePicker Header and Body Background by following these steps :

1. go to android/app/src/main/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <item name="android:textColor">#000000</item>

 **Add these two files !!!**

    <item name="android:timePickerDialogTheme">@style/ClockTimePickerDialog</item>
    <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
</style>

 **Add these files also** 

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorAccent">#000000</item>
</style>

<style name="ClockTimePickerDialog" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#000000</item>
    <item name="android:textColorPrimary">#000</item>
</style>

Lumper

Answer 4

Kotlin, 2021

// set date as button text if pressed
btnDate.setOnClickListener(View.OnClickListener {

    val dpd = DatePickerDialog(
        this,
        { view, year, monthOfYear, dayOfMonth ->
            val selectDate = Calendar.getInstance()
            selectDate.set(Calendar.YEAR, year)
            selectDate.set(Calendar.MONTH, monthOfYear)
            selectDate.set(Calendar.DAY_OF_MONTH, dayOfMonth)

            var formatDate = SimpleDateFormat("dd/MM/yyyy", Locale.getDefault())
            val date = formatDate.format(selectDate.time)
            Toast.makeText(this, date, Toast.LENGTH_SHORT).show()
            btnDate.text = date
        }, 1990, 6, 6
    )

    val calendar = Calendar.getInstance()
    val year = calendar[Calendar.YEAR]
    val month = calendar[Calendar.MONTH]
    val day = calendar[Calendar.DAY_OF_MONTH]
    dpd.datePicker.minDate = GregorianCalendar(year - 90, month, day, 0, 0).timeInMillis
    dpd.datePicker.maxDate = GregorianCalendar(year - 10, month, day, 0, 0).timeInMillis
    dpd.show()
})

Styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- This is main Theme Style for your application! -->
    <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>
</style>

<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Dialog">
    <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
</style>

<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:headerBackground">#A500FF</item>
</style>

Strident

Answer 5

Try this, it might help you:

Edit your styles.xml as:

<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
       <item name="colorAccent">@color/white</item>
</style>

And add below lines to your code:

new DatePickerDialog(MainActivity.this, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
    //DO SOMETHING
  }
}, 2015, 02, 26).show();

Overpower

colorAccent doesn't change the header text color, only the OK and CANCEL buttons as well as the currently selected day in the calendar (that is now turquoise). – Thrive