How to change the default color of DatePicker and TimePicker dialog in Android?

Question

Is there any way to change the default color of DatePicker and TimePicker dialog?

This is the code I tried

<DatePicker
                    style="@style/date_picker"
                    android:background="#6495ED"
                    android:id="@+id/DatePicker"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:layout_marginBottom="5dp"
                    android:layout_marginLeft="5dip"
                    android:layout_marginRight="5dip" />

<TimePicker
                    android:id="@+id/TimePicker"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:layout_marginBottom="5dp"
                    android:layout_marginLeft="5dip"
                    android:layout_marginRight="5dip" />

Below two line only changing the background color, I want to change the default silver color of both date and time picker.
Any help please.

style="@style/date_picker"
android:background="#6495ED"

score 41 · Answer 1 · edited Sep 16 '16 at 15:36

41

The best way to change the picker dialog is by adding custom style to it.

<style name="TimePickerTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/color_primary</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

TimePickerDialog timePicker = new TimePickerDialog(mContext, R.style.TimePickerTheme, fromListener, hour, min, false);

Worked perfectly for me.

edited Sep 16 '16 at 15:36

jkdev

11,360
15
54
77

answered Sep 09 '16 at 08:43

noobEinstien

3,147
4
24
42

This is a perfect answer! – krisDrOid Jun 14 '17 at 23:50
TimePickerDialog.OnTimeSetListener – noobEinstien Jun 16 '17 at 11:27
3

Not working. No errors, but the colour remains unchanged even though there are clearly different values set for them in the custom Style. Any help? – izSaad Aug 05 '17 at 11:35
This Worked for me too. – Carlos Espinoza Oct 01 '18 at 20:36
@DivisionSi @color/color did the trick for me. – Mitulát báti Mar 16 '19 at 09:23

score 6 · Answer 2 · answered Dec 03 '13 at 11:41

You have to create a custom theme and save it in some directories to finally set this theme as the default one for the app

First, in values add a themes.xml like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyAppTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Any customizations for your app running on pre-3.0 devices here -->
    </style>
</resources>

Then, create a directory with the name "values-v11" (Android 3.0+ ) in the res directory and put a themes.xml like this

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyAppTheme" parent="@android:style/Theme.Holo.Light">
        <!-- Any customizations for your app running on 3.0+ devices here -->
    </style>
</resources>

Finally, create a directory with the name "values-v14" (Android 4.0+) in the res directory and create a themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyAppTheme" parent="@android:style/Theme.DeviceDefault.Light.NoActionBar">
        <!-- Any customizations for your app running on 4.0+ devices here -->
    </style>
</resources>

Finally in your manifest.xml

<application
        ...
        android:theme="@style/MyAppTheme">

This would be the way to go if the attribute that needed changing was public. Sadly, not all attributes used to style widgets are public. To be honest, its not even clear what attribute the OP is talking about. — Vikram, Dec 05 '13 at 07:41

score 3 · Answer 3 · answered Dec 08 '13 at 14:16

3

I think there is no way to change the grey color of the old native picker widgets easily in XML.

I propose you use the library HoloEverywhere so that DatePicker and TimePicker look really nice on all Android platforms 2.1+.

answered Dec 08 '13 at 14:16

Julia Hexen

695
3
10

score 3 · Answer 4 · answered Dec 09 '13 at 08:28

3

you can change theme of your date-picker by changing theme like this.

change items according to you.

<style name="date_picker" parent="@android:style/Widget.DeviceDefault.DatePicker">
<item name="android:divider">@drawable/dialog_divider</item>

change items according to you. and set this theme to your data-picker style

style="@style/date_picker"

answered Dec 09 '13 at 08:28

Ando Masahashi

3,112
2
24
41

This is only useful for the new DatePicker and TimePicker, not for Android lower 4.x with that "silver color". – Julia Hexen Dec 09 '13 at 15:53
1

@JuliaHexen,@KKC [Check this lib](https://github.com/luminousman/DatePicker) this is solve for lower version Android 4.x with you change your background silver color – Ando Masahashi Dec 10 '13 at 07:01
This is a library with self coded TimePicker and DatePicker, not with the native Android Classes - that are "normal" LinearLayouts. And if I use a library, I would take the HoloEverywhere because it's much more beautiful than the old Android crap widgets ^^ – Julia Hexen Dec 10 '13 at 15:00

score 3 · Answer 5 · answered Dec 19 '18 at 22:19

For Date Picker add this codes to color.xml

  <color name="mdtp_accent_color">#070B82</color>
  <color name="mdtp_accent_color_dark">#0D105E</color>

For both you can define style in style.xml

 <style name="TimePickerTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/blue</item>
</style>

and set style in xml:

 android:theme="@style/MyAppTheme"

or programically:

TimePickerDialog timePicker = new TimePickerDialog(mContext, R.style.TimePickerTheme, fromListener, hour, min, false);

score 0 · Answer 6 · answered Jul 17 '23 at 10:39

The behavior is usually encountered when the app theme is overwriting some attributes that the TimePicker is depending on - creating a poor visual effect as follows (details may depend on your app theme):

While the most voted answer is a pretty good solution, I'm playing with DataBinding so I've managed to find another method that don't require programmatically setting the theme while initializing the TimePicker (since I can't - at least in my time of search - find the setter of the theme AFTER the TimePicker is already intialized). This method follows the post from tutorialsbuzz.com.

Method 1

Set up your style - attributes referring to the same post from tutorialsbuzz.com.

<style name="TimePickerTheme" parent="android:Widget.Material.TimePicker">
    <item name="android:headerBackground">@color/yellow_700</item>
    <item name="android:numbersSelectorColor">@color/yellow_700</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

Then, depending on whether you're using android.widget.TimePicker or android.app.TimePickerDialog, you may set the item android:timePickerStyle or android:timePickerDialogTheme to the stylesheet you just created:

<style name="Theme.YourAppTheme" parent="Theme.YourAppParentTheme">
    <!--... something here ...-->
    <item name="android:timePickerStyle">@style/TimePickerTheme</item>
    <!--... something here ...-->
</style>

Method 2

Again referring to the attributes from the same post from tutorialsbuzz.com, you can try setting the attributes directly rather than setting it through a stylesheet - for unknown reason that don't work for most cases (for me) - probably due to overwritting precedence of the attributes.

<TimePicker
        android:id="@+id/picker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:headerBackground="@color/yellow_700"  <--
        android:numbersSelectorColor="@color/yellow_700" <--
        />

And this is the result for me:

Hope this would help you!

How to change the default color of DatePicker and TimePicker dialog in Android?

6 Answers6

Linked