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"

Answer 1

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!

Answer 2

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

Answer 3

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.

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"

Answer 5

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

Answer 6

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