Tugas 3 - Aplikasi Selamat Ulang Tahun

Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      : Link Github

Tugas 3 - Aplikasi Selamat Ulang Tahun

Pada tugas ini, dibuat aplikasi sederhana yang dapat menampilkan ucapan selamat ulang tahun di layar. Hal ini dapat dilakukan dengan Jetpack Compose menggunakan fungsi composable seperti Text, Column, dan Row. Berikut adalah tahapan pembuatannya menggunakan referensi dari tutorial Codelab Android - Membangun Aplikasi Sederhana Dengan Composable Teks:

1. Inisiasi Proyek

Pertama-tama buka aplikasi Android Studio lalu pilih New Project -> Empty Activity. Kemudian ubah nama activity menjadi "Happy Birthday" dan menggunakan level API minimum 24 sesuai tutorial, lalu pilih Finish. Lalu tunggu beberapa saat sampai Android Studio selesai loading proyek. Untuk kemudahan maka digunakan virtual device Pixel 7 Pro yang sama dengan minggu lalu.

2. Menampilkan Desain/Preview

Kemudian, ubah nama fungsi pada line 42 kode default menjadi "BirthdayCardPreview", yaitu menyesuaikan dengan aturan penamaan Fungsi Compose (berupa kata benda dan sesuai kegunaan).

Lalu pilih split pada bagian kanan atas MainActivity.kt sehingga dapat menampilkan kode program sekaligus preview desainnya.

Ketika variabel "Android" pada kode program diubah, maka tab design akan terupdate dengan sendirinya. Perlu diingat bahwa karena hanya berupa fungsi @Preview, maka hasil hanya dapat ditampilkan pada tab desain.

Selanjutnya, ubah fungsi bawaan Greeting (line 32) menjadi fungsi GreetingText, lalu comment juga pemanggilan fungsi Greeting di fungsi onCreate dan sesuaikan pemanggilan nama dan isi fungsi GreetingText pada fungsi preview BirthdayCardPreview.

3. Ubah Ukuran dan Alignment Teks

Ukuran teks juga dapat diubah, cara adalah dengan menambahkan import androidx.compose.ui.unit.sp pada bagian atas untuk dapat menggunakan satuan ukuran sp (Scalable Pixel) yang digunakan untuk mengatur ukuran teks. Sedangkan alignment teks diubah dengan mengimport import androidx.compose.ui.text.style.TextAlign . Library-library yang diperlukan dapat diimport secara otomatis dengan menghover pada teks berwarna merah (tidak dapat digunakan karena library belum di-import) lalu klik import.

Sehingga ketika composable Text ditambahkan atribut seperti fontSize, lineHeight, dan textAlign, programmer dapat menentukan karakteristik teks yang ingin digunakan pada UI aplikasinya.

4. Ubah Hierarki UI dan Menambahkan Elemen Teks

Fungsi composable dapat memiliki struktur yang terdiri dari banyak composable elemen Text, beberapa diantaranya adalah Row dan Column. Karena aplikasi akan dibuat untuk membuat ucapan selamat ulang tahun, maka dapat digunakan Column sehingga elemen-elemen Text yang berada di dalamnya akan memiliki bentuk seperti kolom.

Kemudian, ubah fungsi GreetingText agar menerima parameter tambahan yaitu from, yang akan digunakan untuk nama pengirim ucapan selamat ulang tahun. Tambahkan juga argumen nama pemberi ucapan pada BirthdayCardPreview.

5. Panggil Fungsi Composable Pada onCreate

Selanjutnya, panggil fungsi GreetingText pada onCreate beserta argumen yang diperlukan, kemudian run app menggunakan device yang diinginkan. Maka akan terlihat hasil akhir pada Android di sebelah kanan.

6. Modifikasi Tambahan

Lakukan modifikasi terhadap posisi Column, warna teks dan background sesuai dengan kebutuhan menggunakan modifier maupun attribut tambahan. Berikut adalah tampilan hasil akhir dan codenya: 

MainActivity.kt:

Referensi

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0

https://developer.android.com/jetpack/compose/text/style-text

https://developer.android.com/jetpack/compose/text/style-paragraph