Cara Membuat Tampilan Kalender dengan Android Studio

Apa kabar sahabat Coders?, Semoga sahabat coders baik baik aja ya :) .. Oke kita langsung saja, pada artikel ini saya akan menunjukkan cara membuat aplikasi android untuk menampilkan Kalender menggunakan CalendarView.

Nah CalendarView ini berguna untuk menampilkan tanggal dan juga memilih tanggal tersebut. Pada CalenderView terdapat function setOnDateChangeListener,  Nah setOnDateChangeListener ini digunakan untuk membuat metode onSelectedDayChange.



onSelectedDayChange : Dalam metode ini, kita akan mendapatkan nilai hari, bulan, dan tahun yang bisa dipilih oleh user.
Berikut adalah langkah-langkah untuk membuat Aplikasi Kalender pada Android :
  • Buat proyek baru dan Anda akan memiliki layout file XML dan file java. Layar Anda akan terlihat seperti gambar di bawah ini.



 
  • Buka file xml Anda dan tambahkan CalendarView serta TextView. Dan tetapkan id untuk TextView dan CalendarView. Setelah menyelesaikan proses ini, layout file xml akan tampak seperti gambar di bawah ini.

 
  • Sekarang, buka file MainActivity.java dan tentukan variabel jenis CalendarView dan TextView, dan juga gunakan findViewById () untuk mendapatkan Calendarview dan TextView.
  • Tambahkan Interface setOnDateChangeListener pada object CalendarView yang menyediakan metode setOnDateChangeListener. Dalam metode ini kita mendapatkan Tanggal (hari, bulan, tahun) dan mengatur tanggal di TextView untuk ditampilkan.
  • Terakhir, Run aplikasi dan atur tanggal saat ini yang akan ditampilkan di bagian atas layar.
Berikut adalah Source Code lengkap pada file MainActivity.java dan 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"> 

     <!-- Add TextView to display the date -->
     <TextView
      android:id="@+id/date_view"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="150dp"
      android:layout_marginTop="20dp"
      android:text="Set the Date"
      android:textColor="@android:color/background_dark"
      android:textStyle="bold" /> 

     <!-- Add CalenderView to display the Calender -->
     <CalendarView
      android:id="@+id/calender"
      android:layout_marginTop="80dp"
      android:layout_marginLeft="19dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"> 
     </CalendarView> 

    </RelativeLayout>


 

  package org.amcodes.adimurianto.calendar; 

  import android.support.annotation.NonNull; 
  import android.support.v7.app.AppCompatActivity; 
  import android.os.Bundle; 
  import android.widget.Button; 
  import android.widget.CalendarView; 
  import android.widget.TextView; 

  public class MainActivity extends AppCompatActivity { 

   // Define the variable of CalendarView type 
   // and TextView type; 
   CalendarView calender; 
   TextView date_view; 
   @Override
   protected void onCreate(Bundle savedInstanceState) 
   { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    // By ID we can use each component 
    // which id is assign in xml file 
    // use findViewById() to get the 
    // CalendarView and TextView 
    calender = (CalendarView) 
     findViewById(R.id.calender); 
    date_view = (TextView) 
     findViewById(R.id.date_view); 

    // Add Listener in calendar 
    calender 
     .setOnDateChangeListener( 
      new CalendarView 
       .OnDateChangeListener() { 
        @Override

        // In this Listener have one method 
        // and in this method we will 
        // get the value of DAYS, MONTH, YEARS 
        public void onSelectedDayChange( 
         @NonNull CalendarView view, 
         int year, 
         int month, 
         int dayOfMonth) 
        { 

         // Store the value of date with 
         // format in String type Variable 
         // Add 1 in month because month 
         // index is start with 0 
         String Date 
          = dayOfMonth + "-"
          + (month + 1) + "-" + year; 

         // set this date in TextView for Display 
         date_view.setText(Date); 
        } 
       }); 
   } 
  }

Tampilan aplikasi akan seperti ini.

Oke terimakasih untuk para sahabat coders yang sudah membaca tutorial ini, semoga bermanfaat, dan menambah ilmu pemrogramannya, Aamiin..

Akan ada saatnya yang pintar kalah dengan orang yang berusaha
" Salam Coders ".

Disqus Comments