Tugas 3: Membuat Aplikasi Selamat Ulang Tahun

Jetpack Compose menyediakan toolkit yang kuat dan intuitif untuk membangun antarmuka pengguna (UI) Android. Salah satu keunggulan utamanya adalah kemampuannya untuk menyusun tata letak (layout) yang kompleks dengan cara yang deklaratif dan mudah dipahami. Dalam artikel ini, kita akan menganalisis kode dari sebuah aplikasi kartu ucapan ulang tahun sederhana untuk memahami konsep-konsep kunci dalam layouting dan styling di Compose.

Struktur Proyek dan Titik Masuk (MainActivity)

Seperti aplikasi Compose pada umumnya, logika UI dimulai dari MainActivity. Fungsi setContent menjadi jembatan untuk merender composable kita.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    BirthdayCard(
                        message = "Happy Birthday, Adrian!",
                        from = "from Ismu"
                    )
                }
            }
        }
    }
}
        

Di sini, composable utama kita adalah BirthdayCard, yang dipanggil dengan pesan dan nama pengirim sebagai argumen. Ini menunjukkan bagaimana kita dapat membuat komponen yang dapat digunakan kembali (reusable) dengan meneruskan data melalui parameter.

Analisis Komponen BirthdayCard

Komponen BirthdayCard adalah inti dari aplikasi ini. Ia bertanggung jawab untuk menata gambar latar belakang dan teks ucapan. Mari kita bedah strukturnya.

@Composable
fun BirthdayCard(message: String, from: String) {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Card(...) { ... }
    }
}
        

1. Layout Bertumpuk dengan Box

Elemen root dari BirthdayCard adalah Box. Composable Box sangat ideal ketika kita perlu menempatkan elemen di atas elemen lainnya (menumpuk). Dalam kasus ini, kita menumpuk sebuah Card di atas sebuah Image. Modifier Modifier.fillMaxSize() memastikan bahwa Box ini memenuhi seluruh layar perangkat.

2. Menampilkan Gambar Latar (Image)

Elemen pertama di dalam Box adalah Image. Perhatikan properti berikut:

• painter = painterResource(...): Memuat aset gambar dari direktori drawable.
• modifier = Modifier.fillMaxSize(): Membuat gambar mencoba untuk mengisi seluruh ukuran Box.
• contentScale = ContentScale.Crop: Ini adalah properti krusial. Ia memastikan gambar akan menutupi seluruh area yang tersedia tanpa mengubah rasio aspeknya. Bagian gambar yang berlebih akan dipotong (cropped). Ini mencegah gambar menjadi terdistorsi (stretch/squeeze).

3. Membuat Kartu Informasi (Card)

Elemen kedua, yang diletakkan di atas gambar, adalah Card. Card adalah composable dari Material Design yang menyediakan permukaan dengan elevasi dan sudut membulat, cocok untuk menampilkan konten yang terpisah.

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(48.dp)
        .align(Alignment.BottomCenter)
        .offset(y = (-80).dp),
    shape = RoundedCornerShape(24.dp),
    colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
) { ... }
        

Rangkaian modifier pada Card ini sangat penting untuk penempatannya:

1. .fillMaxWidth(): Membuat lebar kartu memenuhi lebar induknya.
2. .padding(48.dp): Memberikan ruang kosong sebesar 48dp di sekeliling kartu.
3. .align(Alignment.BottomCenter): Ini adalah modifier yang spesifik untuk turunan Box. Ia menyejajarkan kartu ke bagian tengah-bawah dari Box.
4. .offset(y = (-80).dp): Setelah diposisikan di bagian bawah, modifier ini menggeser kartu ke atas sejauh 80dp. Kombinasi align dan offset adalah teknik yang sangat umum untuk penempatan presisi.

Properti shape dan colors digunakan untuk styling visual, memberikan sudut yang membulat dan warna latar yang sesuai dengan tema aplikasi.

4. Penataan Teks di Dalam Kartu

Di dalam Card, kita menggunakan Column untuk menyusun teks ucapan dan nama pengirim secara vertikal. Penggunaan horizontalAlignment = Alignment.CenterHorizontally memastikan semua teks di dalamnya akan rata tengah secara horizontal.

Column(
    modifier = Modifier.padding(vertical = 40.dp, horizontal = 24.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text(
        text = message,
        fontSize = 32.sp,
        fontWeight = FontWeight.Bold,
        textAlign = TextAlign.Center,
        ...
    )
    Text(
        text = from,
        fontSize = 20.sp,
        ...
    )
}
        

Composable Text itu sendiri diberi gaya yang spesifik menggunakan parameter seperti fontSize, fontWeight, dan textAlign untuk menciptakan hierarki visual antara pesan utama dan nama pengirim.

Manfaat Pratinjau (@Preview)

Terakhir, keberadaan fungsi BirthdayCardPreview yang dianotasi dengan @Preview(showBackground = true) sangat membantu proses pengembangan. Ia memungkinkan kita melihat hasil akhir dari composable BirthdayCard langsung di IDE Android Studio tanpa perlu menjalankan aplikasi, sehingga mempercepat iterasi desain.

Kesimpulan

Melalui analisis kode kartu ucapan ini, kita dapat melihat bagaimana Jetpack Compose memungkinkan kita membangun UI yang menarik secara visual dengan cara yang logis dan deklaratif. Konsep-konsep kunci yang telah kita bahas—menggunakan Box untuk layout bertumpuk, Image dengan ContentScale.Crop untuk latar belakang yang responsif, dan kombinasi modifier align dan offset untuk penempatan yang presisi—adalah fondasi penting untuk dikuasai dalam pengembangan antarmuka pengguna modern di Android.

Github

Referensi:

https://kuliahppb.blogspot.com/2024/03/mengenal-composable.html

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables