Android - Change color of DatePicker

Question

I'm using this DatePicker. How can I change it's color?

    <DatePicker
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:spinnersShown="true"
        android:datePickerMode="spinner"
        android:calendarViewShown="false"
        android:id="@+id/datePicker"
        style:"@style/datepicker"
    />

This is what it looks like now:

I have already tried this:

<style name="datepicker" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/primary</item>
</style>

score 3 · Accepted Answer · answered Dec 23 '16 at 10:54

Try this code,

styles.xml :

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


    <style name="AppBaseTheme" parent="android:Theme.Light">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:datePickerStyle">@style/MyDatePickerStyle</item>
    </style>


    <style name="AppTheme" parent="AppBaseTheme"></style>

    <style name="MyDatePickerStyle" parent="@android:style/Widget.Material.Light.DatePicker" tools:targetApi="lollipop">
        <item name="android:headerBackground">@color/colorPrimary</item>
        <item name="android:calendarTextColor">@color/colorPrimaryDark</item>
        <item name="android:dayOfWeekBackground">@color/colorPrimaryDark</item>
        <item name="android:yearListSelectorColor">@color/colorAccent</item>
        <item name="android:datePickerMode">calendar</item>
        <item name="android:minDate">01/01/2000</item>
    </style>

</resources>

activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="36dp"
        android:text="Current Date:" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="140dp"
        android:text="Change Date" />

    <DatePicker
        android:id="@+id/datePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="30dp" />

</RelativeLayout>

Also, i m attaching screenshot how it looks after applying style.

Thanks a lot for helping me out! :) – Asym Dec 23 '16 at 22:42 — Asym, Dec 23 '16 at 22:42

score 2 · Answer 2 · answered Dec 23 '16 at 06:46

2

Apply style to your DatePicker Dialog

styles.xml :

<style name="DialogTheme" parent="**Theme.AppCompat.Light**">
    <item name="colorAccent">@color/blue_500</item>
</style>

In your Dialog,

new DatePickerDialog(MainActivity.this, R.style.DialogTheme, new DatePickerDialog.OnDateSetListener() {
    @Override
    public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
        //DO SOMETHING
    }
}, 2015, 02, 26).show();

answered Dec 23 '16 at 06:46

jeel raja

667
5
11

Hi! Thanks for your answer, but I'm not using DatePicker dialog, I'm using DatePicker widget... – Asym Dec 23 '16 at 10:20

score 1 · Answer 3 · edited May 23 '17 at 12:00

1

The datepicker text will use the color set in your style:

<item name="android:textColorPrimary">@color/colorPrimary</item>

More details here: Material Date Picker text color

edited May 23 '17 at 12:00

Community

1
1

answered Dec 23 '16 at 00:05

Distwo

11,569
8
42
65

Thanks this is working but it's changing all the default text color to white if I put it in my main AppTheme (as answer in that qurstion says). Any way to fix this? – Asym Dec 23 '16 at 00:13
If yout look at this answer, it looks like you can style the widget only, then apply the style `MyDatePicker` in the xml, as you did your question. – Distwo Dec 23 '16 at 00:43

score 0 · Answer 4 · answered Nov 14 '22 at 07:03

  <DatePicker
                android:id="@+id/datePicker"
                android:theme="@style/MyDatePicker"
                android:layout_width="match_parent"
                android:calendarViewShown="false"
                android:datePickerMode="spinner" />

Use this style

 <style name="MyDatePicker" >
        <!-- Text color -->
        <item name="android:textColorPrimary">@color/colorOrange</item>
        <!-- Divider color -->
        <item name="colorControlNormal">@color/colorOrange</item>
    </style>

Output: https://i.stack.imgur.com/8OKQS.png

Android - Change color of DatePicker

4 Answers4