Develop Reference

Android TimePickerDialog styling guide/docs?

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?

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

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>

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:

Statusbar Color won't change in v21

it feels like, I have searched the whole internet for this... I'm currently writing an app, in which the statusbar color should be red in v21 (Lollipop) and above. The current code from values-v21/styles.xml is
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:colorAccent">#color/primaryColor</item>
<item name="android:statusBarColor">#color/primaryColorDark</item>
<item name="android:navigationBarColor">#color/primaryColorDark</item>
<item name="android:windowBackground">#color/darkWhite</item>
</style>
</resources>
This code does not work. The strange thing is, it only doesn't work in v21, in v22 (Android 5.1) it is shown as fully working. Do anyone know how I get it working on v21?
(Sry for bad English)

It works for me but I use
item name="colorPrimaryDark"
Without 'android' before the attributes.

Got it, it doesn't work, if v21 isn't the targetSdk in the Manifest.

"#android:style/TextAppearance.StatusBar.EventContent.Title" sets the color to white instead of grey in android L

Android L uses white background for notifications and grey color for the text on it. But, "#android:style/TextAppearance.StatusBar.EventContent.Title" still sets the color of TextView to same white color like in KitKat or previous versions. It should return the grey color used in new notification style of Android L.
How can I solve it? Thanks in advance.

It seems android-L doesn't override "#android:style/TextAppearance.StatusBar.EventContent.Title", instead introduces new style
<style name="TextAppearance.Material.Notification.Title">
<item name="textColor">#color/primary_text_default_material_light</item>
<item name="textSize">#dimen/notification_title_text_size</item>
</style>

We could make use of both the API based values folders to handle this in proper way.
/values/styles.xml
<style
name="NotificationTitle"
parent="#style/TextAppearance.StatusBar.EventContent.Title" />
/values-21/styles.xml
<style
name="NotificationTitle"
parent="#android:style/TextAppearance.Material.Notification.Title" />
Now call the following line in your TextView
android:textAppearance="#style/NotificationTitle"

Here is what worked for me to resolve this error. In your styles.xml, add the following:
<style name="TextAppearance">
</style>
<style name="TextAppearance.StatusBar">
</style>
<style name="TextAppearance.StatusBar.EventContent">
<item name="android:textColor">#ff6b6b6b</item>
</style>
<style name="TextAppearance.StatusBar.EventContent.Info">
<item name="android:textColor">#ff6b6b6b</item>
</style>

ActionBar padding between elements:

I am trying to put padding between items in the action bar - specially my logo and the Navigation drawer icon, following is the style I am using:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:icon">#drawable/logo_header</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="#android:style/Widget.ActionButton">
<item name="android:minWidth">32dip</item>
<item name="android:padding">12dp</item>
</style>
</resources>
However these two dont seem to work:
<item name="android:minWidth">32dip</item>
<item name="android:padding">12dp</item>
Any idea what I am missing here?

I'd make the logo into a drawable layer list instead and that way i can set its padding something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/my_main_icon"
android:right="20dp"/>
</layer-list>
And if you use this please update your manifest to use this drawable as the main icon instead of the current.
update: it might be better to use this icon as a logo as per reading on stackOverFlow.
so in your manifest in application tag set android:logo="my_main_icon" , researching this still.
update: if you use logo i think you have to turn it on in the actionbar...
setDisplayUseLogoEnabled() Enables the use of an alternative image (a
"logo") in the Action Bar, instead of the default application icon. A
logo is often a wider, more detailed image that represents the
application

i think the correct syntax here would be:
<item
...
android:layout_padding="12dp"
...
/>

Custom Android appcompat Actionbar: how to remove bottom border on v11+ devices

I'm using the Android appcompat library to create a custom action bar. That all works. On devices not using the v11 theme (values folder) a bottom border does not appear as it should not. But when v11+ devices use the theme (in the values-v11 folder of course) there is a bottom border. It's a thin 1dp type border. I have a custom background applied for the actionbar and this all works on version < v11, just an annoying extra bottom border is added on v11+ devices ;-]
Now I found via another SO article where the user was using ActionBarSherlock that the base theme needed to be Theme.X and not theme.X.Light.x to resolve this issue (with no explanation as to why). I applied this same logic (I'm using android's appcompat, not sherlock one) and it worked for removing the border but then other style issues came up with radio buttons, etc, taking on the non-light theme. So I want to keep the base theme as 'Theme.AppCompat.Light' and get rid of the bottom border on the actionbar. Again, it doesn't show up on devices < v11.
Screen shots (Theme.AppCompat.Light/Theme.AppCompat):
My theme (same in values folder minus the android prefacing):
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>

Through the power of SO my question was finally answered! I tried everything the OP in the below link tried and more over the last two days. Somehow I didn't see this SO thread (I wasn't using search terms 'divider', methinks).
What worked for me was to have the no window overlay property set to null. I see that setting the window color may work on some higher version of android (4.2.x+) as well, so I decided to set both. Here is the SO link with the solution(s) to this nasty feature (bug?): link
My final values-v11/themes.xml -
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>

If user2545146 answer doesn't work on lollipop.
call setElevation on the actionbar from the activity.
getSupportActionBar().setElevation(0);

The only thing that worked for me was
AppBarLayout appBarLayout = findViewById(R.id.my_app_bar_layout);
appBarLayout.setOutlineProvider(null);
api >= 21 only