Tugas 3 PPB G 2025 - Farhan Dwi Putra 5025211093

Nama : Farhan Dwi Putra

NRP : 5025211093

Kelas : Pemrograman Perangkat Bergerak (G)

Tugas Pertemuan 3

Deskripsi Tugas

Pada pertemuan ke-3 ini, kami diminta untuk membuat sebuah aplikasi sederhana. Aplikasi ini merupakan contoh penggunaan Jetpack Compose untuk membangun UI pada Android. Aplikasi yang dibuat adalah Birthday Card yang menampilkan ucapan ulang tahun beserta nama pengirim ucapan. Penulisan UI mengikuti prinsip hierarki yang baik, dengan memisahkan antara isi pesan dan nama pengirimnya.

---

Source Code

Kode aplikasi dibagi menjadi tiga bagian utama:

• MainActivity: Kelas utama yang menampilkan UI utama aplikasi.

• HappyGreeting: Fungsi composable untuk menampilkan isi ucapan ulang tahun.

• BirthdayCardPreview: Fungsi preview yang digunakan untuk melihat tampilan UI secara langsung di Android Studio.

---

Penjelasan Kode

MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    HappyGreeting(
                        message = "Selamat Ulang Tahun Farhan!",
                        from = "dari Sahabatmu"
                    )
                }
            }
        }
    }
}

• enableEdgeToEdge(): Mengaktifkan mode layar penuh agar aplikasi menggunakan seluruh area layar.

• setContent {}: Digunakan untuk menyusun tampilan aplikasi menggunakan Jetpack Compose.

• Surface(...): Membungkus konten aplikasi dengan latar belakang sesuai tema.

• HappyGreeting(...): Memanggil fungsi utama untuk menampilkan ucapan ulang tahun.

---

Fungsi HappyGreeting

@Composable
fun HappyGreeting(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Hai, $message",
            fontSize = 40.sp,
            lineHeight = 48.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(30.dp))

        Text(
            text = "~ $from 💖~",
            fontSize = 24.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

• Menggunakan Column untuk menampilkan teks secara vertikal.

• Arrangement.Center dan Alignment.CenterHorizontally digunakan agar teks berada di tengah layar.

• Spacer(...) digunakan untuk memberikan jarak antara ucapan dan nama pengirim.

• TextAlign.Center dan Modifier.fillMaxWidth() membuat teks rata tengah secara horizontal.

---

Fungsi BirthdayCardPreview

@Preview(showBackground = true, name = "Ini versi preview")
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        HappyGreeting(message = "Habede Sobat Preview!", from = "dari Preview")
    }
}

• @Preview(...) memungkinkan kita melihat tampilan UI secara langsung di Android Studio.

• showBackground = true akan menampilkan latar belakang putih untuk pratinjau.

• name = "Ini versi preview" memberikan label pada preview agar lebih mudah dikenali.

---

Hasil Tampilan Aplikasi

Setelah dijalankan, aplikasi akan menampilkan teks:

• “Hai, Selamat Ulang Tahun Farhan!” di tengah layar

• Diikuti dengan tulisan: “dari Sahabatmu” tepat di bawahnya, dengan jarak yang cukup.

---

Hasil

Source Code : Github