Tugas 8 - Image Scroll

 

Membuat Image Scroll App

Nama: Made Daryl Adi Nugraha

NRP: 5025221008

Link Github: https://github.com/Lyradd/Tugas-8-PPB-G

Gambar Aplikasi:

Langkah-langkah awal:

• Download ZIP dari github berikut: Codelab
  
• Open Project Github tersebut menggunakan android studio

MainActivity.kt

/*
 * 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

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.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyItemScope
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.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() {
    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(R.string.affirmation1, R.drawable.image1))
}

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

Affirmation.kt:

package com.example.affirmations.model

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

Datasource.kt:

/*
 * 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))
    }
}

Berikut penjelasan sederhana mengenai kode di atas dalam bahasa Indonesia:

---

📱 Aplikasi Image Scroll

Aplikasi ini menampilkan daftar image scroll menggunakan Jetpack Compose, yang merupakan toolkit modern untuk membangun UI di Android.

---

🔧 Struktur Kode

1. MainActivity.kt

File utama yang dijalankan saat aplikasi dibuka.

• onCreate: Fungsi pertama yang dipanggil saat aplikasi berjalan. Di sini kita menampilkan UI dari fungsi AffirmationsApp().

• AffirmationsApp(): Fungsi composable utama yang menampilkan daftar afirmasi menggunakan AffirmationList().

---

2. AffirmationList()

Menampilkan list (daftar) afirmasi dalam bentuk LazyColumn, yaitu daftar yang bisa di-scroll ke bawah.

LazyColumn {
    items(affirmationList) {
        AffirmationCard(...)
    }
}

Setiap item akan ditampilkan dengan AffirmationCard.

---

3. AffirmationCard()

Menampilkan satu kartu afirmasi, terdiri dari:

• Gambar (Image)

• Teks afirmasi (Text)

Kartu menggunakan Card dari Material Design dan tampil rapi dengan padding dan styling.

---

4. Datasource.kt

Berisi data afirmasi. Di sini ada fungsi loadAffirmations() yang mengembalikan list dari 10 afirmasi yang isinya:

• ID string (teks afirmasi dari strings.xml)

• ID gambar (dari drawable)

Affirmation(R.string.affirmation1, R.drawable.image1)

---

5. Affirmation.kt

Sebuah data class yang menyimpan satu item afirmasi, yaitu:

• stringResourceId: ID teks afirmasi

• imageResourceId: ID gambar afirmasi

---

🧪 Preview

Bagian @Preview digunakan untuk melihat tampilan composable AffirmationCard() langsung di Android Studio tanpa menjalankan aplikasi.

---

📦 Dependensi Tambahan

• Jetpack Compose: Digunakan untuk membuat UI

• Material3: Untuk styling UI seperti Card, Text, dan Surface