Pengumpulan Tugas Pemrograman Perangkat Bergerak G - Pertemuan 11 tugas 8

Membuat Image Scroll dengan Desain Material di Android

Tujuan

Membuat daftar gambar yang dapat di-scroll dengan Jetpack Compose dan Material Design 3, menampilkan afirmasi teks dan gambar dalam bentuk kartu.

Komponen Utama

• LazyColumn - Untuk daftar scrollable
• Material Card - Container dengan elevasi dan sudut melengkung
• Image & Text - Menampilkan konten

Implementasi Kode

1. Model Data

// model/Affirmation.kt
data class Affirmation(
    @StringRes val stringResourceId: Int,
    @DrawableRes val imageResourceId: Int
)

2. Data Source

// data/Datasource.kt
class Datasource {
    fun loadAffirmations(): List<Affirmation> = listOf(
        Affirmation(R.string.affirmation1, R.drawable.image1),
        // ... 10 item
    )
}

3. Tampilan Utama

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

@Composable
fun AffirmationList() {
    LazyColumn {
        items(Datasource().loadAffirmations()) { affirmation ->
            AffirmationCard(affirmation)
        }
    }
}

Hasil Tampilan

Contoh tampilan daftar kartu afirmasi

Repository: https://github.com/RayyanFv/ppb-8-imagescroll