Image Scroll Menggunakan Desain Material

 Alif Adrian Anzary - 5025201274

Pada kesempatan kali ini, kita akan membahas tentang pembuatan image scroll menggunakan desain material. Aplikasi yang telah dibuat diberi nama Affirmations, sebuah platform yang menawarkan beragam gambar dengan caption afirmatif. Dalam struktur aplikasi ini, pengguna dapat menikmati gambar-gambar tersebut yang disertai dengan pesan-pesan afirmatif melalui penggunaan komponen Compose seperti Image dan Text. Berikut adalah tampilan dan codenya:

File M

	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.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(id = affirmation.imageResourceId),
	contentDescription = stringResource(id = 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
	fun AffirmationCardPreview() {
	AffirmationCard(affirmation = Affirmation(R.string.affirmation1, R.drawable.image1))
	}

view rawMainActivity-8.kt hosted with ❤ by GitHub

File Affirmation.kt

	package com.example.affirmations.model
	import androidx.annotation.DrawableRes
	import androidx.annotation.StringRes
	data class Affirmation(
	@StringRes val stringResourceId: Int,
	@DrawableRes val imageResourceId: Int
	)

view rawAffirmation.kt hosted with ❤ by GitHub

File Datasource.kt

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