CalendarView horizontal en Android

Si estamos creando una aplicación que brinda servicios como reservar vuelos, boletos de cine u otros, generalmente tenemos que implementar un calendario en nuestra aplicación. Tenemos que alinear el calendario de tal manera que se vea mejor y ocupe menos espacio en la aplicación móvil. La mayoría de las aplicaciones prefieren usar la vista de calendario horizontal en su interior, que se ve mejor que el calendario normal. En este artículo, veremos cómo implementar un calendario similar en nuestra aplicación. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que simplemente crearemos un calendario horizontal y mostraremos las fechas completas del mes en él. Mostraremos estas fechas en la vista de calendario horizontal. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘devs.mulham.horizontalcalendar:horizontalcalendar:1.3.4’

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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">
  
    <!--on below line we are creating our calendar view
        selector color is use as a indicator for selected date
        text color normal is use to give text color to unselected date
        text color selected is use to give text color to selected date-->
    <devs.mulham.horizontalcalendar.HorizontalCalendarView
        android:id="@+id/calendarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:selectorColor="@android:color/holo_red_dark"
        app:textColorNormal="@color/purple_200"
        app:textColorSelected="@color/purple_200" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.util.Log;
  
import androidx.appcompat.app.AppCompatActivity;
  
import java.util.Calendar;
  
import devs.mulham.horizontalcalendar.HorizontalCalendar;
import devs.mulham.horizontalcalendar.utils.HorizontalCalendarListener;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        /* starts before 1 month from now */
        Calendar startDate = Calendar.getInstance();
        startDate.add(Calendar.MONTH, -1);
          
        /* ends after 1 month from now */
        Calendar endDate = Calendar.getInstance();
        endDate.add(Calendar.MONTH, 1);
          
        // on below line we are setting up our horizontal calendar view and passing id our calendar view to it.
        HorizontalCalendar horizontalCalendar = new HorizontalCalendar.Builder(this, R.id.calendarView)
                // on below line we are adding a range 
                // as start date and end date to our calendar.
                .range(startDate, endDate)
                // on below line we are providing a number of dates
                // which will be visible on the screen at a time.
                .datesNumberOnScreen(5)
                // at last we are calling a build method 
                // to build our horizontal recycler view.
                .build();
        // on below line we are setting calendar listener to our calendar view.
        horizontalCalendar.setCalendarListener(new HorizontalCalendarListener() {
            @Override
            public void onDateSelected(Calendar date, int position) {
                // on below line we are printing date 
                // in the logcat which is selected.
                Log.e("TAG", "CURRENT DATE IS " + date);
            }
        });
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: