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"

Kassey

Answer 1

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.

Adulterous

TimePickerDialog.OnTimeSetListener – Adulterous

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? – Yardstick

@DivisionSi <item name="android:textColorPrimary">@color/color</item> did the trick for me. – Booboo

Answer 2

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

Resiniferous

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. – Poise

Answer 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+.

Gronseth

Answer 4

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"

Couteau

This is only useful for the new DatePicker and TimePicker, not for Android lower 4.x with that "silver color". – Gronseth

@JuliaHexen,@Kassey Check this lib this is solve for lower version Android 4.x with you change your background silver color – Couteau

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 ^^ – Gronseth

Answer 5

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

Pagas

Answer 6

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!

Jae