Tugas 3 PPB A 2025 - Aplikasi Happy Birthday Composable

Nama     : Rayhan Arvianta Bayuputra

NRP        : 5025211217

Kelas      : PPB A

TA            : 2024 (Genap)

Aplikasi Happy Birthday dengan Text Composables

Pada pertemuan kali ini, kami merancang sebuah aplikasi sederhana berjudul Happy Birthday. Berikut cuplikannya!

Berikut adalah kode dari aplikasi Happy Birthday

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

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

@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 = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Rayhan!!", from = "From Mumu")
    }
}

Main Activity Class

Kelas MainActivity adalah komponen utama dari aplikasi ini. Kelas ini merupakan turunan dari ComponentActivity, yang berarti ia mengontrol siklus hidup layar utama.

Di dalam metode onCreate(), fungsi setContent {} digunakan untuk mendeklarasikan tampilan aplikasi menggunakan Jetpack Compose. Di dalamnya, HappyBirthdayTheme {} digunakan untuk menerapkan tema khusus yang telah dibuat dalam proyek ini.

Elemen utama UI ditempatkan di dalam Surface, yang berfungsi sebagai container dengan warna latar belakang yang diambil dari tema aplikasi (MaterialTheme.colorScheme.background). Selanjutnya, fungsi GreetingText() dipanggil untuk menampilkan teks "Happy Birthday Rayhan!!" dan informasi pengirim pesan.

GreetingText Composable Function

Fungsi GreetingText() adalah Composable function, yang berarti fungsi ini dapat digunakan dalam UI Jetpack Compose untuk menampilkan elemen tampilan.

Fungsi ini menggunakan Column sebagai wadah utama yang menyusun elemen secara vertikal. Teks utama ditampilkan menggunakan komponen Text(), di mana ukuran font diatur menjadi 100.sp agar terlihat besar dan mencolok. Selain itu, properti textAlign = TextAlign.Center memastikan bahwa teks berada di tengah layar.

Di bagian bawah, terdapat teks kecil yang menunjukkan siapa yang mengirim ucapan ulang tahun. Teks ini memiliki ukuran font 36.sp dan ditempatkan di sisi kanan bawah menggunakan align(Alignment.End) agar tampil lebih rapi.

BirthdayCardPreview Function

Fungsi BirthdayCardPreview() berfungsi untuk menampilkan preview UI langsung di Android Studio tanpa perlu menjalankan aplikasi. Fungsi ini ditandai dengan @Preview, yang berarti dapat digunakan dalam mode tampilan cepat di Android Studio.

Dengan showBackground = true, tampilan UI akan diberikan latar belakang agar lebih jelas terlihat di preview mode. Di dalam fungsi ini, GreetingText() dipanggil untuk menampilkan ucapan ulang tahun yang sama seperti di dalam MainActivity.

Github Repository: https://github.com/arvianta/PPB_Week3_Composable