How to customize TimePicker in material design android?

Question

I am unable to change the selector color and other parts of the TimePicker. So far, I can change header color and background but I am unable to change the innercircle and th

Answer 1

Basic mode

All you have to do is set your accent color in your Activity's theme:

<item name="colorAccent">#3333cc</item>

This will set all the colors for you so you wouldn't mess up the styling.

(This also means that you shouldn't set values like amPmBackgroundColor on your TimePicker directly, let Android do the things for you.)

Advanced mode

If you want to specify all the possible values separately, do the following:

First define this in your Activity's theme:

<item name="android:timePickerStyle">@style/Theme.MyTheme.TimePicker</item>

Then create the appropriate style:

<style name="Theme.MyTheme.TimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">clock</item>
    <item name="android:headerBackground">#ff555555</item>
    <item name="android:numbersTextColor">?android:attr/textColorPrimaryActivated</item>
    <item name="android:numbersInnerTextColor">?android:attr/textColorSecondaryActivated</item>
    <item name="android:numbersSelectorColor">?android:attr/colorControlActivated</item>
    <item name="android:numbersBackgroundColor">#ff555555</item>
    <item name="android:amPmTextColor">?android:attr/textColorSecondary</item>
</style>

Note that numbersInnerTextColor is only available from API level 23 and other styles (e.g. headerTextColor) can't be set (or at least I couldn't make it work).

I'd advise against using the "advanced" mode as the TimePicker should have the same colors as the containing Activity and doing otherwise might impact your UX in a bad way.

Answer 2

TimePicker material style:

TimePickerDialog material style with custom colors

<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>

TimePicker widget 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>

For more information on TimePicker see http://www.zoftino.com/android-timepicker-example