Pertemuan 3

 Nama:    Muhammad Shafa Narariya

NRP:    5025231016

Kelas: PPB (C)

Source Code: https://github.com/ItsPong/PBB/tree/main/Pertemuan_3

1. Menentukan Tema Aplikasi

Setiap project Android Studio memiliki folder ui/theme. Di dalamnya terdapat fungsi tema (biasanya bernama NamaProjectTheme).

HappyBirthdayTheme { 

    // Semua kode UI di sini akan mengikuti gaya tema aplikasi
}

Penjelasan: Baris ini memastikan aplikasi kita memiliki warna, font, dan gaya tampilan yang konsisten. Ingat, nama fungsi ini harus sesuai dengan yang terdaftar di file Theme.kt project kamu.

2. Menggunakan Surface sebagai Kanvas

Agar aplikasi memiliki latar belakang yang rapi dan mengikuti standar Material Design, kita menggunakan Surface.

Surface(

    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    // Isi konten kartu di sini
}

• fillMaxSize(): Perintah ini membuat komponen memenuhi seluruh layar HP.

• background: Mengambil warna latar belakang otomatis dari tema aplikasi (bisa berubah otomatis jika pengguna memakai Dark Mode).

3. Menyusun Konten dengan Layout Column

Masalah utama saat menampilkan dua teks adalah mereka akan saling bertumpuk. Solusinya adalah menggunakan Column.

Column(modifier = modifier) {

    // Teks 1 (Di atas)
    // Teks 2 (Di bawahnya)
}

Penjelasan: Column berfungsi untuk menyusun komponen secara vertikal (dari atas ke bawah). Tanpa ini, ucapan ulang tahun dan nama pengirim akan tumpang tindih dan tidak terbaca.

4. Kustomisasi Teks (Typography)

Pada kartu ucapan ini, kita menggunakan dua buah komponen Text dengan ukuran yang berbeda untuk menciptakan hirarki visual.

Teks Ucapan Utama:

Text(
    text = message,
    fontSize = 100.sp,
    lineHeight = 116.sp
)

• fontSize (100.sp): Membuat teks sangat besar agar menjadi pusat perhatian.

• lineHeight: Memberi jarak antar baris agar teks tetap rapi meski ukurannya besar.

Teks Nama Pengirim:

Text(

    text = from,
    fontSize = 36.sp
)

• Teks kedua dibuat lebih kecil agar terlihat sebagai keterangan tambahan (pengirim).

5. Memanfaatkan Fitur Preview

Untuk melihat hasil tanpa harus menjalankan emulator yang berat, kita menggunakan anotasi @Preview.

@Preview(showBackground = true)

@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
    }
}

Penjelasan: Fungsi ini hanya untuk kebutuhan desain di dalam Android Studio. Kamu bisa langsung melihat perubahan tampilan setiap kali kamu mengubah angka fontSize atau isi teksnya.