Pertemuan 3

Nama: Thopaz Givangkara Rosadi

NRP: 5025231050

Kelas: PPB (C)

Source Code: https://github.com/rsthopaz/Pemrograman-Mobile/tree/main/Pertemuan_3

Reference: https://medium.com/@zyrridian/jetpack-compose-3-membangun-aplikasi-sederhana-dengan-composable-t-28997eb393df

1. HappyBirthdayTheme

HappyBirthdayTheme {

Baris ini menggunakan tema aplikasi yang terdapat di folder:

ui/theme

Theme berfungsi untuk mengatur:

• warna aplikasi

• typography

• gaya tampilan

---

2. Surface sebagai Container UI

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
)

Surface adalah komponen dari Material Design yang berfungsi sebagai wadah (container) untuk elemen UI.

Penjelasan parameternya:

• fillMaxSize() → membuat komponen memenuhi seluruh layar

• background → menggunakan warna latar dari tema aplikasi

---

3. Memanggil Composable GreetingText

Di dalam Surface dipanggil fungsi:

GreetingText(message = "Happy Birthday Sam!", from = "From Emma")

Fungsi ini akan menampilkan teks ucapan ulang tahun dan nama pengirim.

Parameter yang dikirim:

• message → pesan ucapan

• from → nama pengirim

---

4. Fungsi Composable GreetingText

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier)

@Composable menunjukkan bahwa fungsi ini adalah fungsi UI di Jetpack Compose.

Fungsi ini menerima dua parameter:

• message → teks ucapan

• from → nama pengirim

---

5. Menggunakan Layout Column

Column {

Column digunakan untuk menyusun komponen secara vertikal (atas ke bawah).

Jadi tampilan akan menjadi:

Happy Birthday Sam!
From Emma

---

6. Menampilkan Teks Ucapan

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

Komponen Text digunakan untuk menampilkan teks.

Penjelasan parameter:

• text → isi teks

• fontSize → ukuran font

• lineHeight → tinggi jarak antar baris

Pada contoh ini ukuran font dibuat sangat besar agar terlihat seperti judul ucapan ulang tahun.

---

7. Menampilkan Nama Pengirim

Text(
    text = from,
    fontSize = 36.sp
)

Teks kedua digunakan untuk menampilkan nama pengirim dengan ukuran font lebih kecil.

---

8. Preview Tampilan

@Preview(showBackground = true)

Annotation ini digunakan untuk melihat preview tampilan langsung di Android Studio tanpa menjalankan aplikasi di emulator.

Fungsi preview:

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

Preview akan menampilkan tampilan kartu ucapan ulang tahun secara langsung di editor.

Untuk menjalankan function pada MainActivity.kt, perlu mengubah function pada ui/Theme.kt menyesuaikan dengan yang ada pada MainActivity.kt