Cara Membuat RecyclerView dan CardView di Android

Download apk yang sudah jadi

Setelah pada postingan sebelumnya kita telah membahas Cara Membuat Custom ListView. Kali ini mari kita bersama - sama belajar membuat RecyclerView sekaligus dikombinasikan dengan CardView.

RecyclerView dan CardView adalah fitur baru yang diperkenalkan di android 5.+ (Android L). Namun demikian, kita masih dapat menerapkan fitur baru ini pada android di bawah Lolipop dengan bantuan support libary.

'com.android.support:cardview-v7:+' 'com.android.support:recyclerview-v7:+'

RecyclerView bisa kita katakan sebagai versi upgrade dari ListView, karena RecyclerView sifat dan penggunaannya hampir sama dengan ListView. Namun, RecyclerView lebih kompleks.

Pada ListView untuk meningkatkan performa kita bisa memakai ViewHolder di adapternya. Namun juga bisa tanpa menggunakan ViewHolder sama sekali.

Sedangkan di RecyclerView kita tidak ada pilihan selain harus menggunakan ViewHolder

Ok, mari kita mulai membuat aplikasi sederhana untuk mencoba mempadukan RecyclerView dan CardView.

Buat Project Gradle Baru

Buat proyek baru dengan rincian:
Nama app : Contoh_Recycler_CardView
Nama package : inyong.contoh.recyclercardview'

Tambahkan Library
Masuk ke folder app, dan klik pada Add to Project...
Kemudian dari dialog yg muncul pilih
com.android.support:cardview-v7:+'

Klik ok pada dialog konfirmasi yang muncul berikutnya.

Ulangi langkah diatas untuk menambahkan library
com.android.support:recyclerview-v7:+'

Jika saat klik Add to Project...
Tidak ada pilihan library di atas itu artinya di folder sdcard/.aide/ blm tersimpan library tersebut.
Solusinya masuk ke folder app (di project saat ini) dan edit file build.gradle.
Edit bagian dependencies dan samakan menjadi seperti berikut

dependencies {
compile 'com.android.support:cardview-v7:+'
compile 'com.android.support:recyclerview-v7:+'
    compile fileTree(dir: 'libs', include: ['*.jar'])
}

Kemudian simpan filenya. Begitu disimpan aide akan mendownload librarynya. Ada kemungkinan aide tidak hanya mendownload kedua library itu tapi seluruh support library. Ukurannya agak besar jadi harus sabar kalo koneksinya lelet. Tp setelah seluruh support library ada di aide kita selanjutnya jika kita butuh kita tinggal pake gak perlu download lagi.
Ok kembali ke laptop,.... Eh proyek :)

Buat layout untuk RecyrcleView

Pada contoh ini saya akan tempatkan RecyrcleViewnya di main.xml di bawah tulisan Hello World

Masuk ke folder src/app/main/res/layout dan edit file main.xml

Ubah isinya menjadi seperti berikut:

Buat Layout Untuk CardViewnya

Masih di folder layout buat file xml baru dengan nama list_cardview_item.xml dan masukkan code berikut:

Buat Class Model
Sama seperti cara membuat custom listview di sini juga diperlukan class model untuk menghandle setiap item pada list.
Masuk ke folder src/main/java/inyong.contoh.recyclercardview/
Buat class baru dengan nama DataModel.java lalu edit isinya seperti berikut

package inyong.contoh.recyclercardview;

public class DataModel

 {
protected String namaDepan;
protected String namaBelakang;
protected String website;

}

Buat class ViewHolder
Masih di folder yang sama buat class baru dengan nama DataModelViewHolder.java class ini harus meng-extends RecyclerView.ViewHolder.

Edit dan copas code berikut

package inyong.contoh.recyclercardview;
import android.support.v7.widget.*;
import android.view.*;
import android.widget.*;
import inyong.contoh.recyclercardview.*;

