Android Custom Calendar Day View Example

In this android tutorial, we are going to learn how to create android custom calendar day view. If you still don’t understand what a calendar day view is about, you can look at the screen-shot below to have a matter understanding.

Android custom calendar day view with events is an interface that let you see all the events you have on a particular day in your calendar.

If you are interested on how to create android custom calendars app with month view, I wrote a tutorial on this topic and I will suggest you read my post on Android Custom Calendar View with Events.

Major part of this tutorial will follow what I have discussed in the above tutorial so it is important you read it first before you continue with this tutorial.

The major considerable difference is the UI design in each of the application. In this android custom calendar day view, we are going to use mainly TextView, ImageView and View widgets to create a complete view for the day calendar.

In other to get a visual understanding of what we are going to create in this android tutorial, I have add below some screen shots from the application.

 

SOME SCREENSHOT FROM THE APPLICATION

androidcustom calendar day view

 

CREATE NEW ANDROID PROJECT

Lets start to soil our hands in code. Start up your IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 10

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 24

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCalendarDailyView

Package: com.inducesmile.androidcalendardailyview

Select Empty Activity

Name your activity: MainActivity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Now that we have created our android project, we are going to add some library dependencies to our app level build.gradle. Since we are going to store our events in a database, we are going to use a database helper library and also Joda-time for date manipulation.

Open you app level build.gradle file and add the code below.

