Membuat Image Scroll dengan menggunakan Desain Material - Tugas 6

Nama : Muhammad Naufal Fawwaz Ramadhan

NRP : 5025211223

Kelas : PPB F

Tugas 6

Pada pertemuan ini, tugasnya adalah membuat aplikasi pengguliran gambar dengan menggunakan desain material.

 1. Persiapan Awal

• Buka Android Studio dan memilih proyek baru.

 

] 2. Membuat Model Affirmation

•  Membuat model `Affirmation` yang akan digunakan untuk menyimpan data afirmasi dalam bentuk teks dan gambar.

 

 3. Menyiapkan MainActivity.kt

•  Di dalam `MainActivity.kt`, kita akan menulis fungsi `AffirmationCard` yang akan menampilkan kartu afirmasi menggunakan Compose.

 

kotlin

package com.example.affirmations

 

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import androidx.compose.foundation.Image

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.fillMaxHeight

import androidx.compose.foundation.layout.padding

import androidx.compose.material.MaterialTheme

import androidx.compose.material.Surface

import androidx.compose.material.Text

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.layout.ContentScale

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.model.Affirmation

 

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            AffirmationCard()

        }

    }

}

 

@Composable

fun AffirmationCard() {

    val affirmation = Affirmation(

        stringResourceId = R.string.affirmation_text,

        imageResourceId = R.drawable.affirmation_image

    )

 

    Surface(color = MaterialTheme.colors.background) {

        Column(

            modifier = Modifier.fillMaxHeight(),

            horizontalAlignment = Alignment.CenterHorizontally

        ) {

            Image(

                painter = painterResource(id = affirmation.imageResourceId),

                contentDescription = null,

                modifier = Modifier.fillMaxHeight(),

                contentScale = ContentScale.FillHeight

            )

 

            Text(

                text = stringResource(id = affirmation.stringResourceId),

                color = Color.Black,

                style = MaterialTheme.typography.h4,

                modifier = Modifier.padding(16.dp)

            )

        }

    }

}

 

@Preview(showBackground = true)

@Composable

fun DefaultPreview() {

    AffirmationCard()

}

```

 

 4. Menggunakan DataSource untuk Data Afirmasi

•  Menyiapkan `DataSource.kt` untuk menyediakan data afirmasi dan gambar dari sumber daya aplikasi.

 

kotlin

package com.example.affirmations

 

import com.example.affirmations.model.Affirmation

 

class DataSource {

 

    companion object {

        fun loadAffirmations(): List<Affirmation> {

            return listOf(

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

                Affirmation(R.string.affirmation_text2, R.drawable.image2),

                Affirmation(R.string.affirmation_text3, R.drawable.image3),

                // tambahkan lebih banyak afirmasi sesuai kebutuhan

            )

        }

    }

}

5. Pic