Membuat Program Ucapan Selamat Ulang Tahun Menggunakan Composable

Pendahuluan

Pada pertemuan ketiga kuliah Pemrograman Perangkat Bergerak kali ini kita akan mempelajari tentang Composable pada JetPack Compose. Latihan pada pertemuan kali ini kita akan membuat sebuah proyek menggunakan template Empty Activity untuk mengubah pesan teks menjadi ucapan ulang tahun secara personal.

Membuat Proyek Ucapan Ulang Tahun

Sekarang kita akan membuat proyek baru kita dengan menggunakan template yang sudah ada pada Android Studio. Disini kita akan memilih template Empty Activity kembali sama seperti proyek sebelumnya. Pada proyek ini kita akan membuat sebuah proyek sederhana yang menampilkan ucapan "Selamat Ulang Tahun". Selain itu kita akan mengubah ukuran dari teks yang ditampilkan.

Membuka Android Studio dan memilih opsi "Empty Activity".
Setelah memilih template Empty Activity kita akan memilih level API minimum untuk proyek kita, disini kita akan memilih API 24 (Nougat)
Setelah memilih opsi tersebut tunggu hingga semua kode dimuat.
Kemudian kita akan menulis kode sesuai dengan panduan yang sudah dijelaskan di kelas pada pertemuan kemarin

Di atas adalah sebuah fungsi GreetingText yang merupakan bagian dari framework Jetpack Compose. Fungsi ini bertujuan untuk menampilkan teks ucapan selamat ulang tahun. Dengan menerima dua parameter string: message (sebagai pesan utama) dan from (sebagai penanda pengirim), fungsi ini berperan dalam menyajikan ucapan secara dinamis. Komponen Text yang terdiri dari dua bagian disusun dalam Column. Bagian pertama menampilkan pesan utama dengan gaya font yang besar, yaitu 100 sp dengan tinggi baris sebesar 116 sp. Sementara itu, bagian kedua menampilkan pengirim ucapan dengan ukuran font yang lebih kecil, yaitu 36 sp. Dengan pengaturan Column ini, teks akan ditampilkan secara vertikal, di mana pesan utama akan mendahului nama pengirim.

Setelah itu kita bisa langsung jalankan kode yang sudah kita tulis hingga tampilan Android Studio seperti ini.

Setelah berhasil menjalankan kode sebelumnya kita bisa melakukan sedikit modifikasi untuk mempercantik tampilan dari ucapan "Selamat Ulang Tahun". Disini saya memodifikasi kode ini dengan membuat sebuah card yang berisi ucapan Selamat Ulang Tahun versi saya seperti ini.