Tugas 8 - Membuat Image Scroll dengan Desain Material

Tugas 8 - Membuat Aplikasi Image Scroll di Android dengan Jetpack Compose

Nama   : Abiyu Ramadhan Kiesly
NRP   : 5025221123
Kelas   : Pemrograman Perangkat Bergerak G

Link Github: Link Repositori Github

Langkah 1: Menyiapkan Model Data

Buat file Affirmation.kt di dalam app/src/main/java/com/example/affirmations/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
)

Langkah 2: Membuat Sumber Data (Datasource)

Buat file Datasource.kt di dalam app/src/main/java/com/example/affirmations/data/:

package com.example.affirmations.data

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

/**
 * [Datasource] generates a list of [Affirmation]
 */
class Datasource() {
    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            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))
    }
}

Langkah 3: Mendesain Item Kartu (AffirmationCard)

Dalam app/src/main/java/com/example/affirmations/MainActivity.kt

@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
            )
        }
    }
}

@Composable Function: Fungsi AffirmationCard yang dapat dikomposisi untuk membuat UI card yang menampilkan afirmasi

Parameter: Menerima objek Affirmation yang berisi data dan Modifier opsional untuk kustomisasi tampilan

Card: Komponen material design yang memberikan efek elevasi dan bentuk kartu sebagai container utama

Column: Layout vertikal yang mengatur child components secara berurutan dari atas ke bawah

Image: Menampilkan gambar dari resource dengan konfigurasi:

painterResource() untuk memuat gambar dari drawable
contentDescription untuk aksesibilitas
fillMaxWidth() dan height(194.dp) untuk dimensi
ContentScale.Crop untuk penyesuaian skala gambar

Text: Menampilkan teks afirmasi dengan:

LocalContext.current.getString() untuk mengambil string dari resource
padding(16.dp) untuk jarak dalam
MaterialTheme.typography.headlineSmall untuk styling teks

Langkah 4: Membuat Daftar Bergulir dengan LazyColumn

Tambahkan fungsi Composable AffirmationsList di MainActivity.kt:

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

@Composable Function: Fungsi AffirmationList yang membuat daftar scrollable dari kartu-kartu afirmasi

Parameter:

affirmationList bertipe List<Affirmation> berisi data koleksi afirmasi
modifier opsional untuk kustomisasi tampilan

LazyColumn: Komponen untuk membuat daftar vertikal yang dapat di-scroll dengan performa optimal:

Hanya me-render item yang terlihat di layar (lazy loading)
Cocok untuk daftar dengan banyak item
Menggunakan modifier yang diteruskan dari parameter

items(): Fungsi DSL untuk LazyColumn yang:

Mengiterasi setiap item dalam affirmationList
Memberikan akses ke objek affirmation individual melalui lambda

AffirmationCard: Pemanggilan komponen card yang sudah dibuat sebelumnya:

Menerima data affirmation untuk ditampilkan
Diberi padding(8.dp) untuk jarak antar kartu

Langkah 5: Menggabungkan Semuanya ke MainActivity.kt

Berikut isi dari 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.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.asPaddingValues
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
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.platform.LocalLayoutDirection
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 {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    AffirmationsApp()
                }
            }
        }
    }
}

@Composable
fun AffirmationsApp() {
    val layoutDirection = LocalLayoutDirection.current
    Surface(
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding()
            .padding(
                start = WindowInsets.safeDrawing.asPaddingValues()
                    .calculateStartPadding(layoutDirection),
                end = WindowInsets.safeDrawing.asPaddingValues()
                    .calculateEndPadding(layoutDirection),
            ),
    ) {
        AffirmationList(
            affirmationList = Datasource().loadAffirmations(),
        )
    }
}

@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
            )
        }
    }
}

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

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

Cari Blog Ini

PPB G - Abiyu Ramadhan Kiesly