Membuat Aplikasi Image Scroll Affirmation Card dengan Material Design

Pendahuluan

Pada pertemuan kedelapan kuliah Pemrograman Perangkat Bergerak kali ini kita telah mempelajari terkait Material Design kembali. Pada pertemuan ini kita akan mengerjakan sebuah studi kasus membuat sebuah image scroll menggunakan Material Design. Aplikasi yang akan dibuat merupakan sebuah aplikasi yang berisi sebuah card dengan isi gambar dan caption berupa afirmasi. Untuk membuat aplikasi Affirmations ini kita akan menggunakan beberapa composable seperti Image() dan Text() yang kita bungkus menggunakan composable Card().

Membuat Aplikasi Affirmations

Berbeda dengan proyek sebelumnya, dimana kita biasanya menggunakan template "Empty Activity" pada Android Studio, kali ini kita akan mengunduh template kode yang sudah disediakan agar mempermudah pembuatan aplikasi ini. Untuk mengunduh kode aplikasi Affirmations kalian bisa mengunduhnya di sini Aplikasi Affirmations atau kalian bisa mengikuti langkah seperti berikut.

Kunjungi Github google-developer-training dan unduh kode dari repositori basic-android-kotlin-compose-training-affirmation pada branch starter.

Setelah mengunjugi repositori dan branch dengan benar kita bisa langsung mengunduh atau melakukan cloning pada repositori ini. Kali ini saya akan mengunduh kodenya dan mengekstrak kode tersebut pada perangkat komputer saya, seperti berikut.

Ekstrak kode yang telah diunduh, kemudian buka folder kode dengan Android Studio.

Setelah terunduh, ekstrak kode yang telah diunduh kemudian kita akan langsung membuka kode tersebut menggunakan Android Studio, seperti berikut.

Untuk membuka folder kode tersebut kita bisa langsung saja menjalankan Android Studio kemudian pada toolbar kita pilih opsi File kemudian Open folder kode tadi. Disini saya memodifikasi nama folder kode yang sudah diekstrak menjadi Tugas Kartu Afirmari.

Membuat package model pada package aplikasi affirmations dan membuat Data class pada package model dengan nama Affirmation.

Setelah berhasil memuat kode yang telah diunduh, hal pertama yang akan kita lakukan disini adalah membuat sebuah package baru dengan nama model. Dalam package tersebut kita juga akan membuat sebuah file Data class dengan nama Affirmation. Pada file Affirmation tersebut kita akan memuat nilai dari card afirmasi kita nantinya, maka dari itu kita akan membuat sebuah variabel val yang berisikan teks atau caption dan val yang berisikan gambar dari card afirmasi kita nantinya.

Membuat komponen AffirmationCard() yang berisi komponen Card() yang di dalamnya terdapat Image() dan Text().

Sebelum membuat komponen AffirmationCard() disini kita akan un-comment beberapa kode pada file Datasource pada package data. File kode Datasource ini akan digunakan untuk mengenerate atau menghasilkan list dari afirmasi.

Setelah itu kita akan pindah ke file MainActivity.kt dan langsung akan membuat komponen AffirmationCard() dengan anotasi @Composable. Setelah membuat komponennya kita akan mengisikan beberapa parameter pada komponen AffirmatinCard(), yaitu parameter affirmation untuk memuat data teks dan gambar pada komponen dan modifier untuk melakukan modifikasi pada UI AffirmationCard().

Kemudian kita akan menambahkan komponen Card() yang didalamnya terdapat komponen Image() dan Text() yang akan disusun secara vertikal, maka dari itu kita juga akan bungkus kedua komponen tersebut dengan Column(). Setelah itu kita akan memuat data dari Affirmation pada package model ke dalam komponen Image() dan Text() serta memodifikasi UI sesuai dengan keinginan kita, berikut adalah contoh kodenya.

Setelah itu kita akan coba melihat atau preview dari komponen AffirmationCard() milik kita. Disini kita akan membuat sebuah komponen AffirmationCardPreview() untuk melihat hasil dari AffirmationCard(). Kita akan membuat komponen tersebut dengan anotasi @Preview dan @Composable. Di dalam komponen tersebut kita akan langsung panggil AffirmationCard() dengan parameter affirmation, di sini kita akan mencoba untuk melihat hasil dari AffirmationCard() untuk string affirmation1 dan image1. Berikut adalah contoh preview dari AffirmationCardPreview().

Membuat komponen AffirmationList() yang berisi kumpulan AffirmationCard() dengan LazyColumn().

Setelah berhasil membuat satu komponen card afirmasi, selanjutnya kita akan membuat sebuah komponen AffirmationList() yang akan memuat semua komponen card afirmasi sehingga nanti kita bisa men-scroll komponen card afirmasi pada aplikasi kita. Berikut adalah kode dari AffirmationList().

Pada komponen AffimationList() kita akan beri beberapa parameter seperti affimationList yang akan memuat daftar dari objek-objek Affirmation. Di dalam komponen ini kita akan memanggil AffirmationCard() dengan parameter affirmation dan modifier di dalam LazyColumn(). LazyColumn() di sini kita gunakan karena dengan komponen ini kita hanya akan memuat komponen yang ditampilkan pada layar saja dan ini membuat performa aplikasi lebih baik.

Memuat AffirmationList() pada AffirmationApp() dan menjalankan aplikasi.

Setelah semua selesai, kita akan memuat AffirmationList() pada komponen AffirmationApp() untuk dimunculkan pada aplikasi. Kita akan panggil AffirmationList() yang akan memuat Datasource yang berisi data affirmation. Berikut contoh kodenya.