Horizontal CalendarView in Android

If we are making an application that provides services such as booking flights, movie tickets, or others we generally have to implement a calendar in our application. We have to align the calendar in such a way so that it will look better and will take less amount of space in the mobile app. Most of the apps prefer to use Horizontal Calendar View inside their which looks better than the normal calendar. In this article, we will take a look at implementing a similar calendar in our app. 

What we are going to build in this article? 

We will be building a simple application in which we will be simply creating a horizontal calendar and we will be displaying the whole dates of the month in it. We will be displaying these dates in the horizontal Calendar View.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Note that we are going to implement this project using Java/Kotlin language.

Step 2: Add dependency

Navigate to the Gradle Scripts > build.gradle.kts (Module:app) and add the below dependency in the dependencies {} section.   

dependencies {
    ...
    implementation ("io.github.b-sahana:horizontalcalendar:1.2.2")
}

Navigate to the Gradle Scripts > settings.gradle.kts and add the below code in the repositories {} section.

dependencyResolutionManagement {
    ...
    repositories {
        ...
        maven { url = uri("https://jitpack.io/") }
    }
}

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

(Optional) Create two custom shapes for the background of the selected and unselected dates. Navigate to the res > drawable folder, right click and select New > Drawable Resource File and set the names as selected_card_bg.xml and unselected_card_bg.xml.

<?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"
    android:orientation="vertical"
    android:background="@color/white"
    tools:context=".MainActivity">

    <com.sahana.horizontalcalendar.HorizontalCalendar
        android:id="@+id/horizontalCalendar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:numOfDays="90"
        app:setBgColor="@drawable/unselected_card_bg"
        app:setDateTextSize="22sp"
        app:setLabel="Calender"
        app:setMonthTextSize="18sp"
        app:setSelectedBgColor="@drawable/selected_card_bg"
        app:setSelectedTextColor="@color/white"
        app:setTextColor="@color/white"
        app:setWeekTextSize="13sp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="@color/black"
        android:text="Example" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="12dp"/>
    <solid android:color="@color/colorAccent"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="12dp"/>
    <solid android:color="@color/colorPrimary"/>
</shape>

Step 4: Working with the MainActivity file

Go to the MainActivity file and refer to the following code. Below is the code for the MainActivity file. Comments are added inside the code to understand the code in more detail.

package org.geeksforgeeks.demo;

import android.os.Bundle;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.sahana.horizontalcalendar.HorizontalCalendar;
import com.sahana.horizontalcalendar.model.DateModel;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        HorizontalCalendar horizontalCalendar = findViewById(R.id.horizontalCalendar);
        TextView textView = findViewById(R.id.textView);

        horizontalCalendar.setOnDateSelectListener(new HorizontalCalendar.OnDateSelect() {
            @Override
            public void onDateSelected(DateModel dateModel) {
                if (dateModel != null) {
                    String selectedDate = dateModel.getDay() + " " +
                                          dateModel.getDayOfWeek() + " " +
                                          dateModel.getMonth() + ", " +
                                          dateModel.getYear();
                    textView.setText(selectedDate);
                } else {
                    textView.setText("");
                }
            }
        });
    }
}

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.sahana.horizontalcalendar.HorizontalCalendar


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val horizontalCalendar = findViewById<HorizontalCalendar>(R.id.horizontalCalendar)
        val textView = findViewById<TextView>(R.id.textView)

        horizontalCalendar.setOnDateSelectListener { dateModel ->
            textView.text =
                if (dateModel != null) {
                    dateModel.day.toString() + " " + dateModel.dayOfWeek + " " + dateModel.month + "," + dateModel.year
                } else {
                    ""
                }
        }
    }
}

Output: