Friday, June 24, 2022
HomeAndroid Calendar TutorialsCustom Calendar View Android | Project Setting

Custom Calendar View Android | Project Setting

In this part of Custom Calendar View Android we will start step by step to construct Custom Calendar view with events project. Moreover I will start from project settings and creating all XML layout files required for the project.

Project Settings

Start a new android project and add the project name. After project build, open module level gradle file and the following dependencies then click sync.

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.0.0-beta01'
implementation 'androidx.constraintlayout:constraintlayout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.1.0-alpha4'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0-alpha4'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0-alpha04'
implementation 'com.google.android.material:material:1.1.0-alpha05'
}

Manifest File

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

<receiver android:name=".AlarmReceiver"
android:exported="true"
android:enabled="true">

</receiver>
</application>

Styles.xml File

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>

Colors.xml File

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="green">@android:color/holo_green_dark</color>
</resources>

Project Images

After project has been build, Open (res) folder then (layout) folder and create new new resource file and name it calendar_layout.xml . The calendar XML layout is Linear layout with id ( android:id = “@id/activity_custom_calendar” . Then inside linear layout add child linear layout with horizontal orientation. This layout contains tow Image Buttons for next and previous months in-between there is text view to show the current month name and year.

Next, Create Linear layout with orientation horizontal to show the 7 days of the week in Custom Calendar View layout. This layout contains 7 text views with layout weight= 1 (click XML Layout files button and copy it).

After days of the week layout, add GridView and set numColumns attribute = 7 . The Custom Calendar layout should be like this.

Calendar Layout XML File

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/activity_custom_calndar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="@android:color/holo_orange_dark">
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/previousBtn"
android:background="@mipmap/prevous"
android:layout_margin="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="4dp"
android:text="CurrentDate"
android:id="@+id/current_Date"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="18sp"
android:layout_weight="3"/>

<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/nextBtn"
android:background="@mipmap/next"
android:layout_margin="10dp"
/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:background="@color/colorPrimaryDark">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sun"
android:background="@android:color/holo_blue_dark"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Mon"
android:background="@android:color/holo_orange_light"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Tue"
android:background="@android:color/holo_green_light"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Wed"
android:background="@android:color/holo_red_light"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Thu"
android:background="@android:color/holo_purple"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Fri"
android:background="@android:color/white"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sat"
android:background="@android:color/darker_gray"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:textStyle="bold"
/>

</LinearLayout>

<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/gridview"
android:numColumns="7"></GridView>



</LinearLayout>

Add New Event Layout XML File

Next, we need to create a new layout to add the new events and should be as the following image. This layout is a Linear parent layout with orientation vertical. After creation of this layout, add Edit Text widget for event name then add Linear horizontal layout. The later layout contains three widgets. The first is ImageButton and it used for showing time picker dialog and set the layout weight as “1”. The second is Text View for showing the selected event time and it’s layout weight is “2”, The third is check box for setting alarm and it’s layout weight is “1”. Finally we need to add button to the parent layout to save events.

android calendar view with events add new event
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/colorPrimaryDark">

<EditText
android:id="@+id/eventname"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="20dp"
android:background="@android:color/white"
android:gravity="center"
android:hint="Type Event"
android:inputType="textShortMessage"
tools:ignore="HardcodedText"
android:autofillHints=""
tools:targetApi="o" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<ImageButton
android:id="@+id/seteventtime"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="10dp"
android:background="@mipmap/timeicon"
android:contentDescription="TODO"
tools:ignore="ContentDescription,HardcodedText"
android:layout_weight="1"
/>

<TextView
android:id="@+id/eventtime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="00:00 AM"
android:textColor="@android:color/white"
android:textSize="30sp"
android:textStyle="bold"
tools:ignore="HardcodedText"
android:layout_weight="2"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Alarm Me"
android:textColor="@android:color/white"
android:buttonTint="@android:color/white"
android:id="@+id/alarmme"
android:layout_weight="1"/>


</LinearLayout>

<Button
android:id="@+id/addevent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:background="@android:color/white"
android:text="Add Event"
android:textAllCaps="false"
android:textColor="@color/colorPrimaryDark"
android:textStyle="bold"
tools:ignore="HardcodedText" />

</LinearLayout>

Show Events Layout XML File

We need to make the user to show events after long press on the calendar day. So, create a new resource layout file and add Recycler View inside it.

android calendar view with events show event recyclerview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_orange_light">

<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/EventsRV"
android:layout_margin="5dp"
/>

</LinearLayout>

Show Events Row Layout XML File

android calendar view with events show events
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp"
app:cardElevation="12sp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@android:color/holo_blue_dark"
android:id="@+id/eventdate"
android:textStyle="bold"
android:text="Date"
android:textSize="15dp"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@android:color/holo_purple"
android:id="@+id/eventname"
android:textStyle="bold"
android:text="Event"
android:textSize="40dp"
/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="@android:color/holo_green_dark"
android:id="@+id/eventime"
android:textStyle="bold"
android:text="Time"
android:textSize="20dp"
/>

<ImageButton
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/alarmmeBtn"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:src="@drawable/ic_action_notification_off"
android:background="@color/colorPrimaryDark"/>



<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/delete"
android:text="Delete"
android:textAllCaps="false"
android:layout_margin="10dp"/>

</LinearLayout>

</androidx.cardview.widget.CardView>

</LinearLayout>

Single Cell Row Layout XML File

android calendar view with events single day cell
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="60dp"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/calendar_day"
android:text="1"
android:textStyle="bold"
android:layout_gravity="center"
android:textSize="20sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="9sp"
android:id="@+id/events_id"
android:textColor="@android:color/white"
android:layout_gravity="center"/>

</LinearLayout>

Main Activity XML File

It is final final step in the tutorial. after creating custom calendar java file and finalizing out code we need to edit Main Activity XML file. The parent layout if main activity should be Linear Layout. Then the xml file should be as the following.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidhands.com.customcalendarviewwithevents.CustomCalendarView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/custom_calendar_view" />
</LinearLayout>

RELATED ARTICLES

11 COMMENTS

  1. I know this tutorial has been going on for a while, but could you help me, I would like to know how I could color the current day on the calendar. If you could help me I would appreciate it very much

    • add variable of current day from current date
      int currentDay = currentDate.get(Calendar.DAY_OF_MONTH);
      then add another conditon
      if(displayMonth == currentMonth && displayYear == currentYear){
      view.setBackgroundColor(getContext().getResources().getColor(R.color.green));

      } else if(DayNo == currentDay){
      view.setBackgroundColor(getContext().getResources().getColor(android.R.color.holo_orange_dark));
      }
      else
      {
      view.setBackgroundColor(Color.parseColor(“#cccccc”));
      }

  2. sorry to bother you again. I have applied the code that you have suggested and the truth is that it works for me but it selects a date that is wrong, I tried to fix it and what I got is to color the current day but in all months. Could you help me with that? I don’t know what else to do, I’ll send you the code to implement

  3. if (displayMes == currentMes && displayAnio == currentAnio) {
    view.setBackgroundColor(getContext().getResources().getColor(R.color.calendario));
    if (DiaNo == currentDia) {
    view.setBackgroundColor(getContext().getResources().getColor(R.color.primary_dark));
    }
    }else {
    view.setBackgroundColor(Color.parseColor(“#cccccc”));
    }

    • the complete source code is not available with me, but I can help you if you send me the error to fix it with you. To do that run the app for crash and open logcat in the bottom window toolbar of the android studio and select Error from drop list starts with verbose after that reply me the error.

  4. Hello!
    Great work done, just had a bit doubt the entire code have no error there’s just one thing when you run the app it does not work. The app stops. The error is in the xml tag : . Would to grateful if you could pls let me know the solution for this.
    Thanks.

  5. Hi there could I have some help please private void CollectEventsPerMonth(String Month,String Year){ in CustomCalendar. cursor.getString(cursor. getColumnIndexOrThrow(DBStructure.EVENT)); showing red underline? nothing saving to my db either?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

KU NUR RASYIDAH BINTI KU BIDE on Custom Calendar View Android | Project Java Files
SHIVANT KUMAR PANDEY on Login And Registration by Firebase
Adriane Troy U. Alariao on Custom Calendar View With Events Android