How to Customize Android Calendar View?

2 min readFeb 23, 2023

As an Android developer, we will face problems to customize the calendar view by creating a style, but it is difficult to get the result we want because our parent theme will override the calendar view theme. Here I have found an easier way to achieve it here you can see the example:

First thing we need to change the text color of the dates. before that we have to create a Calendar View in our XML.

<CalendarView
    android:id="@+id/calendar_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/CalenderViewCustom"
    android:dateTextAppearance="@style/CalenderViewDateCustomText"
    android:weekDayTextAppearance="@style/CalenderViewWeekCustomText"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

2. Then We will have to create our style for the Calendar View

I have created this style for the selected date background and main text color. I also think this main text color will not work on this.

<style name="CalenderViewCustom" parent="Theme.AppCompat">
    <item name="colorControlActivated">@color/common_app_color</item>
    <item name="android:textColorPrimary">@color/color_black</item>
</style>

3. After that we have to create a week Day Text Appearance

I have created this style to change the color of the day of the week. You can use your own color to override the theme color.

<style name="CalenderViewWeekCustomText" parent="android:TextAppearance.DeviceDefault.Small">
    <item name="android:textColor">@color/color_black</item>
</style>

4.Finally we have come to customize the date cells in the Calendar View

Here I have created a style to change the color of the date texts by creating a drawable selector file.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_black" />
</selector>

After creating the selector file, the color of the calendar date text will change to black. You can use any color you want.

Then we are going to change the color of the selected date because for now the color of the selected text is still black.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:color="@color/white" />
    <item android:color="@color/color_black" />
</selector>

Here I used state_activated=”true” to change the color of the selected date. now we can see our selected date in white color, you can use any color you like.

After that we can change the color of the passed date using state_enabled=”false” and use whatever color we want.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:color="@color/white" />
    <item android:state_enabled="false" android:color="@color/gray"/>
    <item android:color="@color/color_black" />
</selector>

Now we can see the past dates in gray color.

Finally we need to use the selector drawable in the style we created for dateTextAppearance.

<style name="CalenderViewDateCustomText" parent="CommonTextView.sans_serif.primary">
        <item name="android:textColor">@drawable/calender_date_selector</item>
    </style>

I hope this will be a useful solution for your problem. Thank you.

How to Customize Android Calendar View?

Written by Maathusan