Tugas 3 PPB A

 

 Nama : Muhamad Faiz Fernanda

 NRP   : 5025211186

                                            Aplikasi untuk Menampilkan Happy BirthDay

Pada pertemuan ketiga, kita membuat sebuah aplikasi sederhana yang menampilkan teks 'Happy Birthday' menggunakan fungsi composable. Berikut adalah kode programnya :

 package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
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.graphics.Color
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
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 androidx.compose.ui.geometry.Offset
import com.example.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    BirthdayCardWithImage(
                        message = "Happy Birthday Faiz",
                        from = "From Faiz Fernanda"
                    )
                }
            }
        }
    }
}

@Composable

fun BirthdayCardWithImage(message: String, from: String) {
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.pngtree_birthday_background_with_colorful_flags_and_balloons_image_557786),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize()
        )

        Column(
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = 200.dp) // posisi diturunkan
        ) {
            Text(
                text = message,
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 48.sp,
                    textAlign = TextAlign.Center,
                    shadow = Shadow(
                        color = Color.LightGray,
                        offset = Offset(1f, 1f),
                        blurRadius = 2f
                    )
                ),
                modifier = Modifier.fillMaxWidth()
            )

            Spacer(modifier = Modifier.height(16.dp))

            Text(
                text = from,
                style = TextStyle(
                    color = Color.Black,
                    fontSize = 24.sp,
                    textAlign = TextAlign.End
                ),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(end = 16.dp)
            )
        }
    }
}


@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        BirthdayCardWithImage(
            message = "Happy Birthday Faiz",
            from = "From Faiz Fernanda"
        )
    }
}

 Struktur Proyek:

Proyek ini terdiri dari beberapa bagian, yaitu:

• MainActivity.kt: File utama yang menangani logika tampilan aplikasi.

• ui.theme: Folder yang berisi pengaturan tema aplikasi.

Proyek ini berfokus pada tampilan visual menggunakan Jetpack Compose, yaitu toolkit UI deklaratif modern dari Google untuk pengembangan antarmuka Android.

---

Penjelasan MainActivity.kt:

• MainActivity berperan sebagai aktivitas utama tempat aplikasi dijalankan.

• Fungsi onCreate dipanggil saat aplikasi dibuka untuk pertama kalinya.

• setContent digunakan untuk mendefinisikan antarmuka menggunakan Jetpack Compose.

• HappyBirthdayTheme mengatur tema visual aplikasi.

• Surface digunakan sebagai wadah UI yang mengambil warna latar belakang dari tema.

• GreetingText adalah fungsi composable yang menampilkan ucapan ulang tahun di layar.

---

Fungsi GreetingText (Sebelum Modifikasi):

• Didekorasi dengan @Composable, yang berarti fungsi ini membentuk bagian dari UI deklaratif.

• Menggunakan Column sebagai layout vertikal untuk menyusun elemen secara bertumpuk.

• Teks pertama menampilkan ucapan "Happy Birthday Faiz" dengan ukuran font besar (100.sp).

• Teks kedua menampilkan "From Faiz Fernanda" dengan ukuran font lebih kecil (36.sp), ditempatkan di pojok kanan bawah menggunakan Alignment.End.

---

Fungsi BirthdayCardPreview:

• Dihiasi dengan anotasi @Preview(showBackground = true), yang memungkinkan UI ditampilkan secara statis di Android Studio.

• Fungsi ini memanggil GreetingText untuk menampilkan pratinjau desain tanpa menjalankan aplikasi.

---

Penambahan dan Perubahan :

Beberapa perubahan telah dilakukan untuk meningkatkan estetika dan keterbacaan aplikasi, yaitu:

1. Penambahan Gambar Latar:

   • Gambar bertema ulang tahun ditambahkan sebagai latar belakang menggunakan Image dengan ContentScale.Crop, agar gambar memenuhi seluruh layar.

   • Gambar ini ditempatkan di res/drawable dan diakses menggunakan painterResource.

2. Penggunaan Layout Box:

   • Layout Column diganti menjadi Box agar memungkinkan penumpukan elemen (gambar dan teks), yang tidak bisa dilakukan dengan Column saja.

3. Perubahan Warna dan Posisi Teks:

   • Warna teks diubah dari putih menjadi hitam agar lebih kontras dan terbaca di atas gambar latar.

   • Posisi teks diturunkan ke bagian bawah layar menggunakan Arrangement.Bottom dan padding tambahan (bottom = 64.dp), sehingga tidak tertutup elemen visual di bagian atas gambar.

4. Penambahan Shadow (Bayangan) pada Teks:

   • Efek bayangan (Shadow) ditambahkan untuk memperjelas teks dan menjaga keterbacaan meskipun latar belakangnya ramai atau terang.

---

Ringkasan:

• Aplikasi ini berfungsi sebagai kartu ucapan ulang tahun sederhana.

• Menggunakan Jetpack Compose untuk membangun tampilan statis tanpa interaksi.

• Tema aplikasi diatur melalui HappyBirthdayTheme untuk konsistensi warna dan gaya.

• Perubahan yang dilakukan memperkaya tampilan visual dengan gambar latar, serta memperjelas elemen teks baik secara warna, posisi, maupun estetika.