Tugas 3 - Membuat Aplikasi Happy Birthday dengan Jetpack Compose

Membuat Aplikasi “Happy Birthday” dengan Jetpack Compose

Pada tutorial ini, kita akan membuat aplikasi sederhana menggunakan Jetpack Compose yang menampilkan pesan “Happy Birthday”. Kita akan fokus pada Composable dan bagaimana mengimplementasikannya di MainActivity.

1. Persiapan Proyek Baru

1. Buka Android Studio.
2. Pilih menu File > New > New Project.
   
   
   
3. Pada jendela New Project, pilih template Empty Activity (yang sudah mendukung Jetpack Compose).
   
   
   
4. Isi Nama proyek (misal: Happy Birthday), Package name, Minimum SDK, dan pilih Finish.
   
   
   

2. Struktur Proyek

Setelah proyek berhasil dibuat, Anda akan melihat struktur proyek sebagai berikut:

• app/java/com.example.happybirthday/MainActivity.kt
• app/java/com.example.happybirthday/ui/theme/ (berisi file tema Compose)
• app/res/ (berisi resource seperti drawable, layout, dll.)
• build.gradle dan settings.gradle

3. Penjelasan Composable dan Implementasinya

3.1 Composable Function: BirthdayCard

@Composable
fun BirthdayCard(to: String, from: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        Text(
            text = "Happy Birthday $to!",
            fontSize = 100.sp,
            lineHeight = 116.sp
        )
        Text(
            text = "From $from",
            fontSize = 40.sp,
            lineHeight = 48.sp
        )
    }
}

Fungsi BirthdayCard ditandai dengan anotasi @Composable. Anotasi ini menandakan bahwa fungsi tersebut bertugas membangun tampilan (UI) secara deklaratif.

Di dalam BirthdayCard, kita menggunakan Column untuk menumpuk dua Text secara vertikal. Komponen Text pertama menampilkan pesan “Happy Birthday” dengan ukuran font 100sp, sedangkan Text kedua menampilkan “From” dengan ukuran font 40sp.

3.2 Preview Function: BirthdayCardPreview

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayCard(
            to = "Budi",
            from = "Andi"
        )
    }
}

Fungsi BirthdayCardPreview juga diberi anotasi @Composable dan @Preview. Anotasi @Preview memungkinkan Anda untuk melihat tampilan UI langsung di Android Studio tanpa harus menjalankan aplikasi di emulator atau perangkat fisik.

3.3 Implementasi di MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    BirthdayCard(
                        to = "Budi",
                        from = "Andi",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

Pada kelas MainActivity yang mewarisi ComponentActivity, kita menyiapkan UI di dalam metode onCreate. Beberapa poin penting:

• enableEdgeToEdge() mengaktifkan tampilan aplikasi edge-to-edge.
• setContent { ... } digunakan untuk menggantikan layout XML tradisional dengan composable Jetpack Compose.
• HappyBirthdayTheme merupakan tema kustom yang disediakan oleh template proyek. Anda bisa mengatur warna, tipografi, dan bentuk di sini.
• Scaffold memberikan struktur dasar Material Design (seperti top app bar, bottom bar, dsb.). Kita menerapkan Modifier.fillMaxSize() agar scaffold memenuhi layar.
• Di dalam Scaffold, kita memanggil BirthdayCard dengan parameter to dan from yang akan ditampilkan di UI.

4. Menjalankan Aplikasi

1. Klik Run (ikon segitiga hijau) di toolbar Android Studio atau tekan Shift + F10 (Windows) untuk menjalankan aplikasi.
2. Pilih emulator atau perangkat fisik yang terhubung.
3. Setelah proses build selesai, aplikasi akan terbuka dan menampilkan pesan “Happy Birthday Budi!” di layar.
   
   
   

Kesimpulan

Dengan Jetpack Compose, Anda dapat membangun tampilan aplikasi secara deklaratif dan lebih efisien. Fungsi @Composable memudahkan Anda untuk memecah UI menjadi bagian-bagian kecil yang mudah dikelola, seperti contoh BirthdayCard di atas. Semoga tutorial ini membantu Anda memahami dasar penggunaan Jetpack Compose untuk menampilkan teks sederhana.