Tutorial Menggunakan RecyclerView dan Adapter di Kotlin-Upload Gambar | PART 2

 

PENDAHULUAN

    Sebelumnya kita telah membahas tentang recyclerView. Materi ini merupakan kelanjutan dari materi sebelum, jadi anda di sarankan mengikuti tutorial sebelumnya sebelum melanjutkan ke materi ini. Silahkan kunjungi halaman tentang materi sebelumnya disini.

    Tutorial sebelumnya kita telah membuat sebuah projek dengan tema "BUKU" yang menampilkan list judul buku. Sekarang kita akan mencoba melengkapinya dengan menampilkan cover dan deskripsi buku. Anda silahkan siapkan beberapa gambar. Di sarankan nama gambar tidak mengandung space, huruf kapital ataupun simbol agar tidak terjadi error nantinya di aplikasi yang akan kita bangun. Gambar bisa anda download disini.

    Terdapat 8 jenis gambar di dalam folder Cover yang anda download tadi. Copy semua gambar yang ada di dalam folder cover tersebut dan pastekan pada root App=>res=>Drawable. Jika muncul kotak dialog klik saja tombol OK. Gambar ini nanti akan di panggil di file string.xml.

    Nah, sekarang mari kita mulai mengerjakan projek BUKU kita.

LIST BUKU

    Pertama-tama buka kembali file list_buku.xml yang ada di root App=>res=>Layout. Kita edit dan akan menambahkan 2 buah komponen ke dalam desain kita tersebut. Komponen yang akan di tambahkan adalah textview dan imageview. perhatikan script berikut:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
card_view:cardCornerRadius="4dp">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp">

<ImageView
android:id="@+id/img_cover"
android:layout_width="70dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent"
tools:src="@tools:sample/avatars" />

<TextView
android:id="@+id/tv_judul"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_toEndOf="@id/img_cover"
android:textSize="18sp"
android:textStyle="bold"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toEndOf="@+id/img_cover"
card_view:layout_constraintTop_toTopOf="@+id/img_cover"
tools:text="Judul buku" />

<TextView
android:id="@+id/tv_deskripsi"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxLines="5"
card_view:layout_constraintBottom_toBottomOf="@+id/img_cover"
card_view:layout_constraintEnd_toEndOf="@+id/tv_judul"
card_view:layout_constraintStart_toStartOf="@+id/tv_judul"
card_view:layout_constraintTop_toBottomOf="@+id/tv_judul"
card_view:layout_constraintVertical_bias="0.0"
tools:text="Deskripsi Buku" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

       Berikut hasilnya jika dilihat pada halaman Design:

     

STRING.XML

    Selanjutnya kita akan menambah data pada file string.xml. file ini ada di root App=>res=>values=>string.xml. Lengkapi file tersebut:

<resources>
<string name="app_name">BUKU</string>

<string-array name="data_judul">
<item>Aplikasi Komputer</item>
<item>30 Menit Mahir Jaringan Komputer</item>
<item>Buku Mahir Web Programming</item>
<item>Jaringan Komputer Microtik</item>
<item>Pemrograman Strukturdata C</item>
<item>Buku Panduan Dasar Pemrograman Untuk Pemula</item>
<item>Buku Sakti Pemrograman Web</item>
<item>Pengantar Aplikasi Komputer</item>
</string-array>

<integer-array name="data_cover">
<item>@drawable/aplikasi_komputer</item>
<item>@drawable/jaringan_komputer</item>
<item>@drawable/mahir_web</item>
<item>@drawable/microtik</item>
<item>@drawable/pemrograman_c</item>
<item>@drawable/pemrograman_untuk_pemula</item>
<item>@drawable/pemrograman_web</item>
<item>@drawable/pengantar_aplikasi_komputer</item>
</integer-array>

