Tugas 3 (Membangun Aplikasi Sederhana dengan Composable Text)

 Membangun Aplikasi Sederhana dengan Composable Text

Pada pertemuan kali ini, diberikan tugas untuk membuat sebuah aplikasi sederhana dengan composable text. Diberikan tutorial untuk membangun aplikasi sederhana dengan composable text berupa "Happy Birthday Sam!" 

Hasil Tutorial

Setelah berhasil mengikuti tutorial, saya memutuskan untuk melakukan modifikasi terhadap aplikasi sederhana dengan composable text. Berikut akan saya lampirkan hasil modifikasinya

Hasil Modifikasi

Modifikasi yang saya lakukan sebagai berikut :

• Saya menambahkan animasi fade-in dan bounce pada kalimat "Happy Birthday, Tama!" agar mempercantik visual.

• Saya menggunakan gradien warna untuk background agar lebih menarik.

• Teks "Form Zien" menggunakan background transparan.

Readable Code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AnimatedBirthdayGreeting(
                message = "Happy Birthday,",
                name = "Tama",
                from = "From Zien"
            )
        }
    }
}

• MainActivity adalah aktivitas utama aplikasi.

• Di dalam onCreate, setContent digunakan untuk menampilkan UI berbasis Jetpack Compose.

• Fungsi AnimatedBirthdayGreeting dipanggil untuk menampilkan ucapan ulang tahun

fun AnimatedBirthdayGreeting(message: String, name: String, from: String)

Merupakan fungsi Compose yang menerima 3 parameter string: message, name, dan from.

var startAnimation by remember { mutableStateOf(false)

Menyimpan state boolean untuk memulai animasi.

val fadeAlpha by animateFloatAsState(...)

• Mengontrol transparansi (alpha) dari teks.

• Alpha berubah dari 0f ke 1f selama 2 detik saat animasi dimulai.

• Gunakan LinearEasing untuk efek perubahan yang halus dan konstan.

val bounceAnim = rememberInfiniteTransition()
val bounceOffset by bounceAnim.animateFloat(...)

• Efek animasi bolak-balik (bounce) dari posisi teks secara vertikal.

• Bergerak dari 0 ke 20 dp terus-menerus (repeat mode reverse).

LaunchedEffect(Unit) {
    delay(500)
    startAnimation = true
}

Animasi baru mulai 0.5 detik setelah layar muncul.

Column(..)

Layout vertikal, semua elemen ditata ke tengah layar (Center).

.background(
    brush = Brush.verticalGradient(
        colors = listOf(Color(0xFFFFA500), Color(0xFFFF4500))
    )
)

Gradien vertikal dari oranye ke merah-oranye.

Text(
    text = "$message\n$name! 🎉",

    .....
    color = Color.White.copy(alpha = fadeAlpha),
    modifier = Modifier.offset(y = bounceOffset.dp) 
)

• Teks utama "Happy Birthday, Tama! 🎉"

• Warna putih dengan efek fade-in dan gerakan naik-turun (bounce)

Surface(
    shape = RoundedCornerShape(20.dp),
    color = Color.White.copy(alpha = 0.2f)
) {
    Text(
        text = from,
        fontSize = 24.sp,
        fontWeight = FontWeight.Medium,
        textAlign = TextAlign.Center,
        color = Color.White.copy(alpha = fadeAlpha),
        modifier = Modifier.padding(16.dp)
    )
}

• Di dalam Surface transparan dengan sudut membulat (rounded corners).

• Menampilkan pengirim ucapan ("From Zien").

Source Code  : 
Code Happy Birthday Zien

Berikut merupakan hasil pengerjaan saya dalam tugas pertemuan 3 kelas PPB D. Semoga dapat menjadi pembelajaran untuk saya maupun rekan - rekan sekalian.

Video Presentasi

Referensi

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#0

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

https://www.youtube.com/watch?v=6N-vdx-Nj8M