Latihan Membuat Aplikasi Ulang Tahun dari CodeLab

Nama : Rafaela Shyra Ashma' Ramadhani

NRP : 5025231217

Kelas : Pemrograman Perangkat Bergerak (B)

Tugas 3 - Pertemuan 3

 

Pada tugas ini dilakukan latihan pembuatan aplikasi sederhana berbasis Android menggunakan Jetpack Compose yang mengacu pada CodeLab yang disediakan oleh Google. Aplikasi yang dibuat berupa tampilan ucapan ulang tahun yang dapat dipersonalisasi dengan menampilkan pesan dan nama pengirim. Tujuan dari latihan ini adalah untuk memahami konsep dasar Composable function, penggunaan layout seperti Column, serta bagaimana membangun antarmuka pengguna (UI) secara deklaratif tanpa menggunakan XML di Android Studio.

Kode: https://github.com/raflasr/ppb_b 

Penjelasan kode

Package dan Import Library 

Bagian awal kode berisi deklarasi package com.example.happybirthday yang menunjukkan lokasi file dalam struktur project Android. Selanjutnya terdapat berbagai import yang digunakan untuk memanggil library yang dibutuhkan, seperti ComponentActivity untuk aktivitas utama, setContent untuk mengatur tampilan menggunakan Compose, serta komponen UI seperti Column, Text, Surface, dan MaterialTheme. Import lain seperti Modifier, Alignment, Arrangement, dan padding digunakan untuk mengatur tata letak dan tampilan elemen, sedangkan sp dan dp digunakan untuk mengatur ukuran teks dan jarak secara responsif.

Class MainActivity

Class MainActivity merupakan komponen utama aplikasi yang dijalankan pertama kali saat aplikasi dibuka. Class ini merupakan turunan dari ComponentActivity. Di dalamnya terdapat method onCreate() yang berfungsi sebagai titik awal eksekusi aplikasi. Pada method ini digunakan fungsi setContent untuk mendefinisikan tampilan aplikasi menggunakan Jetpack Compose. Dengan pendekatan ini, pengembangan UI tidak lagi menggunakan file XML, melainkan langsung melalui kode Kotlin.

Theme dan Surface

Di dalam setContent, digunakan HappyBirthdayTheme untuk menerapkan tema visual aplikasi agar tampilan lebih konsisten. Selanjutnya, Surface digunakan sebagai container utama yang menampung seluruh elemen UI. Modifier fillMaxSize() membuat Surface memenuhi seluruh layar perangkat, sedangkan properti color = MaterialTheme.colorScheme.background digunakan untuk mengatur warna latar belakang sesuai dengan tema yang diterapkan. Di dalam Surface, dipanggil fungsi GreetingText yang bertugas menampilkan isi utama aplikasi.

Pemanggilan GreetingText

Fungsi GreetingText dipanggil dengan parameter message dan from yang masing-masing berisi teks ucapan ulang tahun dan nama pengirim. Selain itu, diberikan juga modifier padding(all = 8.dp) untuk memberikan jarak antara konten dengan tepi layar, sehingga tampilan tidak terlalu rapat dan lebih nyaman dilihat.

Composable Function GreetingText

Fungsi GreetingText merupakan sebuah Composable function yang digunakan untuk menampilkan teks ucapan ulang tahun. Fungsi ini menerima parameter message, from, dan modifier. Parameter modifier bersifat opsional dan memungkinkan penyesuaian tampilan dari luar fungsi. Di dalam fungsi ini, digunakan layout Column untuk menyusun elemen secara vertikal.

Layout Column

Pada bagian Column, digunakan properti verticalArrangement = Arrangement.Center untuk memposisikan seluruh elemen di tengah secara vertikal. Modifier yang diterima dari parameter juga diterapkan pada Column, sehingga pengaturan seperti padding dapat langsung mempengaruhi keseluruhan layout. Dengan menggunakan Column, teks ucapan dan nama pengirim akan tersusun dari atas ke bawah.

Teks Ucapan Utama

Teks pertama ditampilkan menggunakan komponen Text yang berisi variabel message. Ukuran teks diatur sangat besar, yaitu 100.sp, agar menjadi fokus utama tampilan. Properti lineHeight = 116.sp digunakan untuk mengatur jarak antar baris teks jika terdapat lebih dari satu baris. Selain itu, textAlign = TextAlign.Center digunakan untuk memastikan teks berada di tengah secara horizontal sehingga terlihat lebih rapi dan seimbang.

Teks Pengirim

Teks kedua menampilkan nama pengirim menggunakan komponen Text dengan ukuran font lebih kecil, yaitu 36.sp. Modifier tambahan berupa padding(16.dp) digunakan untuk memberikan jarak dari elemen lain. Selain itu, digunakan align(Alignment.End) untuk mengatur posisi teks agar berada di sisi kanan dari layout Column, sehingga memberikan kesan seperti tanda tangan pada ucapan.

Preview Function

Fungsi BirthdayCardPreview yang diberi anotasi @Preview digunakan untuk menampilkan pratinjau tampilan aplikasi langsung di Android Studio tanpa harus menjalankan aplikasi di emulator atau perangkat fisik. Fungsi ini memanggil kembali GreetingText dengan parameter yang sama, sehingga developer dapat melihat hasil desain UI secara cepat dan melakukan penyesuaian jika diperlukan.

Hasilnya: 

Hasil dari program ini adalah tampilan aplikasi yang menampilkan teks “Happy Birthday Sam!” dengan ukuran besar di tengah layar, serta teks “From Emma” yang berada di bagian kanan bawah. Tampilan ini terlihat sederhana, rapi, dan mudah dibaca sesuai dengan tujuan pembuatan aplikasi.