PPB G - Image Scroll

Nama : Muhammad Hafidh Rosyadi

NRP : 5025211013

Kelas  : PPB G

Kode : https://github.com/Hfdrsyd/Tugas-PPB/tree/main/img_scroll

---

📜 Membangun Aplikasi Affirmations dengan Jetpack Compose

Aplikasi Affirmations adalah proyek Android sederhana yang dirancang untuk menampilkan daftar afirmasi positif yang dikombinasikan dengan gambar visual yang memotivasi. Aplikasi ini dibangun menggunakan Kotlin dan Jetpack Compose, cocok bagi pemula yang ingin memahami dasar-dasar LazyColumn, Card, serta pengelolaan resources di Compose.

---

🎯 Tujuan Aplikasi

Aplikasi ini menampilkan:

• ✅ Daftar afirmasi dalam bentuk teks positif (seperti "Saya percaya diri", "Saya kuat", dll).

• 🖼️ Gambar pendukung untuk setiap afirmasi.

• 📜 Daftar yang dapat di-scroll secara vertikal menggunakan LazyColumn.

• 📱 Layout yang responsive terhadap padding status bar dan mendukung layout direction (LTR/RTL).

---

🏗️ Struktur Proyek

Proyek ini terdiri dari beberapa file utama:

1. Model: Affirmation.kt

Model ini mendefinisikan struktur data tiap afirmasi:

data class Affirmation(
    val stringResourceId: Int,
    val imageResourceId: Int
)

Disimpan di direktori model/Affirmation.kt.

---

2. Data Source: Datasource.kt

Berfungsi untuk menyediakan data afirmasi dan gambar:

class Datasource {
    fun loadAffirmations(): List<Affirmation> {
        return listOf(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            ...
        )
    }
}

Afirmasi dan gambar diambil dari:

• strings.xml: teks afirmasi

• drawable/: gambar motivasi

---

🖼️ Implementasi Jetpack Compose

1. AffirmationsApp()

Fungsi utama aplikasi:

@Composable
fun AffirmationsApp() {
    val affirmationList = Datasource().loadAffirmations()

    Surface(
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding()
            .padding(8.dp)
    ) {
        AffirmationList(affirmationList = affirmationList)
    }
}

Surface menyediakan latar belakang dasar dengan padding dari status bar.

---

2. AffirmationList()

Menampilkan daftar afirmasi dalam list yang bisa discroll:

@Composable
fun AffirmationList(affirmationList: List<Affirmation>) {
    LazyColumn {
        items(affirmationList) { affirmation ->
            AffirmationCard(affirmation = affirmation)
        }
    }
}

LazyColumn memungkinkan efisiensi memori saat menampilkan daftar panjang.

---

3. AffirmationCard()

Menampilkan setiap afirmasi dalam bentuk kartu:

@Composable
fun AffirmationCard(affirmation: Affirmation) {
    Card(
        elevation = CardDefaults.cardElevation(4.dp),
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    ) {
        Column {
            Image(
                painter = painterResource(id = affirmation.imageResourceId),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(194.dp)
            )
            Text(
                text = stringResource(id = affirmation.stringResourceId),
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.headlineSmall
            )
        }
    }
}

Penjelasan:

• Image: menampilkan gambar dengan skala crop.

• Text: menampilkan afirmasi dari strings.xml.

• Card: menyediakan container dengan bayangan dan border yang rapi.

---

📦 Resource Aplikasi

1. res/values/strings.xml

<resources>
    <string name="affirmation1">I am strong</string>
    <string name="affirmation2">I believe in myself</string>
    <!-- Tambahkan afirmasi lainnya -->
</resources>

2. res/drawable/

Tambahkan gambar seperti image1.jpg, image2.jpg, dst., ke dalam folder drawable.

---

🔍 Preview Composable

Gunakan preview untuk mempercepat pengembangan UI:

@Preview(showBackground = true)
@Composable
private fun AffirmationCardPreview() {
    AffirmationCard(
        affirmation = Affirmation(R.string.affirmation1, R.drawable.image1)
    )
}

Preview ini menampilkan contoh satu kartu tanpa harus menjalankan aplikasi secara penuh.

---

✅ Kesimpulan

Aplikasi Affirmations ini memberikan contoh praktis dan menyenangkan untuk memahami dasar Jetpack Compose, khususnya:

• ✅ Menampilkan list menggunakan LazyColumn.

• ✅ Membuat tampilan menarik dengan Card, Image, dan Text.

• ✅ Mengelola stringResource dan painterResource.

• ✅ Menggunakan Preview untuk pengembangan UI cepat.

---