Tutorial mudah membuat RecyclerView di Android

Sejak google meluncurkan pendekatan material design, penggunaan ListView disarankan untuk beralih ke RecyclerView. Dengan kemampuan yang lebih baik dari pendahulunya, RecyclerView ini lebih fleksible dan mampu menampung jumlah data besar.

Artikel sebelumnya tentang tutorial ListView bisa di cek pada link berikut ini: Tutorial ListView di Android.

Konsep kode program untuk membuat RecyclerView kurang lebih sama pada Custom ListView seperti yang sudah dibahas pada artikel sebelumnya pada link diatas.

Adapun tahapan yang dilakukan dalam membuat RecyclerView yaitu:

1. Menambah dependency di gradle
2. Membuat Class model
3. Membuat layout untuk item list
4. Membuat Adapter untuk binding data

Berikut detail dari tahapan-tahapan diatas:

Menambah dependency di file gradle

Setelah kita melakukan perubahan pada file gradle maka Android Studio akan meminta anda melakukan sinkronisasi untuk update library yang dibutuhkan.

	dependencies {
	implementation 'com.android.support:recyclerview-v7:28.0.0'
	implementation 'com.android.support:cardview-v7:28.0.0'
	}

view raw build.gradle hosted with ❤ by GitHub

Selanjutnya pada file xml di layout activity, gunakan juga elemen RecyclerView seperti pada kode dibawah ini:

	<?xml version="1.0" encoding="utf-8"?>
	<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MyRecyclerActivity">
	<android.support.v7.widget.RecyclerView
	android:id="@+id/recycler_view"
	android:layout_width="match_parent"
	android:layout_height="match_parent" />
	</android.support.constraint.ConstraintLayout>

view raw activity_my_recycler.xml hosted with ❤ by GitHub

Membuat Class model

Class model disini kita perlukan untuk mempresentasikan setiap item data menjadi sebuah objek ketika digunakan pada Adapter di RecyclerView. Class model disini akan menggunakan Players yaitu object pemain Juventus FC seperti pada contoh di ListView sebelumnya.

Untuk generate constructor dan method getter setter bisa digunakan shortcut di Android Studio (Win: Alt + Insert, Mac: Cmd + N) untuk mempercepat pembuatannya.

	public class Players {
	private String name;
	private String position;
	private int number;
	public Players(String name, String position, int number) {
	this.name = name;
	this.position = position;
	this.number = number;
	}
	public String getName() {
	return name;
	}
	public void setName(String name) {
	this.name = name;
	}
	public String getPosition() {
	return position;
	}
	public void setPosition(String position) {
	this.position = position;
	}
	public int getNumber() {
	return number;
	}
	public void setNumber(int number) {
	this.number = number;
	}
	}

view raw Players.java hosted with ❤ by GitHub

Layout item list

Pada layout ini akan digunakan juga CardView dimana pada item ini akan ditampilkan 3 buah TextView untuk menampung data nama pemain, posisi dan nomer punggung.

	<?xml version="1.0" encoding="utf-8"?>
	<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:card_view="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	card_view:cardCornerRadius="6dp"
	card_view:cardElevation="3dp"
	card_view:cardUseCompatPadding="true">
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="5dp"
	android:orientation="vertical"
	android:padding="5dp">
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<TextView
	android:id="@+id/tv_player"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:paddingLeft="10dp"
	android:paddingRight="10dp"
	android:paddingBottom="5dp"
	android:text="Paulo Dybala"
	android:textColor="#000000"
	android:textSize="16sp" />
	<TextView
	android:id="@+id/tv_number"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:paddingLeft="10dp"
	android:paddingRight="16dp"
	android:paddingBottom="5dp"
	android:text="10"
	android:textAlignment="viewEnd"
	android:textColor="@color/colorPrimaryDark"
	android:textSize="18sp" />
	</LinearLayout>
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
	<TextView
	android:id="@+id/tv_pos"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:paddingLeft="10dp"
	android:paddingRight="10dp"
	android:paddingBottom="5dp"
	android:text="Forward"
	android:textColor="@color/colorPrimaryDark" />
	</LinearLayout>
	</LinearLayout>
	</android.support.v7.widget.CardView>

