Otak-Atik RecyclerView | CardView | LayoutManager

RecyclerView adalah salah satu komponen ui di Android yang sering digunakan dalam sebuah aplikasi. Karena komponen ini digunakan untuk membuat sebuah app yang didalamnya terdapat list atau daftar yang dapat discroll ke atas ke bawah atau ke kanan ke kiri. Contoh aplikasi yang menggunakan RecyclerView : halaman utama aplikasi facebook, halaman chat diLine, WA atau BBM.

Ditutorial kali ini, saya akan memberikan contoh beberapa dari penggunaan RecyclerView, dari yang hanya berisikan text saja hingga yang isinya dengan berbagai kombinasi, seperti text dan gambar, tombol like dan lain-lain.

Tutorial kali ini, source codenya saya upload di github, dengan maksud agar kedepannya jika ada update, maka Anda dapat dengan mudah mengupdatenya juga. Berikut adalah linknya Recycler View Collection.

Screenshot hasil tutorial ini:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Untuk menggunakan komponen RecyclerView, paling tidak ada 3 hal yang perlu dipelajari juga, yaitu : RecyclerView Adapter, LayoutManager dan ItemDecoration. Ada sebuah video dari Google IO 2016 yang menjelaskan mengenai RecyclerView, berikut videonya:

 

andevindo-otak-atik-recyclerview-image1

Aplikasi ini membutuhkan sebuah file json sebagai datanya. Datanya ini disimpan didalam asset dari proyek. Sebelum mengolah data JSONnya, kita perlu mengambilnya terlebih dahulu. Saya menggunakan sebuah method seperti dibawah, untuk mendapatkan String dari file JSONnya.

Method tersebut terletak didalam class JSONHelper.

Setelah didapatkan Stringnya, lalu kita olah dengan cara menguraikannya. Karena data yang kita pakai ini bertipe JSON, maka sebaiknya Anda harus paham bagaimana cara menguraikan atau biasanya sering disebut parsing data JSON. Kebetulan saya telah membuat sebuah post untuk mengurai data JSON. Silahkan kunjungi post berikut :

Urai data JSON : http://www.andevindo.com/urai-data-json/

Datanya JSON yang telah diurai, tersimpan dalam List<Post> atau bisa dibilang kumpulan data bermodel Post. Post ini adalah model yang mempresentasikan data yang ada didalam file JSON tadi. Mari kita lihat file Post.java ini yang terletak didalam package Model.

Data dari file JSON tadi berisikan title, content dan image. Nah file Post.java ini sebagai model dari data file JSON tadi. Lalu kenapa ada like dan bookmark di file Post.java ini? Sedangkan di file JSONnya tidak ada. Saya tambahkan 2 variabel tersebut untuk RecyclerView yang mempunyai interaksi like dan bookmark didalamnya. Jadi secara default, data like dan bookmark tadi bernilai false, karena memang belum diinisialisasi sebelumnya, karena di file JSONnya tidak terdapat data like dan bookmark.

Lanjut lagi, untuk contoh RecyclerView yang akan saya buat kali ini, terdapat 6 contoh, yaitu : Text Only, With Image, CardView, LikeBookmark, Grid, Staggered.

4 contoh pertama saya menggunakan LinearLayoutManager, kemudian 2 contoh berikutnya sesuai namanya, yaitu GridLayoutManager dan StaggeredLayoutManager. Bedanya apa dari ke-3 LayoutManager tersebut?

  1. LinearLayoutManager
    Hanya mendukung satu kolom jika itu orientasinya vertical dan satu baris jika orientasinya horizontal.
  2. GridLayoutManager
    Sama seperti LinearLayoutManager mempunyai 2 orientasi juga, namun dapat lebih dari 1 span. Maksudnya bisa lebih dari 1 kolom jika vertikal dan 1 baris jika horizontal.
  3. StaggeredLayoutManager
    Sama seperti GridLayoutManager, namun ukuran tinggi(jika vertikal) dari setiap view/child/item dari RecyclerViewnya menyesuaikan tinggi viewnya masing-masing. Agar lebih jelasnya lihat contoh dibawah.
GridLayoutManager
GridLayoutManager
StaggeredLayoutManager
StaggeredLayoutManager

Sekarang saatnya menelaah kode dari contoh RecyclerViewnya. Saya ambil contoh yang LikeBookmark saja, karena menurut saya, jika mengerti bagian ini, contoh lainnya sudah tercangkup.

LikeBookmarkAdapter

Di file LikeBookmarkAdapter.java ini akan saya jelaskan perfungsinya.

Fungsi tersebut adalah Constructor dan melewatkan Context sebagai paramaternya. Context ini digunakan untuk inflate layout dan penggunaan Picasso.

 

Fungsi ini digunakan untuk memberikan data ke dalam List. Waktu awal adapter ini dideklarasikan, datanya adalah null, karena memang belum ada data yang dimasukkan. Lalu lewat fungsi inilah datanya dimasukkan. Ada fungsi notifyDataSetChanged() fungsinya untuk memberitahukan kepada RecyclerView, bahwa data telah berubah dan kemudian RecyclerView akan mengupdate tampilannya.

 

