MPelletier
MPelletier

Reputation: 16657

DatePickerDialog header background color

I've setup a style for a DatePickerDialog background, and it shows up differently on Nexus 5 (Marshmallow):

enter image description here

The style I'm using is:

<style name="datepicker">
    <item name="android:background">@color/android:white</item>
    <item name="android:textColorPrimaryInverse">@color/android:black</item>
    <item name="android:textColorPrimary">@color/android:black</item>
    <item name="android:textColorSecondary">@color/colorAccent</item>
    <item name="android:textColorSecondaryInverse">@color/colorAccent</item>
    <item name="android:textColorTertiary">@color/android:black</item>
</style>

(colorAccent is gold)

The year at the top is supposed to be controlled by textColorSecondary, but now it's showing up as black. And the background of the header is grey, which I'd like white. What are the names of these items for Marshmallow?

Upvotes: 6

Views: 6217

Answers (2)

Linh
Linh

Reputation: 60913

You can use this style and theme config for change the text and header color. However, I think it is not more beautiful than default dialog picker.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:datePickerDialogTheme">@style/MyDatePickerDialogTheme</item>

</style>

<style name="MyDatePickerDialogTheme" parent="android:Theme.Material.Light.Dialog">
    <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
    <item name="android:textColorPrimaryInverse">#000</item> <!-- header date, month color && calendar text highlight color -->
    <item name="android:textColorSecondaryInverse">#000</item> <!-- header year color -->

    <item name="android:colorAccent">#B09A60</item> <!-- button color -->
</style>

<style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker">
    <item name="android:headerBackground">#fff</item> <!-- header background color -->
</style>

Tested on API 22, 23, 25 enter image description here

Upvotes: 15

Cochi
Cochi

Reputation: 2209

The names of these items are the same for all android version > Andoid 5.0 Lollipop to be complient with Material design.

You can try to add a parent and override headerBackground for the background :

<style name="datepicker" parent="@android:style/Widget.Material.DatePicker">
    <item name="android:background">@color/android:white</item>
    <item name="android:textColorPrimaryInverse">@color/android:black</item>
    <item name="android:textColorPrimary">@color/android:black</item>
    <item name="android:textColorSecondary">@color/colorAccent</item>
    <item name="android:textColorSecondaryInverse">@color/colorAccent</item>
    <item name="android:textColorTertiary">@color/android:black</item>
    <item name="android:headerBackground">@color/android:white</item>
</style>

However i think the year color is the same that textColorPrimary.

Hope this helps.

Upvotes: 0

Related Questions