Bikin Custom CalendarView untuk Android

Photo by Estée Janssens on Unsplash

Hai~~…

Jadi gini, gw mau sharing cara bikin custom CalendarView untuk android. Alasan gw mau bikin custom adalah, UI Designer meminta tampilan kalendar nya seperti apa telah dia buat. Sementara, CalendarView yang google sediakan seperti di bawah ini.

Sementara itu, yang UI Designer minta seperti ini

Mari kita mulai.

• Siapkan proyek android studio anda. Saya menggunakan proyek yang terintegrasi dengan AndroidX.
• Untuk font tahun dan bulan, kita akan menggunakan Open Sans Light. Untuk font hari, kita akan menggunakan Open Sans Semi Bold. Tambahkan font yang akan kita gunakan ke res/font. Lalu sesuaikan sturktur nya seperti ini

• Tambahkan

maven {
    url "https://jitpack.io"
}

Pada build.gradle project anda, di bagian

allprojects {
    repositories {
        google()
        jcenter()
        // simpan maven disini
    }
}

• Tambahkan

implementation 'androidx.recyclerview:recyclerview:1.1.0-alpha06'
implementation 'com.github.dewinjm:monthyear-picker:1.0.1'
implementation 'com.google.android:flexbox:1.1.0'

pada build.gradle module app Anda lalu klik sync now pada pojok kanan atas code editor.

• Tambahkan kode berikut untuk file activity anda. Disini kita akan membuat tampilan kalender nya.

• Di file res/values/colors.xml tambahkan kode berikut

<color name="date_true">#2c2e31</color>
<color name="date_false">#c6c9cf</color>
<color name="date_false">#1de9b6</color>

• Buat file item_date.xmlDi dalam folder res/layout. Lalu tambahkan kode berikut

• Buat juga file dot (titik) berwarna yang akan mucul ditanggal tertentu. Beri nama dot.xml

p.s. jangan simpan file di v24 jika anda ingin view ini tampil di perangkat dengan android api dibawah v24

Cukup dengan xml dan dependencies, kita akan masuk ke tahap pemrograman.

MainActivity.kt

CalendarModel.kt

CalendarAdapter.kt

Di class CalendarAdapter ini akan menampilkan setiap daftar tanggal yang telah diterima dari fungsi loadCalendar, lalu membandingkan apakah ada tanggal yang perlu diberi tanda.

Untuk hasil nya akan seperti ini :

Coba klik bulan atau tahun, lalu ke bulan Mei 2019. Ada tanggal yang ditandai.

Jika teman-teman merasa kesulitan memahami nya, dan ingin langsung melihat dari source code. Ini source code CustomCalendarView dari saya.

azisnaufal/CustomCalendarView

Referensi ketika saya ngoding ini saya peroleh dari

Create your own custom Calendar View