<string-array name="data_deskripsi">
<item>Buku ini berisi tentang bagaimana membuat aplikasis berbasis komputer. Sangat cocok bagi para pengembangan software aplikasi</item>
<item>Anda tertarik untuk belajara jaringan komputer?. 30 menit anda akan menguasai jaringan komputer. Buku ini berisi tentang bagaimana membuat jaringan komputer. Sangat cocok bagi para pengembangan software aplikasi</item>
<item>Web di dunia dewasa ini bukan lagi hal yang dianggap tabu. Setiap perusahaan maupun instansi pemerintah pasti menggunakan halaman website</item>
<item>Microtik merupakan disiplin ilmu dalam bidang jaringan komputer. Buku ini cocok bagi anda yang ingin mendalami tentang jarignan komputer</item>
<item>Bagi anda yang ingin belajar ilmu pemrograman, tidak salah bila buku ini anda miliki</item>
<item>Bagi anda pemula kami hadirkan buku yang memandu anda untuk memahami struktur program</item>
<item>Nah, Sekali lagi buku pemrograman untuk membuat halaman website hadir di hadapan andan</item>
<item>Lengkap dengan semua yang dibutuhkan untuk memahami rancangan halaman sebuah aplikasi</item>
</string-array>
</resources>

    Terdapat 3 data yang kita buat dalam bentuk array. Namun pada data gambar Data ini menggunakan tipe integer sedangkan pada data judul dan deskripsi kita menggunakan type string. 

DATACLASS

    Buka file data class kita yang ada di root App=> kotlin+java=>com.example.buku=>DataItem.kt dan tambahkan variabel cover dan deskripsi seperti berikut:

package com.example.recyclerview

import android.os.Parcelable
import kotlinx.parcelize.Parcelize

@Parcelize
data class DataItem(
val judul: String,
val deskripsi: String,
val cover: Int
): Parcelable

CLASS ADAPTER

    Nah, sekarang kita masuk ke root App=>kotlin+java=>com.example.buku=>itemAdapter.kt dan tambahkan script berikut:

package com.example.recyclerview

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class ItemAdapter(
private val listBuku: ArrayList<DataItem>
) : RecyclerView.Adapter<ItemAdapter.ListViewHolder>() {
class ListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val tvJudul: TextView = itemView.findViewById(R.id.tv_judul)
val tvDeskripsi: TextView = itemView.findViewById(R.id.tv_deskripsi)
val imgCover: ImageView = itemView.findViewById(R.id.img_cover)

}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder {
val view: View = LayoutInflater.from(parent.context).inflate(R.layout.list_buku, parent, false)
return ListViewHolder(view)
}
override fun getItemCount(): Int = listBuku.size

override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
val (judul, deskripsi, cover) = listBuku[position]
holder.tvJudul.text = judul
holder.tvDeskripsi.text = deskripsi
holder.imgCover.setImageResource(cover)
}
}

MAIN ACTIVITY.KT

    Terakhir kita akan menyempurnakan MainActivity.kt. Silahkan buka file tersebut yang terletak di root App=>kotlin+java=>com.example.buku=>MainActivity.kt dan tambahkan script berikut:

package com.example.recyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
private lateinit var rvBuku: RecyclerView
private val list = ArrayList<DataItem>()

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
rvBuku = findViewById(R.id.rv_buku)
rvBuku.setHasFixedSize(true)

list.addAll(getListBuku())
showBuku()
}

private fun getListBuku():ArrayList<DataItem>{
val dataJudul = resources.getStringArray(R.array.data_judul)
val dataDeskripsi = resources.getStringArray(R.array.data_deskripsi)
val dataCover = resources.obtainTypedArray(R.array.data_cover)

val listBuku = ArrayList<DataItem>()

for (i in dataJudul.indices) {
val buku = DataItem(dataJudul[i],dataDeskripsi[i],dataCover.getResourceId(i, -1))
listBuku.add(buku)
}
return listBuku
}

private fun showBuku(){
rvBuku.layoutManager = LinearLayoutManager(this)
val listItem = ItemAdapter(list)
rvBuku.adapter = listItem
}
}

Jalankan program anda

Biar lebih keren kita bisa tambahkan efek onClik. Tambahkan script berikut di dalam onBindViewHolder:

override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
val (judul, deskripsi, cover) = listBuku[position]
holder.tvJudul.text = judul
holder.tvDeskripsi.text = deskripsi
holder.imgCover.setImageResource(cover)

holder.itemView.setOnClickListener {
Toast.makeText(holder.itemView.context, "Kamu memilih " +

listBuku[holder.adapterPosition].judul, Toast.LENGTH_SHORT).show()
}

      

    Jalankan kembali projek anda, kemudian silahkan klik salah satu item. Perhatikan akan muncul pesan pada bagian bawah. Pesan tersebut berisikan judul buku yang anda pilih.

  

    Nah, sampai disini kita telah berhasil membuat dan mengupload gambar ke recyclerView. Selamat mencoba dan terimakasih