PPB C - Pertemuan 3 - Aplikasi Ucapan Ulang Tahun

5025221103 | Hilmi Fawwaz Sa'ad | Pertemuan 3 | PPB C

Aplikasi Ucapan Ulang Tahun

Pada tugas ini, saya melakukan implementasi pembuatan aplikasi ucapan ulang tahun menggunakan Android Studio dengan memanfaatkan Jetpack Compose. Berikut merupakan dokumentasi dari hasil pengerjaan tugas tersebut:

Repository Github: Tugas Ucapan Ulang Tahun

1. Buka Android Studio

2. Pilih "Project Baru"

3. Pilih "Empty Activity" dan pilih "Next"

4. Isi konfigurasi sesuai dengan project yang dikerjakan dan pilih "Finish"

5. Hasil dari konfigurasi setelah menekan tombol "Finish" pada poin 4 sebelumnya

6. Buat fungsi composable bernama "GreetingText"

@Composable
fun GreetingText(message: String, from: String) {
    Row  {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp,
        )
    }
}

Fungsi GreetingText adalah composable function yang menampilkan ucapan ulang tahun menggunakan komponen Row untuk menyusun dua elemen Text secara horizontal:

Pesan Utama (message): Ukuran font 100.sp dengan line height 116.sp.
Nama Pengirim (from): Ukuran font 36.sp.

Meskipun saat ini tidak menggunakan parameter modifier karena tata letaknya masih sederhana, sesuai best practice Jetpack Compose, sangat disarankan untuk tetap menambahkan modifier: Modifier = Modifier. Hal ini penting agar komponen lebih fleksibel dan reusable, sehingga parent composable dapat dengan mudah mengatur properti seperti padding, size, atau posisi saat memanggil fungsi ini.

7. Buat preview

@Preview(showBackground = true, showSystemUi = true, name = "My Preview")
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
       GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
    }
}

Fungsi BirthdayCardPreview adalah composable function dengan anotasi @Preview yang memungkinkan pengembang melihat tampilan UI di Android Studio tanpa emulator.

Konfigurasi Parameter @Preview:

showBackground = true: Menampilkan latar belakang agar elemen UI lebih kontras.
showSystemUi = true: Menampilkan status dan navigation bar untuk simulasi perangkat nyata.
name = "My Preview": Memberikan identitas unik pada panel pratinjau.

Di dalamnya, fungsi GreetingText dibungkus dengan HappyBirthdayTheme. Hal ini memastikan pratinjau menggunakan konfigurasi warna, tipografi, dan gaya visual yang akurat sesuai tema aplikasi secara keseluruhan.

8. Konfigurasi di MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
                }
            }
        }
    }
}

MainActivity merupakan aktivitas utama berbasis ComponentActivity yang menggunakan onCreate dan enableEdgeToEdge untuk menginisialisasi tampilan full-screen. Di dalam setContent, seluruh UI dibungkus oleh HappyBirthdayTheme dan Surface dengan Modifier.fillMaxSize() untuk memastikan warna latar belakang dan tata letak konsisten sesuai standar Material Design, sebelum akhirnya memanggil fungsi GreetingText untuk menampilkan pesan ucapan di layar.

9. Cek hasil dengan pilih "Split" pada bagian kanan atas untuk menampilkan hasilnya

10. Apabila text 'From Emma" tidak muncul, anda bisa coba untuk mengubah layout yang awalnya "Row" menjadi "Column"

@Composable
fun GreetingText(message: String, from: String) {
    Column {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp,
        )
    }
}