Studi Kasus - Membuat Image Scroll Menggunakan Desain Material
Pada pertemuan minggu ke-8 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, saya mengerjakan studi kasus membuat image scroll menggunakan desain material. Aplikasi yang dibuat bernama Affirmations. Aplikasi ini berisi gambar-gambar dengan caption affirmation menggunakan composable Image dan Teks.
Untuk membuat aplikasi Affirmations, langkah pertama yang dilakukan adalah mendownload proyek awal dari GitHub, kemudian mengekstraknya dari zip. Setelah itu, buka proyek tersebut di Android Studio. Langkah selanjutnya adalah membuat kelas data untuk daftar item. Pertama, membuat package baru di com.example.affirmation bernama model, lalu membuat file Kotlin Data Class bernama Affirmation.kt. Selanjutnya, modifikasi file Datasource.kt. Berikut adalah hasil kode dari kedua file tersebut:
| package com.example.affirmations.model | |
| import androidx.annotation.DrawableRes | |
| import androidx.annotation.StringRes | |
| data class Affirmation( | |
| @StringRes val stringResourceId: Int, | |
| @DrawableRes val imageResourceId: Int, | |
| ) |
| /* | |
| * 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)) | |
| } | |
| } |
Kode diatas mendefinisikan dua kelas data yang akan digunakan dalam aplikasi Affirmations. Pertama, kelas data Affirmation. Kelas ini memiliki dua properti, yaitu stringResourceId yang merepresentasikan resource ID dari teks yang akan ditampilkan, dan imageResourceId yang merepresentasikan resource ID dari gambar yang akan ditampilkan. Dengan menggunakan kelas data ini, kita dapat membuat objek Affirmation yang berisi pasangan teks dan gambar untuk ditampilkan dalam aplikasi Affirmations. Kedua, kelas Datasource. Kelas ini memiliki satu method loadAffirmations yang menghasilkan daftar objek Affirmation. Method ini mengembalikan daftar Affirmation yang diinisialisasi dan akan digunakan dalam aplikasi Affirmations. Kelas-kelas data diatas bertujuan untuk memisahkan logika data dari tampilan, sehingga memudahkan pengelolaan dan pemeliharaan aplikasi.
Langkah berikutnya adalah menuliskan kode terkait antarmuka halaman aplikasi dengan memodifikasi file MainActivity.kt seperti dibawah ini:
| /* | |
| * 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.background | |
| import androidx.compose.foundation.layout.Box | |
| 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.foundation.shape.RoundedCornerShape | |
| import androidx.compose.material3.Card | |
| import androidx.compose.material3.CardDefaults | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.Composable | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.graphics.Brush | |
| import androidx.compose.ui.graphics.Color | |
| 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.text.TextStyle | |
| import androidx.compose.ui.tooling.preview.Preview | |
| import androidx.compose.ui.unit.dp | |
| import androidx.compose.ui.unit.sp | |
| 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 AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) { | |
| LazyColumn(modifier = modifier) { | |
| items(affirmationList) { affirmation -> | |
| AffirmationCard( | |
| affirmation = affirmation, | |
| modifier = Modifier.padding(8.dp) | |
| ) | |
| } | |
| } | |
| } | |
| @Composable | |
| fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) { | |
| Card( | |
| modifier = modifier.fillMaxWidth(), | |
| shape = RoundedCornerShape(15.dp), | |
| elevation = CardDefaults.cardElevation(defaultElevation = 10.dp) | |
| ) { | |
| Box(modifier = Modifier.height(240.dp)) { | |
| Image( | |
| painter = painterResource(id = affirmation.imageResourceId), | |
| contentDescription = stringResource(id = affirmation.stringResourceId), | |
| modifier = Modifier.fillMaxSize(), | |
| contentScale = ContentScale.Crop | |
| ) | |
| Box(modifier = Modifier | |
| .fillMaxSize() | |
| .background( | |
| Brush.verticalGradient( | |
| colors = listOf( | |
| Color.Transparent, | |
| Color.Black | |
| ), | |
| startY = 300f | |
| ) | |
| ) | |
| ) | |
| Text( | |
| text = LocalContext.current.getString(affirmation.stringResourceId), | |
| style = TextStyle(color = Color.White, fontSize = 16.sp), | |
| modifier = Modifier | |
| .align(Alignment.BottomStart) | |
| .padding(16.dp) | |
| ) | |
| } | |
| } | |
| } | |
| @Preview | |
| @Composable | |
| private fun AffirmationCardPreview() { | |
| AffirmationCard(Affirmation(R.string.affirmation1, R.drawable.image1)) | |
| } |
AffirmationsApp merupakan komponen utama yang menampilkan daftar afirmasi. Ini memanfaatkan AffirmationList, yang menggunakan LazyColumn untuk menampilkan daftar afirmasi dengan memanfaatkan komponen AffirmationCard untuk setiap itemnya.
AffirmationCard adalah sebuah komponen yang bertugas menampilkan setiap kartu afirmasi dalam aplikasi. Komponen ini menggunakan Card dari Material3 library untuk mengatur tampilan kartu. Di dalam kartu, terdapat sebuah Image yang diambil dari resource menggunakan painterResource dengan ID gambar yang disediakan dalam objek Affirmation. Deskripsi gambar diisi dengan teks dari resource string untuk tujuan aksesibilitas. Efek gradien diterapkan pada bagian bawah gambar menggunakan background, memberikan kesan transparansi. Selanjutnya, Teks afirmasi ditampilkan di bagian bawah kartu, diambil dari resource string dan diberi warna putih serta ukuran font 16sp. Dengan menggunakan AffirmationCard, aplikasi dapat menampilkan setiap afirmasi dengan gambar dan teks secara konsisten dan menarik.
Terakhir, kita dapat menjalankan aplikasi. Berikut adalah tampilan AffirmationCard pada menu preview:
Dan berikut adalah tampilan aplikasi pada perangkat Android:
Komentar
Posting Komentar