Tugas 3

 

Nama: Clarissa Luna Maheswari
NRP: 5025211003
Kelas: PPB A

link github: https://github.com/ilomimo/happybirthday-ppb/

Pendahuluan

Aplikasi sederhana “Happy Birthday” ini merupakan contoh awal pengembangan aplikasi Android menggunakan Jetpack Compose, framework modern untuk membangun UI secara deklaratif di Android. Tujuan dari aplikasi ini adalah menampilkan pesan ulang tahun secara personal kepada seseorang yang ditentukan. Meskipun terlihat sederhana, aplikasi ini mencakup berbagai aspek dasar dari Jetpack Compose, seperti penggunaan fungsi composable, pengaturan layout, dan pengelolaan teks.

---

Struktur dan Penjelasan Kode

1. Fungsi Main Activity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    BirthdayGreetingWithImage("Luna", "From Clarissa")
                }
            }
        }
    }
}

Fungsi onCreate() di dalam MainActivity adalah titik awal aplikasi. Di sini, Jetpack Compose dipanggil melalui setContent, yang berisi struktur UI aplikasi.

• HappyBirthdayTheme membungkus UI agar konsisten dengan tema material design.
• Surface adalah elemen latar belakang yang bisa diatur warnanya, ukurannya, dsb.
• BirthdayGreetingWithImage() adalah fungsi @Composable yang menampilkan isi utama aplikasi, termasuk gambar dan pesan ulang tahun.

---

2. Fungsi BirthdayGreetingWithImage

@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
    val image = painterResource(R.drawable.androidparty)
    Box {
        Image(
            painter = image,
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )
        BirthdayGreetingWithText(message, from)
    }
}

Fungsi ini menyatukan elemen visual utama: gambar dan teks.

• painterResource() mengambil gambar dari folder res/drawable.
• Image() menampilkan gambar secara penuh (fillMaxSize) dan dipotong proporsional (ContentScale.Crop).
• Box digunakan agar elemen gambar dan teks bisa ditumpuk (gambar jadi background, teks di atasnya).
• Fungsi BirthdayGreetingWithText dipanggil di dalam Box untuk menampilkan tulisan ucapan.

---

3. Fungsi BirthdayGreetingWithText

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
    Column(
        modifier = Modifier.fillMaxSize().padding(8.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = message,
            fontSize = 36.sp,
            modifier = Modifier.padding(8.dp)
        )
        Text(
            text = from,
            fontSize = 24.sp,
            modifier = Modifier.padding(8.dp)
        )
    }
}

Fungsi ini mengatur dan menampilkan teks:

• Column menyusun teks secara vertikal.
• Arrangement.Center membuat teks berada di tengah layar secara vertikal.
• Text() digunakan dua kali: satu untuk pesan utama (message), dan satu untuk nama pengirim (from).
• fontSize menentukan ukuran huruf agar terlihat menonjol.
• Modifier.padding() memberi jarak agar tampilan tidak terlalu rapat.