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!

Answer 1

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"
. . . />

Answer 2

You can use the TimePickerDialog constructor with theme parameter to specify the theme.

TimePickerDialog(Context context, 
                 int theme, 
                 TimePickerDialog.OnTimeSetListener callBack, 
                 int hourOfDay, 
                 int minute, 
                 boolean is24HourView)

OR

Add android:timePickerMode="spinner" to the XML

     <TimePicker
        android:id="@+id/timePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:timePickerMode="spinner">
    </TimePicker>