Pertemuan 3

Nama : Amanda Illona Farrel
NRP : 5025221056
Mata Kuliah : Pemrograman Perangkat Bergerak (C)

Membuat Aplikasi Ulang Tahun

Pada kesempatan kali ini, saya mendapatkan pengalaman baru untuk mengenal Composable dan Komponen Text dalam mobile programming. Di tugas sebelumnya saya hanya mengikuti panduan dasar untuk membuat teks "Hello Android", sementara di tugas ini terdapat tantangan baru. Berikut langkah-langkah sederhana untuk membuat aplikasi Ulang Tahun menggunakan Android Studio:

Pertama, saya membuat project baru di Android Studio dengan memilih template Empty Activity, lalu mengisi konfigurasi project seperti Name, Package name, Save location, Minimum SDK, dan Build configuration language sesuai kebutuhan sebelum menekan tombol Finish.
Kemudian, saya mengatur layar utama aplikasi pada MainActivity dengan menggunakan komponen Surface di dalam fungsi setContent. Hal ini bertujuan agar latar belakang menutupi seluruh layar (fillMaxSize) dan menerapkan warna dasar dari tema aplikasi (MaterialTheme.colorScheme.background). Untuk konten utamanya, saya memanggil fungsi GreetingText yang nantinya akan diubah menjadi fungsi GreetingImage karena fokus saya di tugas ini adalah memodifikasi gambar latar belakang dan teks.
Seperti yang sudah disebutkan pada langkah sebelumnya, saya membuat fungsi bernama GreetingText menggunakan Column dengan pengaturan Arrangement.SpaceBetween. Hal ini bertujuan agar teks ucapan ulang tahun terletak di bagian atas dan nama pengirim di bagian bawah layar. Lalu, agar teks terlihat menarik dan tidak menyatu dengan background nantinya, saya menambahkan parameter TextStyle berwarna putih, memperbesar ukuran font, serta memberikan efek bayangan hitam (Shadow) pada kedua elemen teks tersebut. Oh ya, untuk menampilkan tulisannya, saya memanggil fungsi GreetingText tadi di dalam fungsi BirthdayCardPreview(), lalu memberikan parameter message-nya dengan "Happy Birthday, Illona! \n 🎂 🎂 🎂" dan parameter from dengan " - From JJ & Nilam".
Selanjutnya, pada fungsi GreetingImage, saya menggunakan komponen Box agar elemen UI bisa saling bertumpuk. Sebagai lapisan paling bawah, saya menempatkan komponen Image untuk menampilkan foto dari R.drawable.illona (sebagai catatan, pastikan file foto JPG/PNG yang akan digunakan sudah diletakkan di dalam folder res -> drawable). Pada elemen Image tersebut, saya menggunakan parameter ContentScale.Crop agar foto otomatis diperbesar hingga memenuhi layar tanpa merusak proporsi, serta sedikit menurunkan alpha (0.8F). Untuk memastikan teks putih tetap terbaca jelas di atas bagian foto yang terang, saya menyisipkan Surface berwarna hitam transparan (alpha = 0.2f) di atas gambar sebagai filter gelap tipis. Masih di dalam komponen Box, saya meletakkan pemanggilan fungsi GreetingText di baris paling bawah agar teks ucapan tersebut dirender di atas lapisan foto dan filter gelap tadi.
Untuk melihat hasilnya, saya menambahkan anotasi @Preview(showBackground = true, showSystemUi = true) pada fungsi BirthdayCardPreview. Dengan parameter tersebut, Android Studio dapat menampilkan pratinjau desain secara real-time sekaligus memunculkan simulasi status bar seperti pada layar HP asli.
Sebagai catatan tambahan, jika sewaktu-waktu terjadi error saat menulis kode, pastikan untuk mengecek terlebih dahulu kelengkapan kode di bagian import-nya.
Finally, aplikasi Android sederhana yang menampilkan kartu ucapan ulang tahun ini pun berhasil dibuat!