apply plugin: 'com.android.application'
apply plugin: 'com.android.application'
android {
    compileSdkVersion 24
    buildToolsVersion "24.0.1"
    defaultConfig {
        applicationId "com.inducesmile.androidcalendardailyview"
        minSdkVersion 14
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    testCompile 'junit:junit:4.12'
    compile 'com.readystatesoftware.sqliteasset:sqliteassethelper:+'
    compile 'joda-time:joda-time:2.9.4'
}

 

STRINGS.XML

We are going to update our project strings.xml file located in the values folder inside the res folder. Open the file and add the code below to it.

<resources>
    <string name="app_name">Android Calendar Daily View</string>
    <string name="time_12am">12 am</string>
    <string name="time_1am">1 am</string>
    <string name="time_2am">2 am</string>
    <string name="time_3am">3 am</string>
    <string name="time_4am">4 am</string>
    <string name="time_5am">5 am</string>
    <string name="time_6am">6 am</string>
    <string name="time_7am">7 am</string>
    <string name="time_8am">8 am</string>
    <string name="time_9am">9 am</string>
    <string name="time_10am">10 am</string>
    <string name="time_11am">11 am</string>
    <string name="time_12pm">12 pm</string>
    <string name="time_13pm">13 pm</string>
    <string name="time_14pm">14 pm</string>
    <string name="time_15pm">15 pm</string>
    <string name="time_16pm">16 pm</string>
    <string name="time_17pm">17 pm</string>
    <string name="time_18pm">18 pm</string>
    <string name="time_19pm">19 pm</string>
    <string name="time_20pm">20 pm</string>
    <string name="time_21pm">21 pm</string>
    <string name="time_22pm">22 pm</string>
    <string name="time_23pm">23 pm</string>
    <string name="time_24pm">24 pm</string>
    <string name="birth_day">I am going to birthday party</string>
    <string name="current_day_date">8 October, 2016</string>
</resources>

 

COLORS.XML

Open the colors.xml file in the same location as the strings.xml file and add the code below to the file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#ffffff</color>
    <color name="colorBlack">#000000</color>
    <color name="colorDivider">#aaaaaa</color>
</resources>

 

Create activity_main.xml

Open the activity_main.xml file created by android studio when we initially created our project. We are going to create our interface some different view widgets.

The xml code is long due to the fact that will need to create 24 rows that will represent 24 hours in a day.

There are other ways to achieve this by extending the default android View class and overriding the onDraw and onMeasure method of the View class.

Open this layout file and add the code below to it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.inducesmile.androidcalendardailyview.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:background="@color/colorAccent"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/previous_day"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:contentDescription="@string/app_name"
            android:src="@drawable/left_arrow"
            android:layout_weight="1"/>
        <TextView
            android:id="@+id/display_current_date"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="@color/colorWhite"
            android:text="@string/current_day_date"
            android:layout_marginTop="4dp"
            android:textStyle="bold"
            android:layout_weight="3"/>
        <ImageView
            android:id="@+id/next_day"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:contentDescription="@string/app_name"
            android:src="@drawable/right_arrow"
            android:layout_weight="1"/>
    </LinearLayout>
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="1500dp"
                android:layout_weight="2">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_12am"
                    android:paddingTop="20dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="60dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_1am"
                    android:paddingTop="80dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="120dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_2am"
                    android:paddingTop="140dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="180dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_3am"
                    android:paddingTop="200dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="240dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_4am"
                    android:paddingTop="260dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="300dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_5am"
                    android:paddingTop="320dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="360dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_6am"
                    android:paddingTop="380dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="420dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_7am"
                    android:paddingTop="440dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="480dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_8am"
                    android:paddingTop="500dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="540dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_9am"
                    android:paddingTop="560dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="600dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_10am"
                    android:paddingTop="620dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="660dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_11am"
                    android:paddingTop="680dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="720dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_12pm"
                    android:paddingTop="740dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="780dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_13pm"
                    android:paddingTop="800dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="840dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_14pm"
                    android:paddingTop="860dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="900dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_15pm"
                    android:paddingTop="920dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="960dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_16pm"
                    android:paddingTop="980dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1020dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_17pm"
                    android:paddingTop="1040dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1080dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_18pm"
                    android:paddingTop="1100dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1140dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_19pm"
                    android:paddingTop="1160dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1200dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_20pm"
                    android:paddingTop="1220dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1260dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_21pm"
                    android:paddingTop="1280dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1320dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_22pm"
                    android:paddingTop="1340dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1380dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_23pm"
                    android:paddingTop="1400dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1440dp"
                    android:background="@color/colorDivider" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/colorBlack"
                    android:textStyle="bold"
                    android:text="@string/time_24pm"
                    android:paddingTop="1460dp"
                    android:layout_centerHorizontal="true"/>
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1500dp"
                    android:background="@color/colorDivider" />
            </RelativeLayout>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/colorDivider" />
            <RelativeLayout
                android:id="@+id/left_event_column"
                android:layout_width="0dp"
                android:layout_height="1500dp"
                android:layout_weight="8">
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="60dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="120dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="180dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="240dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="300dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="360dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="420dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="480dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="540dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="600dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="660dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="720dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="780dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="840dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="900dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="960dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1020dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1080dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1140dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1200dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1260dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1320dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1380dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1440dp"
                    android:background="@color/colorDivider" />
                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="1500dp"
                    android:background="@color/colorDivider" />
            </RelativeLayout>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

 

Create MainActivity.java

In the MainActivity class, will get the instances of the some of the View widgets in the activity_main.xml layout file.

The next and previous day view is use to navigate through the calendar. When a user click on the next button, it will move the calendar day to the next day and will update the calendar with regards to events.

The methods that were used in this class are very simple to understand so I will not go into further details to explain them. But if you have any question, kindly use the comment box below and I will get back to you.

Open the MainActivity.java file and add the code below to the file.

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.inducesmile.androidcalendardailyview.databases.DatabaseQuery;
import com.inducesmile.androidcalendardailyview.databases.EventObjects;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Locale;
public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private ImageView previousDay;
    private ImageView nextDay;
    private TextView currentDate;
    private Calendar cal = Calendar.getInstance();
    private DatabaseQuery mQuery;
    private RelativeLayout mLayout;
    private int eventIndex;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mQuery = new DatabaseQuery(this);
        mLayout = (RelativeLayout)findViewById(R.id.left_event_column);
        eventIndex = mLayout.getChildCount();
        currentDate = (TextView)findViewById(R.id.display_current_date);
        currentDate.setText(displayDateInString(cal.getTime()));
        displayDailyEvents();
        previousDay = (ImageView)findViewById(R.id.previous_day);
        nextDay = (ImageView)findViewById(R.id.next_day);
        previousDay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                previousCalendarDate();
            }
        });
        nextDay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                nextCalendarDate();
            }
        });
    }
    private void previousCalendarDate(){
        mLayout.removeViewAt(eventIndex - 1);
        cal.add(Calendar.DAY_OF_MONTH, -1);
        currentDate.setText(displayDateInString(cal.getTime()));
        displayDailyEvents();
    }
    private void nextCalendarDate(){
        mLayout.removeViewAt(eventIndex - 1);
        cal.add(Calendar.DAY_OF_MONTH, 1);
        currentDate.setText(displayDateInString(cal.getTime()));
        displayDailyEvents();
    }
    private String displayDateInString(Date mDate){
        SimpleDateFormat formatter = new SimpleDateFormat("d MMMM, yyyy", Locale.ENGLISH);
        return formatter.format(mDate);
    }
    private void displayDailyEvents(){
        Date calendarDate = cal.getTime();
        List<EventObjects> dailyEvent = mQuery.getAllFutureEvents(calendarDate);
        for(EventObjects eObject : dailyEvent){
            Date eventDate = eObject.getDate();
            Date endDate = eObject.getEnd();
            String eventMessage = eObject.getMessage();
            int eventBlockHeight = getEventTimeFrame(eventDate, endDate);
            Log.d(TAG, "Height " + eventBlockHeight);
            displayEventSection(eventDate, eventBlockHeight, eventMessage);
        }
    }
    private int getEventTimeFrame(Date start, Date end){
        long timeDifference = end.getTime() - start.getTime();
        Calendar mCal = Calendar.getInstance();
        mCal.setTimeInMillis(timeDifference);
        int hours = mCal.get(Calendar.HOUR);
        int minutes = mCal.get(Calendar.MINUTE);
        return (hours * 60) + ((minutes * 60) / 100);
    }
    private void displayEventSection(Date eventDate, int height, String message){
        SimpleDateFormat timeFormatter = new SimpleDateFormat("HH:mm", Locale.ENGLISH);
        String displayValue = timeFormatter.format(eventDate);
        String[]hourMinutes = displayValue.split(":");
        int hours = Integer.parseInt(hourMinutes[0]);
        int minutes = Integer.parseInt(hourMinutes[1]);
        Log.d(TAG, "Hour value " + hours);
        Log.d(TAG, "Minutes value " + minutes);
        int topViewMargin = (hours * 60) + ((minutes * 60) / 100);
        Log.d(TAG, "Margin top " + topViewMargin);
        createEventView(topViewMargin, height, message);
    }
    private void createEventView(int topMargin, int height, String message){
        TextView mEventView = new TextView(MainActivity.this);
        RelativeLayout.LayoutParams lParam = new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        lParam.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        lParam.topMargin = topMargin * 2;
        lParam.leftMargin = 24;
        mEventView.setLayoutParams(lParam);
        mEventView.setPadding(24, 0, 24, 0);
        mEventView.setHeight(height * 2);
        mEventView.setGravity(0x11);
        mEventView.setTextColor(Color.parseColor("#ffffff"));
        mEventView.setText(message);
        mEventView.setBackgroundColor(Color.parseColor("#3F51B5"));
        mLayout.addView(mEventView, eventIndex - 1);
    }
}

 

