Cara Membuat ReyclerView dan CardView Android

Untuk menampilkan sebuah daftar atau list yang complex, di dalam menu item yang berbentuk kartu(cards), dengan gaya Material Design. Kalian dapat menggunakan ReyclerView dan widget CardView pada Aplikasi Android yang sedang kalian kembangkan.

ReyclerView adalah sebuah versi lanjutan dari ListView dengan gaya Material Design. Fungsinya sama saja yaitu menampilkan sebuah daftar/list item menu ,namun dengan fitur yang lebih canggih di bandingkan ListView. RecyclerView digunakan untuk memuat data yang lebih besar ,serta reusable berubah-ubah ,tergantung interaksi user(pengguna).

Cara Membuat ReyclerView dan CardView Material Design Android

ReyclerView menggunakan Layout manager yang berfungsi untuk memposisikan item menu. Serta ReyclerView dapat menampilkan sebuah animasi standar ,pada saat item menu di tambahkan dan dihapus oleh interaksi user (pengguna). Layout manager akan menggunakan Adapter untuk mengatur akses dan resource view dari item data atau Dataset(kumpulan data) ,yang akan ditampilkan pada screen(layar). Contoh penerapanya bisa kalian lihat pada gambar dibawah:

ReyclerView (image by developer.android.com)

Cardview adalah turunan dari (extends) FrameLayout ,yang akan menampilkan sebuah item menu atau konten dalam bentuk kartu (cards). Ciri-ciri dari Cardview terdapat sebuah bayangan dan sudut bulat(rounded corner).

Pada tutorial belajar android kali ini , kita akan mencoba membuat widget ReyclerView dan CardView dengan gaya Material Design Android.

1. Pertama buka Android Studio

2. Pilih Start a New Android Studio Project

Start a New Android Studio Project

3.Kedua pada bagian Create New Project, sesuaikan dengan nama dan package serta lokasi file yang akan kalian gunakan. Untuk contoh saya menggunakan seperti yang ada di gambar di bawah. Jika sudah pilih Next.

Application name: ReyclerView and CardView
Company Domain : okedroid.com
Package Name :com.okedroid.reyclerviewandcardview

Configure New Project

4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.

Target Android Devices

5. Pada bagian Add an Activity to Mobile , kita bisa memilih Empty Activity lalu pilih Next.

Empty Activity

6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.

Customize the Activity

7.Setelah itu kita tunggu sampai proses building project gradle selesai .

8. Setelah selesai proses building , kita akan mencoba membuat ReyclerView dan CardView berikut langkah-langkahnya:

1) Setup Gradle

Sebelum memulai untuk secara default pastikan pada build gradle khususnya di bagian dependencies kalian setting seperti ini :

2) Layout

Pada file layout activity_main.xml ,kalian dapat menerapkan baris intruksi (codingan) dibawah.

Di file layout ini kita akan mencoba menyematkan widget ReyclerView.

activity_main.xml

Lalu pada folder layout kalian buat file layout baru , Sebagai contoh nama file yang saya namakan yaitu item_list.xml

Di file layout ini kita akan menerapkan dan menampilkan menu item dari widget CardView , yang akan disejajarkan dengan ReyclerView.

item_list.xml

3) Activity

Pada file class Activity MainActivity.java kalian dapat menerapkan baris intruksi (codingan) dibawah.

Di file class Activity ini kita akan mendeklarasikan dan membuat obyek ReyclerView dan menset LayoutManager.

MainActivity.java

Lalu pada folder java kalian buat 2 file class Activity baru ,sebagai contoh saya akan menamakan file nya ReyclerAdapter.java dan ReyclerViewHolder.java

Di file ini kita akan menerapkan Adapter yang digunakan untuk mengatur akses dan resource view dari item data atau Dataset(kumpulan data).

Kalian salin baris intruksi (codingan) dibawah pada masing-masing file.

ReyclerAdapter.java

ReyclerViewHolder.java

(i) Jika kalian ingin menerapkan Intent untuk menghubungkan Antar Activity pada ReyclerAdapter.java
kalian replace (ganti) code berikut :
Toast.makeText(context,"Item Ini berada pada posisi "+position,Toast.LENGTH_LONG ).show();
menjadi
if (position == 0 && position < getItemCount()) { Intent intent = new Intent(context , MainActivity2.class);
context.startActivity(intent);
}