Membuat Aplikasi Scrollable Image List dengan Jetpack Compose

 

Tutorial Membuat Aplikasi Scrollable Image Card List dengan Jetpack Compose

Dalam dunia pengembangan aplikasi Android yang terus berkembang, Jetpack Compose telah menjadi teknologi UI terkini yang sangat diminati. Dalam tutorial ini, saya akan membahas cara membuat aplikasi sederhana yang menampilkan daftar kartu gambar yang dapat di-scroll dengan menggunakan Material Design dan Jetpack Compose.

Apa yang Akan Kita Buat?

Kita akan membuat aplikasi Android dengan tampilan daftar kartu yang berisi gambar, judul, dan deskripsi singkat. Aplikasi ini menggunakan komponen berikut:

  • LazyColumn: Untuk membuat daftar yang dapat di-scroll secara efisien
  • Card Material Design 3: Untuk tampilan menarik dengan elevasi bayangan
  • Gambar dan Teks: Untuk menampilkan konten dalam kartu

Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki:

  1. Android Studio versi terbaru (Arctic Fox atau yang lebih baru)
  2. Dasar pengetahuan tentang Kotlin dan Jetpack Compose


Langkah 1: Membuat Proyek Baru

  1. Buka Android Studio dan pilih "New Project"
  2. Pilih template "Empty Compose Activity"
  3. Beri nama proyek "ScrollableCardList"
  4. Pilih minimum SDK (disarankan API level 24+)
  5. Klik "Finish"

Langkah 2: Pengaturan Gradle

Pertama, kita perlu memastikan dependensi Compose dan konfigurasinya sudah benar. Berikut pengaturan di file build.gradle (project-level):

// File: build.gradle
buildscript {
    ext {
        compose_compiler_version = '1.5.8'
    }
}

plugins {
    id 'com.android.application' version '8.0.0' apply false
    id 'com.android.library' version '8.0.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.9.22' apply false
}

Kemudian di file build.gradle modul app:

plugins {
    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    namespace 'com.example.scrollablecardlist'
    compileSdk 34

    defaultConfig {
        applicationId "com.example.scrollablecardlist"
        minSdk 24
        targetSdk 34
        versionCode 1
        versionName "1.0"
        
        // konfigurasi lainnya...
    }
    
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion rootProject.ext.compose_compiler_version
    }
    
    // konfigurasi lainnya...
}

dependencies {
    implementation 'androidx.core:core-ktx:1.12.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
    implementation 'androidx.activity:activity-compose:1.8.2'
    implementation platform('androidx.compose:compose-bom:2023.10.01')
    implementation 'androidx.compose.ui:ui'
    implementation 'androidx.compose.ui:ui-graphics'
    implementation 'androidx.compose.ui:ui-tooling-preview'
    implementation 'androidx.compose.material3:material3'
    
    // dependensi lainnya...
}

Langkah 3: Membuat Model Data

Sekarang kita akan membuat model data untuk menyimpan informasi kartu. Tambahkan kode berikut di file MainActivity.kt:

// Model data untuk kartu
data class CardItem(
    val id: Int,
    val imageResId: Int,
    val title: String,
    val description: String
)

// Data contoh untuk daftar kartu
val sampleCardItems = listOf(
    CardItem(
        id = 1,
        imageResId = R.drawable.image1,
        title = "Pegunungan Indah",
        description = "Pemandangan pegunungan dengan puncak bersalju dan lembah hijau."
    ),
    CardItem(
        id = 2,
        imageResId = R.drawable.image2,
        title = "Matahari Terbenam di Lautan",
        description = "Matahari terbenam keemasan di atas air laut yang tenang."
    ),
    // Tambahkan item kartu lainnya sesuai kebutuhan...
)

Langkah 4: Membuat Komponen Kartu

Sekarang kita akan membuat komponen untuk menampilkan kartu tunggal:

@Composable
fun ImageCard(cardItem: CardItem) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(280.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column {
            // Gambar mengambil 70% dari kartu
            Image(
                painter = painterResource(id = cardItem.imageResId),
                contentDescription = cardItem.title,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp),
                contentScale = ContentScale.Crop
            )
            
            // Konten teks mengambil sisa ruang kartu
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Text(
                    text = cardItem.title,
                    style = MaterialTheme.typography.titleMedium,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
                Spacer(modifier = Modifier.height(4.dp))
                Text(
                    text = cardItem.description,
                    style = MaterialTheme.typography.bodyMedium,
                    maxLines = 2,
                    overflow = TextOverflow.Ellipsis
                )
            }
        }
    }
}

Langkah 5: Membuat Daftar Kartu yang Dapat di-Scroll

Selanjutnya, kita akan membuat komponen untuk menampilkan daftar kartu yang dapat di-scroll:

@Composable
fun ImageCardList(cardItems: List<CardItem>) {
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(cardItems) { item ->
            ImageCard(cardItem = item)
        }
    }
}

Langkah 6: Mengatur MainActivity

Terakhir, kita akan mengubah fungsi onCreate di MainActivity untuk menampilkan daftar kartu kita:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScrollableCardListTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ImageCardList(cardItems = sampleCardItems)
                }
            }
        }
    }
}

Langkah 7: Menambahkan Gambar ke Proyek

Sebelum menjalankan aplikasi, kita perlu menambahkan gambar yang akan ditampilkan:

  1. Buat folder drawable di dalam direktori res jika belum ada
  2. Tambahkan gambar dengan nama image1.jpg, image2.jpg, dan seterusnya (sesuai dengan jumlah item yang dibuat)

Menjalankan Aplikasi

Sekarang kita bisa menjalankan aplikasi dengan klik tombol "Run" di Android Studio. Hasilnya akan menampilkan daftar kartu dengan gambar, judul, dan deskripsi yang dapat di-scroll.


