Membuat Image Scroll Menggunakan Desain Material

 

PPB I - Tugas 8

Membuat Image Scroll Menggunakan Desain Material

    Nama :Michael Ariel Manihuruk

    NRP : 5025201158

    Kelas : PPB-I

    Link Github : Tugas 8

    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.

    Untuk memulai pembuatan aplikasi Affirmations, langkah pertama yang harus diambil adalah mendownload proyek awal dari GitHub, kemudian mengekstraknya dari file zip yang telah diunduh. Setelah itu, proyek tersebut dapat dibuka di Android Studio untuk memulai proses pengembangan. Langkah selanjutnya adalah membuat sebuah kelas data yang akan digunakan untuk daftar item dalam aplikasi. Hal ini dilakukan dengan membuat sebuah package baru di dalam direktori com.example.affirmation yang diberi nama model, di mana kemudian dibuat sebuah file Kotlin Data Class yang disebut Affirmation.kt. Setelah itu, file Datasource.kt juga dimodifikasi sesuai dengan kebutuhan proyek. Dengan langkah-langkah tersebut, aplikasi Affirmations siap untuk dikembangkan lebih lanjut, dengan kelas data yang telah disiapkan untuk menyimpan daftar item serta modifikasi pada file Datasource.kt untuk mengatur sumber data aplikasi.

	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 raw Affirmation.kt hosted with ❤ by GitHub

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

view raw Datasource.kt hosted with ❤ by GitHub

    Kode di atas mendefinisikan dua kelas data yang menjadi tulang punggung aplikasi Affirmations. Pertama adalah kelas data Affirmation yang memiliki dua properti utama: stringResourceId yang merepresentasikan ID sumber daya dari teks yang akan ditampilkan, dan imageResourceId yang merepresentasikan ID sumber daya dari gambar yang akan muncul. Melalui kelas data ini, kita dapat membuat objek Affirmation yang berisi pasangan teks dan gambar untuk dipresentasikan dalam aplikasi Affirmations. Kedua, ada kelas Datasource yang mengandung satu metode, loadAffirmations, yang bertugas menghasilkan daftar objek Affirmation. Metode ini berfungsi mengembalikan daftar Affirmation yang telah diinisialisasi dan siap digunakan dalam aplikasi.

   Langkah berikutnya adalah menuliskan kode terkait antarmuka halaman aplikasi dengan memodifikasi file MainActivity.kt seperti sebagai berikut.

	/*
	* 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.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 raw MainActivity.kt hosted with ❤ by GitHub

    AffirmationsApp adalah komponen inti dalam aplikasi yang bertugas menampilkan daftar afirmasi kepada pengguna. Komponen ini mengandalkan AffirmationList, sebuah fitur yang menggunakan LazyColumn untuk menampilkan daftar afirmasi secara efisien dengan menggunakan komponen AffirmationCard untuk setiap item yang ditampilkan. Dengan memanfaatkan struktur ini, pengguna dapat dengan mudah melihat dan membaca berbagai pesan afirmatif yang disediakan oleh aplikasi, sambil menjelajahi daftar dengan lancar menggunakan fitur LazyColumn yang dioptimalkan.

   AffirmationCard adalah komponen kunci dalam aplikasi yang bertanggung jawab untuk menampilkan setiap kartu afirmasi kepada pengguna. Komponen ini memanfaatkan Card dari Material3 library untuk mengatur tampilan kartu dengan baik. Di dalam setiap kartu, terdapat sebuah gambar yang diambil dari sumber daya menggunakan painterResource dengan ID gambar yang telah disediakan dalam objek Affirmation. Untuk tujuan aksesibilitas, deskripsi gambar diisi dengan teks dari resource string. Selain itu, efek gradien diterapkan pada bagian bawah gambar menggunakan background, menciptakan kesan transparansi yang menarik. Selanjutnya, teks afirmasi ditampilkan di bagian bawah kartu, diambil dari resource string, dan diberi warna putih serta ukuran font 16sp.

    Berikut adalah tampilan AffirmationCard pada menu preview:

   Berikut tampilan demo dari aplikasi: