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 the textcolor.

Change custom theme link.

My code :

<TimePicker
    android:id="@+id/tp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:timePickerMode="clock"
    android:headerBackground="#565466"
    android:amPmBackgroundColor="#500126"
    android:numbersBackgroundColor="#57e326"
    android:numbersTextColor="#995394"
    android:numbersSelectorColor="#675543"
    android:textColorSecondary="#897530"
    android:textColorPrimary="#359875"
/>

Keven

Which fields should I add/edit in style resources ? – Keven

@Heyyou Sorry, I didn't saw it. It put it back! :) – Unpracticed

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.

Doubletree

How can I customize each one of those elements ?? – Keven

Thanks Gergely. I will get back if I have more Q. – Keven

I am unable to change background color of ok and cancel buttons layout .The view below numbers . Background color is not changing the layout below .How can I change the color ? Thanks – Keven

That styling is handled by the Activity's theme, specifically by the AlertDialog and Dialog styles. – Gredel

how to change this if android:timePickerMode="spinner" ? – Interruption

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

Moriahmoriarty

For anyone looking: overwrite "Theme.AppCompat.Light.Dialog" for compatability. – Cookstove

Answer 3

For material 3 design you have to use the following attributes to change the colors and use

<style name="ThemeOverlay.PChart.Material3TimePicker" parent="ThemeOverlay.Material3.MaterialTimePicker">
    <item name="colorSurface">@color/white_fade</item>
    <item name="colorOnSurfaceVariant">@color/darkCyan</item>
    <item name="colorOnSurface">@color/gray_faded_AA</item>
    <item name="colorPrimary">@color/darkCyan</item>
    <item name="colorOnPrimaryContainer">@color/white</item>
    <item name="colorPrimaryContainer">@color/darkCyan</item>
</style>

and in kotlin code

val picker =
        MaterialTimePicker.Builder()
            .setTheme(R.style.ThemeOverlay_PChart_Material3TimePicker)
            .setInputMode(INPUT_MODE_CLOCK)
            .setTimeFormat(TimeFormat.CLOCK_24H)
            .setHour(initialHour)
            .setMinute(initialMinute)
            .setTitleText(title)
            .build()

Fiacre