PPB - Pertemuan 08 - Tugas 01

Nama: Hammuda Arsyad

NRP: 5025211146

Kelas: PPB G

Sourcecode: https://github.com/H-mD/image-scroll-app

---

📜 Membuat Aplikasi Image Scroller (Affirmations App) Menggunakan Kotlin & Jetpack Compose

Dalam artikel ini, kita akan membahas sebuah aplikasi Android sederhana yang menampilkan daftar afirmasi motivasi dalam bentuk teks dan gambar menggunakan Jetpack Compose. Aplikasi ini cocok sebagai latihan awal memahami LazyColumn, Card, dan pengelolaan resource dalam Compose.

---

🎯 Apa yang Dilakukan Aplikasi Ini?

Aplikasi ini menampilkan:

• Daftar afirmasi dalam bentuk teks positif.

• Setiap afirmasi memiliki gambar pendukung.

• Penggunaan scrollable list untuk menampilkan semua item secara vertikal.

• Responsif terhadap status bar padding dan layout direction (RTL/LTR).

---

🏗️ Struktur Utama Proyek

Aplikasi dibangun dalam file MainActivity.kt dan memiliki struktur sebagai berikut:

1. Affirmation Model

Model data dasar aplikasi:

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

Disimpan dalam file model/Affirmation.kt.

2. Datasource – Sumber Data

fun loadAffirmations(): List<Affirmation>

Berisi daftar afirmasi dan gambar yang diambil dari file strings.xml dan drawable.

---

🖼️ Fungsi Utama dalam Jetpack Compose

1. AffirmationsApp()

Menyusun UI utama dan menangani padding dari status bar dan safe drawing area:

Surface(
    modifier = Modifier
        .fillMaxSize()
        .statusBarsPadding()
        .padding(...),
) {
    AffirmationList(affirmationList = Datasource().loadAffirmations())
}

2. AffirmationList()

Menampilkan daftar afirmasi dalam bentuk list yang dapat discroll menggunakan LazyColumn:

LazyColumn {
    items(affirmationList) { affirmation ->
        AffirmationCard(affirmation = affirmation)
    }
}

---

💳 AffirmationCard() – Kartu UI Setiap Item

Setiap afirmasi ditampilkan dalam bentuk Card yang berisi gambar dan teks:

Card {
    Column {
        Image(...)
        Text(...)
    }
}

• Image menampilkan gambar motivasi (dengan ContentScale.Crop).

• Text menampilkan afirmasi yang diambil dari stringResource.

---

📦 Resource yang Digunakan

• strings.xml: berisi teks afirmasi seperti "I am strong", "I believe in myself", dll.

• drawable/: berisi gambar motivasi seperti image1, image2, dst.

• Digunakan dengan:

painterResource(R.drawable.image1)
stringResource(R.string.affirmation1)

---

🖥️ Preview Composable

Untuk pengembangan cepat, ada fungsi preview Compose:

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

Preview ini sangat berguna untuk melihat tampilan kartu tanpa perlu menjalankan seluruh aplikasi.

---

✅ Kesimpulan

Aplikasi ini adalah contoh sederhana namun kuat dalam menampilkan daftar konten visual dengan Jetpack Compose. Cocok untuk:

• Belajar LazyColumn

• Menggunakan Card, Image, Text

• Menangani stringResource dan painterResource

• Membangun layout UI yang modern, bersih, dan responsif

---

📷Dokumentasi