widget

Android Calendarview Example

When we want to create an Android application that has an Android Activity inside of which we are planning to use a calendar, or if we want to make a simple calendar like application, we should consider in the first place Android Calendarview class.

This class is a calendar widget for displaying and selecting dates. The range of dates supported by this calendar is configurable. A user can select a date by taping on it and can scroll and fling the calendar to a desired date.

However, the CalendarView, is added as a widget at API-level 11, which means, that mobile devices that have below Android 3.0 version will not be able to use this class.

So, in this tutorial we are going to make a calendar-like-application and we will use the following tools in a Windows 64-bit platform:

  • JDK 1.7
  • Eclipse 4.2 Juno
  • Android SDK 4.4.2

Let’s take a closer look:

1. Create a New Android Application Project

Tip
You may skip project creation and jump directly to the beginning of the example below.

Open Eclipse IDE and go to File → New → Project → Android Application Project.

Figure 2. Create a new Android project
Figure 1. Create a new Android project

Specify the name of the application, the project and the package and then click Next.

Figure 2. Create a new Android project name
Figure 2. Create a new Android project name

In the next window, the “Create Activity” option should be checked. The new created activity will be the main activity of your project. Then press Next button.

Create Activity
Figure 3. Configure the project

In “Configure Launcher Icon” window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next.

Configure Launcher Icon
Figure 4. Configure the launcher icon

Select the “Blank Activity” option and press Next.

Blank Activity
Figure 5. Create the activity and select its type

You have to specify a name for the new Activity and a name for the layout description of your app. The .xml file for the layout will automatically be created in the res/layout folder. It will also be created a fragment layout xml, that we are not going to use in this project and you can remove it if you want. Then press Finish.

Figure 6. Create a new blank activity
Figure 6. Create a new blank activity

You can see the structure of the project:

Figure 7. The tree of the project
Figure 7. The tree of the project

2. Creating the layout of the main Activity

We are going to make a very simple layout xml for our activity, that only consists of a LinearLayout that contains the calendar view.

Open res/layout/activity_main.xml, go to the respective xml tab and paste the following:

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"  
    android:background="@color/grey"
    android:orientation="vertical" >
 
    <CalendarView
        android:id="@+id/calendar"
        android:layout_margin="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 
</LinearLayout>

We have also made an Android xml that has to do only with the colors that are used in this activity. This xml should be named colors.xml and should be placed in the res/values/colors.xml folder.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 	<item name="transparent" type="color">#00FFFFFF</item>
    <item name="grey" type="color">#555555</item>
    <item name="green" type="color">#4499CC00</item>
    <item name="darkgreen" type="color">#FF669900</item> 
</resources>

3. Creating the source code of the main Activity

Open src/com.javacodegeeks.androidcalendarviewexample/AndroidCalendarviewExample.java file and paste the code below.

AndroidCalendarviewExample.java

package com.javacodegeeks.androidcalendarviewexample;

import android.os.Bundle;
import android.widget.CalendarView;
import android.widget.CalendarView.OnDateChangeListener;
import android.widget.Toast;
import android.app.Activity;

public class AndroidCalendarviewExample extends Activity {
	CalendarView calendar;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		//sets the main layout of the activity
		setContentView(R.layout.activity_main);
		
		//initializes the calendarview
		initializeCalendar();
	}

	public void initializeCalendar() {
		calendar = (CalendarView) findViewById(R.id.calendar);

		// sets whether to show the week number.
		calendar.setShowWeekNumber(false);

		// sets the first day of week according to Calendar.
		// here we set Monday as the first day of the Calendar
		calendar.setFirstDayOfWeek(2);

		//The background color for the selected week.
		calendar.setSelectedWeekBackgroundColor(getResources().getColor(R.color.green));
		
		//sets the color for the dates of an unfocused month. 
		calendar.setUnfocusedMonthDateColor(getResources().getColor(R.color.transparent));
	
		//sets the color for the separator line between weeks.
		calendar.setWeekSeparatorLineColor(getResources().getColor(R.color.transparent));
		
		//sets the color for the vertical bar shown at the beginning and at the end of the selected date.
		calendar.setSelectedDateVerticalBar(R.color.darkgreen);
		
		//sets the listener to be notified upon selected date change.
		calendar.setOnDateChangeListener(new OnDateChangeListener() {
                       //show the selected date as a toast
			@Override
			public void onSelectedDayChange(CalendarView view, int year, int month, int day) {
				Toast.makeText(getApplicationContext(), day + "/" + month + "/" + year, Toast.LENGTH_LONG).show();
			}
		});
	}
}

Let’s see in detail the code above.

We set the activity_main.xml layout and we initialize our calendarview by:

setContentView(R.layout.activity_main);
initializeCalendar();

4. Android Manifest

The AndroidManifest.xml of our project is simple and basic. We have only put a line that specifies the minimum sdk version that is capable of using the Android CalendarView application.

AndroidManifest.xml

    
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.javacodegeeks.androidcalendarviewexample"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name="com.javacodegeeks.androidcalendarviewexample.AndroidCalendarviewExample"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

5. Build, compile and run

When we build, compile and run our project, the main Activity should look like this:

This is the Calendar activity that is made with the Calendarview.
This is the Calendar activity that is made with the Calendarview.

This is the Calendar activity that is made with the Calendarview.
This is the Calendar activity that is made with the Calendarview.

Download the Eclipse Project

This was an example of Android CalendarView.

Download
You can download the full source code of this example here: AndroidCalendarviewExample.zip

Chryssa Aliferi

Chryssa is a Computer Science graduate from Athens University of Economic and Business. During her studies, Chryssa carried out a great variety of projects ranging from networking to software engineering. She is very keen on front end development especially on mobile technologies and web applications. She has worked as a junior Software Engineer in the telecommunications area and currently works as an Android Developer.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button