Tugas 8 - Pemrograman Perangkat Bergerak G - Membuat Aplikasi Image Scroll

---

Membuat Aplikasi Image Scroll dengan Jetpack Compose

Oleh: Rakha Fathin Izzan Consetta (5025221156)

Pada tugas kali ini, saya membuat sebuah aplikasi Android sederhana dengan fitur image scroll, di mana setiap gambar disertai dengan teks afirmasi. Proyek ini dibuat menggunakan Jetpack Compose, toolkit modern dari Android untuk membangun UI secara deklaratif.

Tujuan

Tujuan dari aplikasi ini adalah untuk menampilkan daftar afirmasi dalam bentuk kartu yang berisi gambar dan teks, yang bisa discroll secara vertikal.

---

Struktur Project

Aplikasi ini terdiri dari tiga bagian utama:

1. Model — Menyimpan data afirmasi.

2. Data Source — Menyediakan daftar data afirmasi.

3. UI (User Interface) — Menampilkan daftar kartu afirmasi menggunakan LazyColumn.

---

1. File Affirmation.kt (Model)

package com.example.affirmations.model

import androidx.annotation.DrawableRes
import androidx.annotation.StringRes

data class Affirmation(
    @StringRes val stringResourceId: Int,
    @DrawableRes val imageResourceId: Int
)

Model Affirmation menyimpan ID string dan ID gambar dari sumber daya (resources) Android.

---

2. File Datasource.kt

package com.example.affirmations.data

import com.example.affirmations.R
import com.example.affirmations.model.Affirmation

class Datasource {
    fun loadAffirmations(): List<Affirmation> {
        return listOf(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10)
        )
    }
}

File ini menyediakan data afirmasi dalam bentuk list.

---

3. File MainActivity.kt

package com.example.affirmations

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.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.affirmations.data.Datasource
import com.example.affirmations.model.Affirmation
import com.example.affirmations.ui.theme.AffirmationsTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AffirmationsTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    AffirmationsApp()
                }
            }
        }
    }
}

---

4. Fungsi UI Compose

AffirmationsApp

@Composable
fun AffirmationsApp() {
    AffirmationList(
        affirmationList = Datasource().loadAffirmations(),
    )
}

AffirmationCard

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

AffirmationList

@Composable
fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
    LazyColumn(modifier = modifier) {
        items(affirmationList) { affirmation ->
            AffirmationCard(
                affirmation = affirmation,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

---

Hasil Akhir

Aplikasi akan menampilkan daftar kartu afirmasi secara scrollable secara vertikal. Setiap kartu terdiri dari:

Tampilan ini memungkinkan pengguna untuk merasa lebih positif dan termotivasi setiap kali membuka aplikasi.

---

Kesimpulan

Dengan memanfaatkan Jetpack Compose, kita dapat membuat UI Android yang modern dan efisien. Penerapan komponen seperti LazyColumn, Card, dan Image sangat membantu dalam membangun pengalaman pengguna yang interaktif dan menarik.