Tugas 3 - Membuat Card Happy Birthday

Moch. Avin (5025221061)

Pemrograman Perangkat Bergerak - PPB G

Link Repo Github: https://github.com/mochavin/PPB-greeting-card

1. Struktur MainActivity

Komponen utama yang digunakan adalah Box, yang berfungsi untuk mengatur tata letak dengan menyusun elemen di tengah layar. Kemudian terdapat surface dengan modifier padding sehingga text tidak langsung menyentuh sisi kiri dan kanan layar.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Box (
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center,
                ){
                    // A surface container using the 'background' color from the theme
                    Surface(
                        modifier = Modifier.padding(16.dp),
                        color = MaterialTheme.colorScheme.background,
                    ) {
                        GreetingText(message = "Happy Birthday Sam!", from = "From Avin")
                    }
                }
            }
        }
    }
}

2. Fungsi GreetingText

Fungsi GreetingText digunakan untuk menampilkan teks ucapan selamat ulang tahun dengan pengaturan ukuran font dan tata letak.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            textAlign = TextAlign.End,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

• Text pertama menampilkan pesan ulang tahun dengan ukuran font besar (100.sp).
• Text kedua menampilkan nama pengirim dengan ukuran font 36.sp, rata kanan (TextAlign.End).
• Column digunakan untuk menyusun teks secara vertikal.

3. Fungsi Preview

Fungsi BirthDayCardPreview memungkinkan kita melihat tampilan UI di Android Studio tanpa perlu menjalankan aplikasi.

@Preview(showBackground = true)
@Composable
fun BirthDayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!", from = "From Avin")
    }
}

Hasil Akhir

Hasil dari kode ini adalah kartu ulang tahun dengan teks besar di tengah layar dan nama pengirim di bagian bawah sebelah kanan. Tampilan akan menyesuaikan ukuran layar perangkat Android.