Android TimePickerDialog styling guide/docs?

Question

I'm trying to style a TimePickerDialog for sdk 21+ (Lollipop). So far I've figured out how to change the default colorscheme in XML:

<style name="TimePickerTheme" parent="@style/Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">#ff2d6073</item> <!-- no effect -->
    <item name="colorPrimaryDark">#ff2d6073</item> <!-- no effect -->
    <item name="colorAccent">#ff2d6073</item>
    <item name="android:textColor">#ffD0D102</item>
    <item name="android:textColorPrimary">#ffD0D102</item>
</style>

This works but I'm looking for a guide or documentation for all the properties I can change.

• AccentColor does the basic color scheme
• TextColorPrimary does the text color

But what property, for example, do I need to change the big text in the 'header' of the dialog (where the current selected time is displayed)?

Is there some documentation that lists all the possible things you can change?

Smallclothes

android:headerBackground works. I wasn't able to make android:numbersTextColor, android:numbersBackgroundColor work. N.B.: ?colorControlActivated (inherits from ?colorAccent) does the highlights actually. – Jugate

Thanks :) I've made some progress but need to do some testing and cleaning up before I post it here. Turns out you have to override the Theme, then the style and (if you want) the headerTextAppearance. – Smallclothes

Answer 1

After digging through the AOSP theme and style xml files and a lot of googling I made some progress. I am now able to style most(!) things.

So this is a partial answer, not all the way there yet. But here's how far I got:

You can see that I'm now able to theme the header, the un(!)selected time part (minutes in this case), the circle, the numbers in that circle and the 'hand' (or selector). Oh, and the buttons are styled, too.

Let me explain how I got things working, first: the important thing is that you can't override things directly from you app's theme OR from a (alert)dialog theme/style. You have to go from one to the next, so to speak.

Example:

AndroidManifest.xml: Set custom theme for app and/or activity

<activity>
    android:theme="@style/Theme.MyTheme" 
</activity>

values-v21/styles.xml: (where your custom theme resides): set the timePickerDialogTheme

<style name="Theme.MyTheme" parent="@style/Theme.AppCompat.Light">
    <item name="android:timePickerDialogTheme">@style/TimePickerDialogTheme</item>
</style>

Then below that, define the timePickerDialogTheme and set the timePickerStyle:

<style name="TimePickerDialogTheme" parent="@style/Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#ff2d6073</item> <!-- colorAccent here seems to work just fine? -->
    <item name="android:timePickerStyle">@style/TimePickerDialogStyle</item> 
</style>

Now you can define most of the styling here..

<style name="TimePickerDialogStyle" parent="@android:style/Widget.Material.Light.TimePicker">

    <item name="colorAccent">#ff2d6073</item> <!-- colorAccent here seems to work just fine? -->

    <item name="android:timePickerMode">clock</item>
    <item name="android:headerBackground">#ff2d6073</item>
    <item name="android:headerTimeTextAppearance">@style/TextAppearance.TimePickerDialogStyle.TimeLabel</item> <!-- TimePicker Time *TextAppearance* -->
    <item name="android:numbersTextColor">#ff000000</item>
    <item name="android:numbersSelectorColor">#ff2d6073</item>
    <item name="android:numbersBackgroundColor">#ffdddddd</item>

</style>

The important line in the above is:

<item name="android:headerTimeTextAppearance">@style/TextAppearance.TimePickerDialogStyle.TimeLabel</item>

Because if you want to style the text (well, time, actually) in the header you need to define the headerTimeTextAppearance:

<style name="TextAppearance.TimePickerDialogStyle.TimeLabel" parent="@android:style/TextAppearance.Material">

    <item name="android:textSize">60sp</item> <!-- from -->
    <item name="android:textColor">#ffD0D102</item>

</style>

Now, if you take a look at the Widget.Material.TimePicker in AOSP styles.xml (ctrl-f 'timepicker' until you find it) you'll notice a bunch of other properties that you should be able to modify:

headerTimeTextAppearance
headerAmPmTextAppearance
headerSelectedTextColor
headerBackground
numbersTextColor
numbersBackgroundColor
amPmTextColor
amPmBackgroundColor
amPmSelectedBackgroundColor
numbersSelectorColor

Most of these work (as long as you prepend 'android:' for each of them) BUT I could not get 'headerSelectedTextColor' to work. I got a compile error saying something like "could not match property bla bla". Also, if you look at my example above, I hardcoded the textSize for the 'headerTimeTextAppearance' property because the '@dimen/timepicker_ampm_label_size' value threw errors.

In short: most of the things are listed above and how to get them working. But not all is clear. So I'd still see that complete documentation/guide :)

Smallclothes

I think it was the numberSelector property. I'm on mobile so can't properly check – Smallclothes

I changed the numberSelector but does not change the color of the hands :| – Chifforobe

Answer 2

Android TimePicker material style with custom colors below, you can see http://www.zoftino.com/android-timepicker-example for TimePicker usage and styles.

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

Whitacre

The stuff from your link is native, not Xamarin. – Haigh

Answer 3

When using version 1.5.0 of the Material Design Library for Android, I've found that I can get most of the theming with using this particular style:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyTimePickerTheme" parent="ThemeOverlay.MaterialComponents.TimePicker">
    <item name="android:textColor">#FF121212</item>
    <item name="android:textColorPrimary">#FF121212</item>
    <item name="android:textColorSecondary">#FFF9F9F9</item>
    <item name="colorAccent">#FF121212</item>
    <item name="colorControlNormal">#FF121212</item>
    <item name="colorPrimary">#FF121212</item>
    <item name="colorSurface">#FFF9F9F9</item>
  </style>
</resources>

This will yield in a generic - non colored - Dialog which works for white theme. For dark theme, simply invert the colors.

I've also asked here to have dynamic theming supported for this component.

Example screenshot using the above style:

Polymath