Android TimePickerDialog material design color

Question

I am using a time picker dialog in my app. I am also using appcompat to give my app material design theme. The dialog however stays with the default teal accent color (my accent is a light blue).

so in my code I tried setting the dialog theme to my own and it works accept it makes it fullscreen

mTimePicker = new TimePickerDialog(ctx, R.style.AppTheme new TimePickerDialog.OnTimeSetListener() {->}, hour, minute, DateFormat.is24HourFormat(context));

does anyone know how to set the TimePickerDialog to show correctly with my colors instead of the default ones?

Answer 1

This can be easily achieved from xml (5.0+ only)

v21/themes.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="Theme"
           parent="MyTheme.Base">

        <item name="android:dialogTheme">@style/Theme.Dialog</item> <!-- TimePicker dialog -->
        <item name="android:alertDialogTheme">@style/Theme.Dialog</item> <!-- Alert dialog -->

    </style>

    <style name="Theme.Dialog"
           parent="android:Theme.Material.Light.Dialog">

        <item name="android:colorAccent">@color/...</item>
        <item name="android:colorPrimary">@color/...</item>
        <item name="android:colorPrimaryDark">@color/...</item>

    </style>

</resources>

Edit
Please note that as of Android Support Library 22.1.0 there is a new AppCompatDialog available! http://android-developers.blogspot.de/2015/04/android-support-library-221.html

Answer 2

You can override the colors using:

TimePickerDialog timePickerDialog = new TimePickerDialog(this, 
          R.style.themeOnverlay_timePicker,   //theme overlay
          timeSetListener,
          hours,minutes,true);

with:

<style name="themeOnverlay_timePicker" parent="@style/ThemeOverlay.MaterialComponents.Dialog">
    <item name="colorControlActivated">@color/....</item>
    <item name="colorAccent">@color/....</item>
    <item name="android:textColorPrimary">@color/.....</item>
    <item name="android:textColorSecondary">@color/.....</item>
</style>

If you are using an AppCompat theme use ThemeOverlay.AppCompat.Dialog as parent.