Implementasi RecyclerView + CardView di Kotlin

5 min readJun 14, 2018

Hai kembali lagi.., kali ini saya akan membagikan tutorial bagaimana cara mengimplementasi recyclerview + cardview di kotlin.

Jika yang sebelumnya sudah pernah membuat ini dengan bahasa pemrograman java mungkin tinggal menyesuaikan saja pada tutorial ini dan mungkin bisa juga melihat beberapa kelebihan dari syntax-syntax yang simple pada kotlin.

Oke, mulai ….

1.Buat project baru di Android Studio dengan nama Imp RecyclerView and CardView Kotlin (untuk nama project bisa bebas, tidak perlu harus mengikuti nama yang ada pada tutorial)

Centang ***Include Kotlin Support*** kemudian Klik next

Api minimun api (di sini saya menggunakan minimum api 19) kemudian klik next

dan terakhir klik finish dan tunggu sampai build gradle nya kelar.

2.Masuk ke build.gradle (module: app) dan tambakan code di bawah ini pada dependecies

implementation 'com.android.support:recyclerview-v7:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'

3.Sekarang masuk ke layout -> activity_main.xml

Kita tambahkan recyclerview di dalam xml nya main activity

<android.support.v7.widget.RecyclerView
    android:id="@+id/mRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

sehingga keseluruhan code dari activity_main.xml menjadi seperti ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/mRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>

4.Buat layout baru dengan cara klik kanan pada layout -> new -> layout resource file

kemudian isikan file name nya dengan “list” klik ok jika sudah, maka sekarang di dalam folder layout ada 2 layout yaitu activity_main.xml sama list.xml

5.Buat assets baru dengan klik kanan pada drawable -> new -> vector assets

6.Buka list.xml

Kemudian kita tambahkan LinearLayout, Cardview, LinearLayout, Imageview dan TextView

sehingga code nya seperti ini

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/cardList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp">

            <ImageView
                android:id="@+id/imgList"
                android:src="@drawable/ic_android_black_24dp"
                android:layout_width="70dp"
                android:layout_height="70dp" />

            <TextView
                android:id="@+id/lbList"
                android:textStyle="bold"
                android:text="@string/app_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="17dp"/>

        </LinearLayout>

keseluruhan kode list.xml nya jadi seperti ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            android:id="@+id/cardList"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="4dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="16dp">

                <ImageView
                    android:id="@+id/imgList"
                    android:src="@drawable/ic_android_black_24dp"
                    android:layout_width="70dp"
                    android:layout_height="70dp" />

                <TextView
                    android:id="@+id/lbList"
                    android:textStyle="bold"
                    android:text="@string/app_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="17dp"/>

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

</android.support.constraint.ConstraintLayout>

7.Buat sebuah data class yang akan kita gunakan sebagai model nya dengan cara klik kanan pada package -> new -> kotlin file/class

Name nya diisi saja Users kemudian untuk kind pilih Class klik OK

ubah code pada kelas seperti berikut

data class Users (val name:String?)

bagi yang sudah terbiasa menggunakan setter-getter di java sekarang di kotlin kita hanya perlu membuat data class saja, fungsi nya sama kyk setter-getter di java hanya saja di kotlin pembuatan nya lebih simple.

8.Buat class baru untuk Adapter RecyclerView dengan cara klik kanan pada package -> new -> kotlin file/class

Name nya diisi saja Adapter untuk kind pilih Class klik OK.

pertama kita masukan parameter pada costruct class nya dengan list:ArrayList<Users> //users adalah sebuah data class yang telah kita buat sebelumnya.

class Adapter(private val list:ArrayList<Users>) : RecyclerView.Adapter<Adapter.Holder>(){}

setelah kita mengubah code dalam class adapter seperti di atas pasti akan ada error di bagian Holder, itu karena kita belum membuat class holder tsb. Class Holder tersebut akan digunakan untuk menampung ViewHolder dari recyclerview.

oke sekarang kita buat Class Holder nya dengan cara menuliskan kode berikut di dalam kelas Adapter

class Holder(val view: View) : RecyclerView.ViewHolder(view)

setelah itu kita implement 3 method dari class Adapter yaitu

onCreateViewHolder
getItemCount
onBindViewHolder

cara untuk implementasinya dengan cara klik kanan di dalam class Adapter kemudian pilih generate -> override methods… dan pilih onCreateViewHolder(parent: ViewGroup, viewType:Int), getItemCount():Int, dan onBindViewHolder(holder:AdapterHolder, position:Int):Unit, klik OK.