Penjelasan Kode

Mari kita bahas beberapa komponen kunci dalam aplikasi ini:

1. LazyColumn

LazyColumn adalah komponen Compose yang hanya me-render item yang terlihat pada layar, sehingga lebih efisien dibandingkan Column biasa saat menangani daftar panjang. Ini adalah pengganti RecyclerView dalam Compose.

2. Card

Komponen Card dari Material Design 3 memberikan tampilan kartu dengan elevasi dan sudut yang dibulatkan. Ini membantu memperjelas batas antar item dalam daftar.

3. Modifier

Modifier digunakan untuk mengonfigurasi tampilan dan perilaku komponen. Misalnya fillMaxWidth() membuat komponen mengambil seluruh lebar yang tersedia, dan padding() memberikan jarak antar komponen.

4. ContentScale.Crop

ContentScale.Crop memastikan gambar dipotong dengan proporsional untuk mengisi area yang ditentukan, mirip dengan centerCrop pada ImageView tradisional.

Pengembangan Lebih Lanjut

Aplikasi ini masih sangat dasar. Berikut beberapa ide untuk pengembangan lebih lanjut:

  1. Menambahkan interaksi: Membuat kartu dapat diklik dan menampilkan detail
  2. Animasi: Menambahkan animasi saat men-scroll atau mengklik kartu
  3. Data dinamis: Mengambil data dari API atau database
  4. Fitur pencarian: Menambahkan kemampuan untuk mencari kartu berdasarkan judul

Kesimpulan

Pendekatan deklaratif dari Compose membuat kode lebih ringkas dan mudah dipahami dibandingkan XML layout tradisional. Jetpack Compose menawarkan cara yang lebih modern dan efisien untuk membangun UI Android. Dengan menguasai komponennya seperti yang kita lakukan dalam tutorial ini, Anda akan dapat menciptakan antarmuka pengguna yang menarik dan responsif dengan lebih sedikit kode dan usaha.




Komentar

Posting Komentar

Postingan populer dari blog ini

Aplikasi Starbucks Clone dengan Android Studio

Gambar
Nama     : Iftala Zahri Sukmana NRP       : 5025221002 Kelas     : G Link GitHub  :  https://github.com/ifzahri/ppb/tree/main/starbucks Aplikasi ini akan memiliki fitur lengkap mulai dari menu pemesanan, keranjang belanja, hingga profil pengguna. 🎯 Fitur Utama Aplikasi Aplikasi Starbucks Clone yang kita buat memiliki empat halaman utama dengan berbagai fitur menarik: 1. Halaman Beranda (Home) Banner selamat datang dengan gradient warna khas Starbucks Bagian "Quick Order" untuk pemesanan cepat Daftar produk unggulan dengan tombol "Add to Cart" Desain card modern dengan elevation yang tepat 2. Halaman Menu Filter kategori produk (All, Coffee, Tea, Frappuccino, Food) Daftar lengkap menu dengan deskripsi dan harga Tombol "Add" untuk menambahkan item ke keranjang UI yang responsif dan mudah digunakan 3. Halaman Keranjang (Cart) Daftar semua item yang dipilih dengan jumlahnya Fitur tambah/kurang jumlah item Penghitungan total ...
Baca selengkapnya

Membuat Login Form Elegan dengan Jetpack Compose di Android Studio

Nama     : Iftala Zahri Sukmana NRP       : 5025221002 Kelas      : G Kode GitHub :   https://github.com/ifzahri/ppb/tree/main/loginform Selamat datang di blog teknis hari ini! Dalam artikel ini, saya akan membahas cara membuat form login yang modern dan fungsional menggunakan Jetpack Compose, library UI terbaru untuk pengembangan aplikasi Android. Mari kita pelajari cara membuat form login dengan field email, password, tombol login, dan opsi "Lupa Password" yang profesional. Pendahuluan Jetpack Compose telah mengubah cara kita membangun antarmuka pengguna di Android. Dengan pendekatan deklaratif dan reaktif, Compose memungkinkan pengembang untuk membuat UI yang kompleks dengan kode yang lebih sedikit dan lebih mudah dipahami. Dalam tutorial ini, kita akan fokus pada pembuatan komponen login yang sering menjadi pintu gerbang utama untuk aplikasi. Kita akan mengimplementasikan: Field input untuk email dengan validasi Field input unt...
Baca selengkapnya

Tutorial Pembuatan Aplikasi Dice Roller Interaktif dengan Jetpack Compose

Gambar
Nama     : Iftala Zahri Sukmana NRP        : 5025221002 Kelas     : G Link GitHub : https://github.com/ifzahri/ppb/tree/main/DiceRoller Pada kesempatan kali ini, kita akan mempelajari cara membuat aplikasi Dice Roller (Pelempar Dadu) yang interaktif menggunakan Jetpack Compose dan Kotlin. Aplikasi ini tidak hanya menampilkan animasi pelemparan dadu, tetapi juga menyimpan riwayat lemparan terakhir untuk pengalaman pengguna yang lebih menarik. Persiapan Awal Sebelum memulai, pastikan Anda telah menginstal Android Studio versi terbaru. Untuk tutorial ini, kita akan menggunakan Jetpack Compose - UI toolkit modern untuk Android yang ditulis dalam bahasa Kotlin. Langkah 1: Membuat Proyek Baru Buka Android Studio Pilih "New Project" Pilih "Empty Compose Activity" Beri nama proyek "Dice Roller" Atur package name menjadi "com.example.diceroller" Pilih Kotlin sebagai bahasa pemrograman Klik "Finish" Membuat Aset Gambar Dadu Untuk ap...
Baca selengkapnya