Tugas 8 PPB G - Membuat Aplikasi Image Scroll Menggunakan Jetpack Compose

 Tugas Pertemuan 8 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-8 ini, kami diminta membuat aplikasi android sederhana yang menerapkan image scroll. Aplikasi ini berisi kata-kata afirmasi bernama Affirmations. Aplikasi Affirmations adalah aplikasi Android sederhana yang menampilkan daftar afirmasi positif dengan gambar yang menyertainya. Aplikasi ini dikembangkan menggunakan Jetpack Compose dan memanfaatkan arsitektur dasar yang modular: model, data, dan ui.

Source code dapat dilihat disini

Berikut penjelasan kodenya

1. Affirmation.kt (model)

package com.example.affirmations.model

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

Model data sederhana yang merepresentasikan sebuah afirmasi:

• stringResourceId: ID resource string untuk teks afirmasi.

• imageResourceId: ID resource gambar untuk ilustrasi afirmasi.

2. Datasource.kt (Data)

/*
 * Copyright (C) 2023 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
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))
    }
}

Menyediakan data statis berupa list dari objek Affirmation. Data diambil dari resource (R.string.* dan R.drawable.*).

3. MainActivity.kt

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() {
    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
            )
        }
    }
}

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

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

Fungsi dan komponen utama:

• MainActivity
  Entry point aplikasi. Memanggil fungsi AffirmationsApp() dalam tema aplikasi.

• AffirmationsApp()
  Fungsi composable utama. Memuat data dari Datasource dan meneruskannya ke AffirmationList.

• AffirmationList()
  Menampilkan daftar afirmasi dalam bentuk LazyColumn.

• AffirmationCard()
  Menampilkan satu buah afirmasi dalam bentuk kartu (Card) berisi gambar dan teks.

• AffirmationCardPreview()
  Fungsi preview Compose untuk melihat desain AffirmationCard di editor Android Studio.

Berikut hasil dari aplikasinya

~ Terima Kasih ~