9.Import Kotlin Extension

import kotlinx.android.synthetic.main.list.view.*

Di kotlin ada sebuah plugin yang namanya kotlin extension di mana hal ini membuat kita tidak perlu lagi untuk init view dari masing masing layout. Jadi kita tidak perlu lagi menuliskan findViewById pada kotlin, kita cukup menggunakan plugin tsb. (bye-bye ButterKnife .. lol).

10.Setting method onCreate, OnBind, dan GetItemCount

Pada onCreate tambahkan code berikut

return Holder(LayoutInflater.from(parent.context).inflate(R.layout.list,parent,false))

kode tersebut digunakan untuk meng-Inflate layout dari list.xml yang telah kita buat tadi.

Pada onBindViewHolder tambahkan code berikut

holder.view.lbList.text = list?.get(position)?.name

kode tersebut digunakan untuk men-Settext dari lbList dengan data yang diambil dari adapter (kita akan setting adapter nanti)

Pada getItemCount ubah kode nya menjadi seperti ini

override fun getItemCount(): Int = list?.size

kode tersebut digunakan untuk mengambil jumlah data yang ada pada adapter.

Keseluruhan kode dari kelas Adapter seperti berikut

package erthru.imprecyclerviewandcardviewkotlin

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import kotlinx.android.synthetic.main.list.view.*

class Adapter(private val list:ArrayList<Users>) : RecyclerView.Adapter<Adapter.Holder>(){

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): Holder {
        return Holder(LayoutInflater.from(parent.context).inflate(R.layout.list,parent,false))
    }

    override fun getItemCount(): Int = list?.size

    override fun onBindViewHolder(holder: Holder, position: Int) {

        holder.view.lbList.text = list?.get(position)?.name

    }

    class Holder(val view: View) : RecyclerView.ViewHolder(view)

}

11.Balik ke MainActivity

Buka kelas MainActivity kemudian buat sebuah variabel array yg berisi data-data dari users contoh : Google,Apple,Microsoft,Asus,Zenpone,Acer dan juga sebuah variable dari arrayList

val list = ArrayList<Users>()
val listUsers = arrayOf(
        "Google",
        "Apple",
        "Microsoft",
        "Asus",
        "Zenpone",
        "Acer"
)

letakan kode tsb diluar dari method onCreate

12.Setting layout manager dari RecyclerView

Jangan lupa untuk import dulu plugin nya

import kotlinx.android.synthetic.main.activity_main.*

kemudian tuliskan kode berikut di dalam method onCreate

mRecyclerView.setHasFixedSize(true)
mRecyclerView.layoutManager = LinearLayoutManager(this)

13.Masukan data listUsers ke list

Tuliskan kode berikut di bawah kode mRecylerView.layoutManager

for (i in 0 until listUsers.size){

    list.add(Users(listUsers.get(i)))

    if(listUsers.size - 1 == i){
        // init adapter yang telah dibuat tadi
        val adapter = Adapter(list)
        adapter.notifyDataSetChanged()

        //tampilkan data dalam recycler view
        mRecyclerView.adapter = adapter
    }

}

disini kita menggunakan perulangan for untuk mengisi tiap data yang ada di listUsers ke list, setelah data semua diisi maka data tersebut kita tampilkan ke dalam recyclerview.

Keseluruhan kode dari kelas MainActivity menjadi seperti berikut

package erthru.imprecyclerviewandcardviewkotlin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.widget.LinearLayout
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val list = ArrayList<Users>()

    val listUsers = arrayOf(
            "Google",
            "Apple",
            "Microsoft",
            "Asus",
            "Zenpone",
            "Acer"
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mRecyclerView.setHasFixedSize(true)
        mRecyclerView.layoutManager = LinearLayoutManager(this)

        for (i in 0 until listUsers.size){

            list.add(Users(listUsers.get(i)))

            if(listUsers.size - 1 == i){
                // init adapter yang telah dibuat tadi
                val adapter = Adapter(list)
                adapter.notifyDataSetChanged()

                //tampilkan data dalam recycler view
                mRecyclerView.adapter = adapter
            }

        }

    }
}

14.Jalankan aplikasi nya

Jika tidak ada error seharusnya aplikasi berjalan dengan sukses

[Download project]

Sekian dulu tutorial kali ini, jika ada kekurangan atau kesalahan mohon dimaafkan.

Semoga tutorial kali ini bermanfaat.

Implementasi RecyclerView + CardView di Kotlin

Written by Anto D.