public class DataModelViewHolder extends RecyclerView.ViewHolder {
protected TextView vNamaDepan;
protected TextView vNamaBelakang;
protected TextView vWebsite;
protected TextView vTitle;

public DataModelViewHolder(View v) {
super(v);
vNamaDepan =  (TextView) v.findViewById(R.id.txtName);
vNamaBelakang = (TextView)  v.findViewById(R.id.txtSurname);
vWebsite = (TextView)  v.findViewById(R.id.txtEmail);
vTitle = (TextView) v.findViewById(R.id.title);
}
}

Membuat Adapter
Seperti halnya ListView adapter di sini juga digunakan sebagian penghubung antara Object RecyclerView dengan data yang ingin di tampilkan. Dalam hal ini berupa list dari CardView

Buat class baru dengan nama RecyclerViewAdapter.java dan ubah isinya menjadi

package inyong.contoh.recyclercardview;

import android.support.v7.widget.*;
import android.view.*;
import inyong.contoh.recyclercardview.*;
import java.util.*;

public class RecyclerViewAdapter extends RecyclerView.Adapter<DataModelViewHolder>
{

    private List<DataModel> contactList;

    public RecyclerViewAdapter(List<DataModel> contactList) {
this.contactList = contactList;
    }

    @Override
    public int getItemCount() {
return contactList.size();
    }

    @Override
    public void onBindViewHolder(DataModelViewHolder contactViewHolder, int i) {
        DataModel dataModel = contactList.get(i);
        contactViewHolder.vNamaDepan.setText(dataModel.namaDepan);
        contactViewHolder.vNamaBelakang.setText(dataModel.namaBelakang);
        contactViewHolder.vWebsite.setText(dataModel.website);
        contactViewHolder.vTitle.setText(dataModel.namaDepan + " " + dataModel.namaBelakang);
}

@Override
public DataModelViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.
from(viewGroup.getContext()).
inflate(R.layout.list_cardview_item, viewGroup, false);

        return new DataModelViewHolder(itemView);
}
}

Menghubungkan Antara Object RecyclerView dan Smua Class Pendukungnya
Untuk hal ini kita perlu edit MainActivity.java
Menambahkan data pada recyclerview diperlukan LinearLayoutManager yang diperlukan oleh RecyclerView untuk mengatur setiap item (child) pada listnya. Jadi sebelum kita menerapkan adapter, kita harus terlebih dulu menge-set LinearLayoutManagernya.

Untuk lebih jelasnya isi dari MainActivity pada contoh ini adalah sebagai berikut:

package inyong.contoh.recyclercardview;

import android.app.*;
import android.os.*;
import android.support.v7.widget.*;
import android.view.*;
import java.util.*;

public class MainActivity extends Activity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

//inisialisasi object recyclerview yang ada di layout
RecyclerView recycleView = (RecyclerView) findViewById(R.id.main_recyclerview);
recycleView.setHasFixedSize(true);

//buat object Linear layout manager dan terapkan ke recycler view
LinearLayoutManager llm = new LinearLayoutManager(this);
llm.setOrientation(LinearLayoutManager.VERTICAL);
recycleView.setLayoutManager(llm);

//bikin list untuk percobaan
//listnya berupa object DataModel
List<DataModel> listTest=new ArrayList<DataModel>();
//bikin object DataModel disini untuk dipake dalam loop
//untuk menghindari pembuatan object DataModel dalam proses loop.
DataModel dataModel;

for (int i=0;i < 100;i++)
{
dataModel = new DataModel();
dataModel.namaDepan = i + " Supri";
dataModel.namaBelakang = "Yadi";
dataModel.website = "email : ?, blog : tutorial-aide.blogspot.com ";

listTest.add(dataModel);
}
//buat adapter dari hasil pembuatan list sebanyal 100 item DataModel di atas
RecyclerViewAdapter recyclerViewAdapter=new RecyclerViewAdapter(listTest);
//terapkan adapter yg baru saja kita buat ke objeck RecyclerViewnya
recycleView.setAdapter(recyclerViewAdapter);
//selesai.... :) :) :)
}

}

Compiling.....
Ok sekarang coba compile dan liat hasilnya.

Baca juga tutorial Cara membuat cutom font di android

Download
Apk dari project ini : download
Source code : download

Reference:

https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html

https://developer.android.com/reference/android/support/v7/widget/CardView.html

https://developer.android.com/training/material/lists-cards.html