Fungsi tersebut untuk men-set presenter yang berada di-class lain. Fungsi dari presenter ini adalah untuk menghubungkan 2 class yang berbeda. Semisal, jika ada interaksi seperti klik maka class lain akan mengetahui bahwa di-class lain ada interaksi klik.

 

Fungsi diatas digunakan untuk memilih layout mana yang akan dipakai. Seperti contoh diatas, saya menggunakan layout recycler_like_bookmark. Kemudian hasil dari memilih dan memanggil layout tersebut, dikirim ke ViewHolder yang akan digunakan. Didalam ViewHolder kita dapat memasukkan nilai ke dalam view, atau menangkap interaksi user seperti klik, klik dua kali dan lain-lain.

 

Nah didalam fungsi ini, data dan presenter mulai dikaitkan dengan ViewHolder tadi. holder.setLocalPresenter(this) ini untuk menyambungkan class LikeBookmarkAdapter dengan LikeBookmarkViewHolder. holder.bindData(mPostList.get(position)) ini untuk mengirimkan data ke ViewHolder.

 

Sesuai namanya, untuk mendapatkan jumlah data/item yang ada. Didalamnya saya modifikasi dengan menambahkan kondisi mPostList == null untuk mengantisipasi jika Listnya masih null, karena jika tidak seperti itu, akan crash ketika memanggil mPostList.size().

 

2 Fungsi diatas adalah fungsi yang digenerate ketika mengimplementasi LocalLikeBookmarkPresenter. Jadi jika button like atau bookmark diklik, maka fungsi tersebut akan dijalankan. Dan didalamnya terdapat proses penggantian status like dan bookmark. Kemudian setelah diganti, RecyclerView diberitahu dengan cara memanggil notifyItemChanged(index).

 

Nah ini kumpulan fungsi yang harus diterapkan jika ada yang mengimplementasinya. Ini adalah sebuah interface, biasanya digunakan sebagai perantara antara 2 class jika ingin berhubungan. Didalamnya terdapat fungsi abstract onClick, onLongClick, onLike dan onBookmark yang kegunaannya sesuai dengan namanya.

 

Kemudian masuk ke dalam class lain dari LikeBookmarkAdapter.java yaitu LikeBookmarkViewHolder.

Nah fungsi tersebut adalah fungsi Constructor. Didalamnya dideklarasikan setiap view yang ada di layout yang digunakan. Dan juga memberikan listener kepada view yang diperlukan.

 

Fungsi ini untuk membarikan nilai ke view yang ada. Seperti mTitle.setText(post.getTitle()) untuk men-set judul kedalam mTitle.

 

Digunakan untuk menghubungkan class LikeBookmarkViewHolder dengan LikeBookmarkAdapter.

 

Interface untuk menghubungan class LikeBookmarkViewHolder dengan LikeBookmarkAdapter.

 

Setelah adapter dibuat, lalu adapter ini digunakan diActivity ataupun Fragment yang akan menggunakannya. Ditutorial ini, saya menggunakan Fragment. Setiap adapter yang ada digunakan untuk satu class Fragment yang saya buat, dengan maksud agar lebih mudah untuk dipahami.

LikeBookmarkFragment

Berikut penjelasannya:

Difungsi onCreateView ini RecyclerView, Adapter, ItemDecoration dideklarasikan. Dan juga presenter yang digunakan untuk menghubungkan 2 class diterapkan juga.  Di contoh yang LikeBookmark ini, saya menggunakan LayoutManager yang linear, sehingga ItemDecoration yang saya gunakan juga yang linear. 3 Item Decoration bisa dilihat dipackage View>Support. Kemudian untuk memberikan data ke RecyclerView digunakan :

mAdapter.setData(JSONHelper.getData(getContext())). JSONHelper sendiri adalah class yang awal disebutkan, yang berisi tentang cara mengambil data dari assets dan mengurai data dari JSON ke dalam List<Post>.

 

Fungsi-fungsi diatas akan digenerate jika class tersebut mengimplementasi LikeBookmarkPresenter. Anda bisa memberikan action yang lainnya didalam fungsi-fungsi tersebut. Misal seperti onClick, jika view diklik, maka akan membuat Activity baru misalnya. Maka Anda dapat menambahkan kode untuk membuka Activity baru didalam fungsi onClick(Post post).

 

Sekian dulu tutorial kali ini tentang RecyclerView. Untuk source codenya saya upload di-github, untuk mempermudah me-maintenance source code maupun blog ini. Jika anda kurang familiar dengar git, anda bisa mendownload source code tersebut lewat github juga.

Source code : Recycler View Collection

 

 

 

  • Hendrawan Adi Wijaya

    Test

  • rizki deddy

    Gan kalau JSon tadi kita ambil dari PHP mysql, apa aja yg harus kita rubah ya.. makasih

    • Hendrawan Adi Wijaya

      Biasanya dirubah ke model Gan. Data JSON yang didapat itu, diambil nilai-nilainya lalu dimasukin ke model yang sudah dibuat biar dapat digunakan di Androidnya.