Changing TimePickerDialog Styles

Question

I want to change the style of my TimePicker but I can't get to change the color of the clock face and the header background. Here's my XML style code -

    <style name="DateTimeDialog" parent="Theme.AppCompat.Dialog">
        <item name="android:colorBackground">@color/colorWhite</item>
        <item name="android:textColorPrimary">#000000</item>
        <item name="android:headerBackground">#000000</item>
        <item name="android:textColorSecondary">#000000</item>
        <item name="android:button">@color/colorWhite</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorSecondary</item>
        <item name="android:textColor">@color/colorSecondaryDark</item>
    </style>

The primary color is navy blue, and the accent/secondary color is light blue (just in case you want to picture it). Here is how it looks currently -

Current Style

I want to be able to change that Grey background.

NOTE: The 'android:background' attribute doesn't work here. It only changes the color of a tiny area behind the ":" in the time displayed in the header. Any help/resources appreciated. Thanks!

Try inheriting from ``TimePickerDialog.THEME_HOLO_LIGHT`` – Hosein Hamedi Jun 26 '18 at 07:18 — Hosein Hamedi, Jun 26 '18 at 07:18
Finally, did you find any solution? – Oleg Ryabtsev Sep 11 '18 at 11:24 — Oleg Ryabtsev, Sep 11 '18 at 11:24
Not yet. I will post it here as soon as I find one. – StonksMan9000 Sep 12 '18 at 14:06 — StonksMan9000, Sep 12 '18 at 14:06

Kevin Kurien · Answer 1 · 2018-06-26T09:44:17.887

Try this instead

    <style name="MyAppThemeFour" parent="Theme.AppCompat.Light">
    <item name="android:timePickerDialogTheme">@style/MyTimePickerDialogStyle</item>
</style>
<style name="MyTimePickerDialogStyle" parent="@style/ThemeOverlay.AppCompat.Dialog.Alert">
<item name="showTitle">false</item>
<item name="colorControlActivated">#ffd600</item>
<item name="colorAccent">#b71c1c</item>
<item name="android:textColorPrimary">#43a047</item>
<item name="android:textColorSecondary">#f44336</item>
</style>

    <style name="MyTimePickerWidgetStyle" parent="@android:style/Widget.Material.TimePicker">
    <item name="android:headerBackground">#ffe082</item>
    <item name="android:numbersTextColor">#b71c1c</item>
    <item name="android:numbersInnerTextColor">#f44336</item>
    <item name="android:numbersSelectorColor">#33691e</item>
    <item name="android:numbersBackgroundColor">#ef9a9a</item>
    <item name="android:amPmTextColor">#9c27b0</item>
</style>

Apply it to the timepicker like :

<TimePicker
android:id="@+id/timePicker"
android:theme="@style/MyTimePickerWidgetStyle"
style="@style/MyTimePickerWidgetStyle"
. . . />

Thanks, this seemed to help a little but I still don't understand how to change the color of the clock face? The light grey area? And the header color is not changing with color accent. Thanks! — StonksMan9000, Jun 26 '18 at 08:47
@Nalin Kamboj i have added another code .Check it out and see if it helps — Kevin Kurien, Jun 26 '18 at 09:42
This should work I guess but the thing is I don't have my TimePicker defined in an XML layout file. I am calling the TimePickerDialog and passing the theme in the constructor, and none of the changes I make to the theme are applied to the TimePickerDialog. — StonksMan9000, Jun 27 '18 at 07:04

Changing TimePickerDialog Styles

1 Answers1

Linked