view raw card_players.xml hosted with ❤ by GitHub

Membuat Adapter

Selanjutnya kita perlu buat class Adapter yang merupakan extends/turunan dari RecyclerView.Adapter dengan kode seperti berikut ini:

	public class MyJuveAdapter extends RecyclerView.Adapter<MyJuveAdapter.PlayerViewHolder> {
	private ArrayList<Players> dataList;
	public MyJuveAdapter(ArrayList<Players> dataList) {
	this.dataList = dataList;
	}
	@NonNull
	@Override
	public MyJuveAdapter.PlayerViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
	LayoutInflater layoutInflater = LayoutInflater.from(viewGroup.getContext());
	View view = layoutInflater.inflate(R.layout.card_players, viewGroup, false);
	return new PlayerViewHolder(view);
	}
	@Override
	public void onBindViewHolder(@NonNull MyJuveAdapter.PlayerViewHolder playerViewHolder, int i) {
	playerViewHolder.tvName.setText(dataList.get(i).getName());
	playerViewHolder.tvPosition.setText(dataList.get(i).getPosition());
	playerViewHolder.tvNumber.setText(String.valueOf(dataList.get(i).getNumber()));
	}
	@Override
	public int getItemCount() {
	return (dataList != null) ? dataList.size() : 0;
	}
	public class PlayerViewHolder extends RecyclerView.ViewHolder {
	private TextView tvName, tvPosition, tvNumber;
	public PlayerViewHolder(@NonNull View itemView) {
	super(itemView);
	tvName = (TextView) itemView.findViewById(R.id.tv_player);
	tvPosition = (TextView) itemView.findViewById(R.id.tv_pos);
	tvNumber = (TextView) itemView.findViewById(R.id.tv_number);
	}
	}
	}

view raw MyJuveAdapter.java hosted with ❤ by GitHub

Dan pada bagian terakhir ini kita akan mengimplementasikannya di Activity dimana data yang akan kita gunakan dalam bentuk String JSON. Kita akan gunakan method setData( ) untuk melakukan parse data JSON ke dalam ArrayList<Players> supaya bisa di-binding oleh Adapter untuk di tampilkan ke layar. 

	public class MyRecyclerActivity extends AppCompatActivity {
	private RecyclerView recyclerView;
	private MyJuveAdapter adapter;
	private ArrayList<Players> playersArrayList;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_my_recycler);
	String jsonData = "[{'name':'Cristiano Ronaldo', 'position': 'Forward', 'number': 7}," +
	"{'name': 'Leonardo Bonucci', 'position': 'Defender', 'number': 19}," +
	"{'name': 'Gianluigi Buffon', 'position': 'Goal keeper', 'number': 1}]";
	setData(jsonData);
	recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
	adapter = new MyJuveAdapter(playersArrayList);
	RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(MyRecyclerActivity.this);
	recyclerView.setLayoutManager(layoutManager);
	recyclerView.setAdapter(adapter);
	}
	void setData(String jsonString){
	try {
	JSONArray jsonArray = new JSONArray(jsonString);
	playersArrayList = new ArrayList<>();
	for(int i=0; i<jsonArray.length(); i++){
	JSONObject jsonObject = jsonArray.getJSONObject(i);
	Players player = new Players(jsonObject.getString("name"),
	jsonObject.getString("position"),
	jsonObject.getInt("number"));
	playersArrayList.add(player);
	}
	} catch (JSONException e) {
	e.printStackTrace();
	}
	}
	}

view raw MyRecyclerActivity.java hosted with ❤ by GitHub

Setelah tahapan tersebut selesai kita implementasikan, kita dapat menjalankan pada Android Studio dan hasil akhirnya adalah seperti tampilan berikut ini

Jika anda membutuhkan file project lengkap untuk ListView sederhana ataupun RecyclerView seperti pada contoh diatas bisa tuliskan alamat email di komentar, selanjutnya akan saya share kode tersebut untuk anda.