Muhammad Risyad Himawan Putra: PPB Pertemuan 3 - Aplikasi Ucapan Selamat Ulang Tahun

Membuat Aplikasi Android "Happy Birthday" dengan Jetpack Compose

Jetpack Compose adalah toolkit modern Android untuk membuat UI langsung menggunakan Kotlin tanpa XML. UI dibuat menggunakan fungsi yang disebut Composable. Blog ini akan menjelaskan bagaimana membuat contoh aplikasi sederhana yang menampilkan ucapan ulang tahun di tengah layar.

1. Struktur Dasar Program

Program terdiri dari tiga bagian utama:

MainActivity sebagai entry point aplikasi
Composable function untuk membuat UI
Preview untuk melihat tampilan di Android Studio

2. MainActivity

Activity utama memanggil setContent untuk menampilkan UI Compose dan menjalankan fungsi GreetingText.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            HappyBirthdayTheme {

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

                    GreetingText(
                        message = "Happy Birthday Sam!",
                        from = "From Emma",
                        modifier = Modifier.padding(8.dp)
                    )

                }
            }
        }
    }
}

setContent menampilkan UI Compose
Surface menjadi container utama layar
Modifier.fillMaxSize() membuat layout memenuhi layar
GreetingText() menampilkan teks ucapan

3. Composable Function

Fungsi ini membuat tampilan teks menggunakan layout Column.

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

    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {

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

        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(Alignment.End)
        )
    }
}

@Composable menandakan fungsi UI Compose
Column menyusun komponen secara vertikal
Text menampilkan tulisan
Arrangement.Center memposisikan teks di tengah layar

4. Preview UI

Preview memungkinkan UI dilihat langsung di Android Studio tanpa menjalankan aplikasi.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {

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

}

5. Cara Menjalankan Aplikasi

Buka Android Studio
Buat project baru dengan template Empty Activity (Compose)
Masukkan kode ke file MainActivity.kt
Jalankan emulator atau hubungkan perangkat Android
Klik tombol Run

Hasil Tampilan Aplikasi

Berikut contoh tampilan aplikasi ketika dijalankan.

Muhammad Risyad Himawan Putra

Friday, March 13, 2026

PPB Pertemuan 3 - Aplikasi Ucapan Selamat Ulang Tahun