Stored Calendar Events in SQLite Database

We are going to create different classes that will help use to work with sqlite database. We are opening to use an external sqlite manager software to create our database file outside our application.

Once we have created it, we will navigate to our project main file and create a new folder called assets. Inside the assets folder, create any folder named databases and the drop the database file in a zip format inside this folder.

Remember that we have add sqlite helper library when we initially created our project. What this library will do is to copy our database file, unzip it and move it to it normal location so that our application will still have access to it.

To create the database file, run the sqlite query below.

CREATE TABLE "events" ( `_id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `message` TEXT NOT NULL, `reminder` TEXT NOT NULL, `end` TEXT )

We are going to use the classes below to manage our database.

 

Create Database.java

Create a new java file inside the database package folder. Name the file Database.java. Open the file and paste the code below.

import android.content.Context;
import com.readystatesoftware.sqliteasset.SQLiteAssetHelper;
public class Database extends SQLiteAssetHelper {
    private static final String DATABASE_NAMES = "events";
    private static final int DATABASE_VERSION = 3;
    public Database(Context context) {
        super(context, DATABASE_NAMES, null, DATABASE_VERSION);
    }
}

 

Create DatabaseObject.java

Follow the same process as above and add the code below to this file.

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
public class DatabaseObject {
    private static Database dbHelper;
    private SQLiteDatabase db;
    public DatabaseObject(Context context) {
        dbHelper = new Database(context);
        this.dbHelper.getWritableDatabase();
        this.db = dbHelper.getReadableDatabase();
    }
    public SQLiteDatabase getDbConnection(){
        return this.db;
    }
    public void closeDbConnection(){
        if(this.db != null){
            this.db.close();
        }
    }
}

 

Create DatabaseQuery.java

Follow the same process as above and add the code below to this file.

import android.content.Context;
import android.database.Cursor;

import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Locale;

public class DatabaseQuery extends DatabaseObject{

    private static final String TAG = Database.class.getSimpleName();

    public DatabaseQuery(Context context) {
        super(context);
    }

    public List<EventObjects> getAllFutureEvents(Date mDate){
        Calendar calDate = Calendar.getInstance();
        Calendar dDate = Calendar.getInstance();
        calDate.setTime(mDate);

        int calDay = calDate.get(Calendar.DAY_OF_MONTH);
        int calMonth = calDate.get(Calendar.MONTH) + 1;
        int calYear = calDate.get(Calendar.YEAR);

        List<EventObjects> events = new ArrayList<>();
        String query = "select * from events";
        Cursor cursor = this.getDbConnection().rawQuery(query, null);
        if(cursor.moveToFirst()){
            do{
                int id = cursor.getInt(0);
                String message = cursor.getString(cursor.getColumnIndexOrThrow("message"));
                String startDate = cursor.getString(cursor.getColumnIndexOrThrow("reminder"));
                String endDate = cursor.getString(cursor.getColumnIndexOrThrow("end"));
                //convert start date to date object
                Date reminderDate = convertStringToDate(startDate);
                Date end = convertStringToDate(endDate);
                dDate.setTime(reminderDate);
                int dDay = dDate.get(Calendar.DAY_OF_MONTH);
                int dMonth = dDate.get(Calendar.MONTH) + 1;
                int dYear = dDate.get(Calendar.YEAR);

                if(calDay == dDay && calMonth == dMonth && calYear == dYear){
                    events.add(new EventObjects(id, message, reminderDate, end));
                }
            }while (cursor.moveToNext());
        }
        cursor.close();
        return events;
    }

    private Date convertStringToDate(String dateInString){
        DateFormat format = new SimpleDateFormat("d-MM-yyyy HH:mm", Locale.ENGLISH);
        Date date = null;
        try {
            date = format.parse(dateInString);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return date;
    }
}

 

Create EventObjects.java

We are going to create an entity bean object that will wrap a single row of the database and store it as an object.

Create a new java file and name it EventObjects.java. Open the file and add the code below.

import java.util.Date;

public class EventObjects {

    private int id;

    private String message;

    private Date date;

    private Date end;

    public EventObjects(String message, Date date, Date end) {
        this.message = message;
        this.date = date;
        this.end = end;
    }

    public EventObjects(int id, String message, Date date, Date end) {
        this.date = date;
        this.message = message;
        this.id = id;
        this.end = end;
    }

    public Date getEnd(){
        return end;
    }

    public int getId() {
        return id;
    }

    public String getMessage() {
        return message;
    }

    public Date getDate() {
        return date;
    }
}

This brings us to the end of this tutorial. I hope that you have learn something. Run your app and see for yourself.

You can download the code for this tutorial below. If you are having hard time downloading the tutorial, kindly contact me.

Remember to subscribe with your email address to be among the first to receive my new android blog post once it is published.

5 Comments

    • Inducesmile

Add a Comment