How to change DatePicker's CalendarView's background color in Lollipop?

Question

I worked so hard to change the default background color of Lollipop's DatePicker. I cannot simply use Styleable attrs to change the default style. And as mentioned in another post, I can only use reflection to find the view, and then make changes on it.

e.g.

if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    int monthDayYearLayoutId = Resources.getSystem().getIdentifier("date_picker_month_day_year_layout", "id", "android");
    if (monthDayYearLayoutId != 0) {
        View monthDayYearLayout = datePicker.findViewById(monthDayYearLayoutId);
        if (monthDayYearLayout != null) {
            monthDayYearLayout.setBackgroundColor(getResources().getColor(R.color.colorful));
        } 
    } 
}

However, I am only able to access the upper half of the DatePicker (see below).

DatePicker's upper half enter image description here

However,for the lower half which is a CalendarView (see below), I cannot change using the same approach, as I cannot find the view (I tried to find the view by the id R.id.calendar_view, yet it is not working.).

DatePicker's lower half enter image description here

To be precise, I would like to change the background color of the circled date, and the textColor for the present date (in this case, it is 7th March, 2014)

Any hints? Thanks a lot.

Updates:

After looking through the docs, I found that the lower half's calendar is in fact a SimpleMonthView.class, and the background color of the circle and the textColor for the present day are both governed by the param (int) mSelectedDayColor.

    mSelectedDayColor = colors.getColorForState(ENABLED_SELECTED_STATE_SET,
            res.getColor(R.color.holo_blue_light));

I cannot use the previous method, since the calendar is created in the onDraw method programmatically, but not by inflating a layout file.

So the problem boils down to - how could I change the resource value for mSelectedDayColor?

Thanks..

Updates: After working on alanv's solution, I tried this: Since I am working on Lollipop's DatePicker, I put the following in v21-styles.xml:

<style name="MyCalendarView" parent="@android:style/Widget.CalendarView">
    <item name="android:showWeekNumber">true</item>
    <item name="android:minDate">01/01/2016</item>
    <item name="android:maxDate">12/31/2100</item>
    <item name="android:shownWeekCount">6</item>
    <item name="android:selectedWeekBackgroundColor">#330099FF</item>
    <item name="android:focusedMonthDateColor">#FFFFFFFF</item>
    <item name="android:unfocusedMonthDateColor">#66FFFFFF</item>
    <item name="android:weekNumberColor">#33FFFFFF</item>
    <item name="android:weekSeparatorLineColor">#19FFFFFF</item>
</style>

And I changed some of the default values, eg. android:minDate.

And in my activity_main.xml,

<DatePicker
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/date_picker"
    android:layout_centerHorizontal="true"
    android:theme="@style/MyCalendarView"/>

But there is no effect on DatePicker for Lollipop.

alanv · Accepted Answer · 2016-01-05T16:38:30.190

2

Any code using reflection may break on future OS updates. You should never use reflection to access private APIs or values.

The easiest way would be to create an overlay theme that redefines android:colorAccent and apply that to your DatePicker.

res/values/styles.xml:

<style name="MyThemeOverlay">
    <item name="android:colorAccent">@color/my_accent</item>
</style>

res/layout/my_layout.xml:

<DatePicker
    ...
    android:theme="@style/MyThemeOverlay" />

edited Jan 05 '16 at 16:38

answered Mar 20 '15 at 20:15

alanv

23,966
4
93
80

No it is not working. Since there is no parent for the SimpleMonthView, but only CalendarView. It is SimpleMonthView which is responsible for the lower half of the DatePicker. I cannot simply change the style so as to customize it. Since you could see in my post, those params are created through something like this: mSelectedDayColor = colors.getColorForState(ENABLED_SELECTED_STATE_SET, res.getColor(R.color.holo_blue_light)); – Derekyy Mar 21 '15 at 03:55
Not working? What were the results? The updates in your post have nothing to do with this solution. – alanv Mar 21 '15 at 09:20
Sorry, I updated the post with my attempt on your suggestion. – Derekyy Mar 21 '15 at 09:41
You need to set `android:colorAccent` and only `android:colorAccent` in your overlay theme. Please read the solution. – alanv Mar 21 '15 at 20:56
There is still one problem. My DatePicker has a Holo theme by default. How could I change it to Holo.Dark, which resembles the style that I want? I cannot find Holo.Dark that MyOverlayTheme could extend from. (Since the background color of the lower half still doesn't match what I want. It should be exactly the same as the picture I posted.) – Derekyy Mar 23 '15 at 04:16
I don't get it. So your style is called `MyThemeOverlay` but the theme you apply is called `ThemeOverlay.MyAccent`. Is there a typo? – Katedral Pillon Jan 03 '16 at 03:17

score 0 · Answer 2 · answered Oct 08 '19 at 10:59

0

if you want to do it programmatically without xml, follow this link

answered Oct 08 '19 at 10:59

Asad

1,241
3
19
32

How to change DatePicker's CalendarView's background color in Lollipop?

2 Answers2

Linked