Cara Membuat RecyclerView dengan Multiple View Type di Android
Yudi Setiawan 23 Januari 2017
Pengantar
Pada tutorial ini, saya akan coba menjelaskan bagaimana caranya membuat View Type yang lebih dari satu pada RecyclerView. Seperti yang kita tahu bahwa RecyclerView merupakan salah satu widget yang hampir mirip seperti ListView namun, fungsinya lebih fleksible. RecyclerView berfungsi sebagai container yang menampilkan sejumlah data-data besar yang bisa di scroll secara efisien. Dan salah satu fungsinya tersebut adalah kita bisa membuat view type yang berbeda-beda atau lebih dari satu.
Persiapan
Adapun beberapa persiapan yang perlu Anda persiapkan adalah sebagai berikut:
- Pastikan Anda sudah memasang aplikasi Android Studio dengan versi terbaru di website canary android studio.
- Pastikan juga Anda memiliki koneksi internet. Karena, pada tutorial ini kita ada menambahkan library depedency
Pembuatan Project Aplikasi Dan Penambahan Library
- Buka aplikasi Android Studio, dan masukkan nama project-nya adalah Codepolitan - RecyclerView Multiple View Types. Selanjutnya, pilih Empty Activity dan selanjutnya pilih next sampai finish.
- Kemudian, buka file build.gradle(Module:app) dan tambahkan
com.android.support:design:25.1.0sehingga file build.gradle(Module:app) Anda akan menjadi seperti ini di bagian dependencies nya
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
testCompile 'junit:junit:4.12'
compile 'com.android.support:design:25.1.0'
Pembuatan Layout View Types
Pada tutorial ini kita akan membuat 3 layout view type. Adapun keterangan untuk ketiga view type tersebut adalah sebagai berikut:
- View type pertama akan menampilkan widget TextView.
- View type kedua akan menampilkan widget TextView dan Button.
- View type ketiga akan menampilkan widget TextView, EditText, dan Button.
Layout View Type Pertama
Buat layout baru dengan cara klik kanan di direktori res-layout dan pilih New-Layout resource file. Beri nama layout tersebut adalah item_tipe_pertama.xml. Dan kemudian, isikan kode layout xml berikut.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view_item_tipe_pertama"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Layout View Type Kedua
Buat layout baru dan beri nama item_tipe_kedua.xml dan berikut kode layout-nya.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view_item_tipe_kedua"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:id="@+id/button_ok_item_tipe_kedua"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/text_view_item_tipe_kedua"
android:layout_centerHorizontal="true"
android:text="OK" />
</RelativeLayout>
Layout View Type Ketiga
Buat layuot baru dan beri nama item_tipe_ketiga.xml dan berikut kode layout-nya.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/text_view_item_tipe_ketiga"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama lengkap" />
<EditText
android:id="@+id/edit_text_nama_lengkap_item_tipe_ketiga"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text_view_item_tipe_ketiga"/>
<Button
android:id="@+id/button_ok_item_tipe_ketiga"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/edit_text_nama_lengkap_item_tipe_ketiga"
android:text="OK" />
</RelativeLayout>
Layout Utama
Kemudian, pada layout utama atau activity_main kita tambahkan widget RecyclerView kedalamnya seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context="ysn.codepolitan_recyclerviewwithmultipleviewtypes.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view_main"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</RelativeLayout>
Adapter RecyclerView
Buat package baru di Java dan beri nama adapter. Selanjutnya, buat class baru di dalam package tersebut dan beri nama AdapterMain.java. Dan isikan source code berikut.
package ysn.codepolitan_recyclerviewwithmultipleviewtypes.adapter;
import android.content.Context;
import android.support.design.widget.Snackbar;
import android.support.v7.widget.RecyclerView;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
import ysn.codepolitan_recyclerviewwithmultipleviewtypes.R;
/**
* Created by root on 22/01/17.
*/
public class AdapterMain extends RecyclerView.Adapter<AdapterMain.ViewHolder> {
public static final int TYPE_1 = 1;
public static final int TYPE_2 = 2;
public static final int TYPE_3 = 3;
Context contetxt;
ArrayList<Integer> listViewType;
public AdapterMain(ArrayList<Integer> listViewType, Context contetxt) {
this.listViewType = listViewType;
this.contetxt = contetxt;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;
switch (viewType) {
case TYPE_1:
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tipe_pertama, null);
return new ItemPertamaViewHolder(view);
case TYPE_2:
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tipe_kedua, null);
return new ItemKeduaViewHolder(view);
case TYPE_3:
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tipe_ketiga, null);
return new ItemKetigaViewHolder(view);
default:
return null;
}
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
int viewType = listViewType.get(position);
switch (viewType) {
case TYPE_1:
ItemPertamaViewHolder itemPertamaViewHolder = (ItemPertamaViewHolder) holder;
itemPertamaViewHolder.textViewItemPertama.setText("View Type tipe pertama dengan position: " + position);
break;
case TYPE_2:
ItemKeduaViewHolder itemKeduaViewHolder = (ItemKeduaViewHolder) holder;
itemKeduaViewHolder.textViewItemKedua.setText("View Type tipe kedua dengan position: " + position);
break;
case TYPE_3:
ItemKetigaViewHolder itemKetigaViewHolder = (ItemKetigaViewHolder) holder;
itemKetigaViewHolder.textViewItemKetiga.setText("Nama lengkap[" + position + "]");
}
}
@Override
public int getItemCount() {
return listViewType.size();
}
@Override
public int getItemViewType(int position) {
return listViewType.get(position);
}
public static class ViewHolder extends RecyclerView.ViewHolder {
public ViewHolder(View itemView) {
super(itemView);
}
}
class ItemPertamaViewHolder extends ViewHolder {
// komponen
TextView textViewItemPertama;
public ItemPertamaViewHolder(View itemView) {
super(itemView);
textViewItemPertama = (TextView) itemView.findViewById(R.id.text_view_item_tipe_pertama);
}
}
class ItemKeduaViewHolder extends ViewHolder {
// komponen
TextView textViewItemKedua;
Button buttonOkItemKedua;
public ItemKeduaViewHolder(final View itemView) {
super(itemView);
textViewItemKedua = (TextView) itemView.findViewById(R.id.text_view_item_tipe_kedua);
buttonOkItemKedua = (Button) itemView.findViewById(R.id.button_ok_item_tipe_kedua);
buttonOkItemKedua.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(contetxt, textViewItemKedua.getText().toString(), Toast.LENGTH_LONG)
.show();
}
});
}
}
class ItemKetigaViewHolder extends ViewHolder {
// komponen
TextView textViewItemKetiga;
EditText editTextItemKetiga;
Button buttonItemKetiga;
public ItemKetigaViewHolder(View itemView) {
super(itemView);
textViewItemKetiga = (TextView) itemView.findViewById(R.id.text_view_item_tipe_ketiga);
editTextItemKetiga = (EditText) itemView.findViewById(R.id.edit_text_nama_lengkap_item_tipe_ketiga);
buttonItemKetiga = (Button) itemView.findViewById(R.id.button_ok_item_tipe_ketiga);
buttonItemKetiga.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (TextUtils.isEmpty(editTextItemKetiga.getText().toString())) {
Toast.makeText(contetxt, textViewItemKetiga.getText().toString() + " belum di isi", Toast.LENGTH_LONG)
.show();
editTextItemKetiga.setError("Belum di isi");
} else {
Toast.makeText(contetxt, editTextItemKetiga.getText().toString(), Toast.LENGTH_LONG)
.show();
}
}
});
}
}
}
Pada kode diatas, kita beri listener pada button di view type 2 dan 3 sehingga, nanti Anda akan bisa melihat dan tahu button mana yang ditekan oleh user.
public static final int TYPE_1 = 1;
public static final int TYPE_2 = 2;
public static final int TYPE_3 = 3;
Context contetxt;
ArrayList<Integer> listViewType;
Pada kode diatas, kita membuat 3 variable integer dengan modifier static. Hal ini berguna sebagai penanda pada ArrayList listViewType agar RecyclerView bisa menampilkan view type yang berbeda-beda.
MainActivity.java
Dan yang terakhir adalah masukkan kode berikut ke dalam MainActivity.java.
package ysn.codepolitan_recyclerviewwithmultipleviewtypes;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
import ysn.codepolitan_recyclerviewwithmultipleviewtypes.adapter.AdapterMain;
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerViewMain;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerViewMain = (RecyclerView) findViewById(R.id.recycler_view_main);
// Pada contoh kali ini kita akan membuat 10 item di dalam RecyclerView
ArrayList<Integer> listViewType = new ArrayList<>();
listViewType.add(AdapterMain.TYPE_1);
listViewType.add(AdapterMain.TYPE_2);
listViewType.add(AdapterMain.TYPE_3);
listViewType.add(AdapterMain.TYPE_2);
listViewType.add(AdapterMain.TYPE_3);
listViewType.add(AdapterMain.TYPE_1);
listViewType.add(AdapterMain.TYPE_1);
listViewType.add(AdapterMain.TYPE_3);
listViewType.add(AdapterMain.TYPE_2);
// Buat objek AdapterMain untuk recyclerViewMain
AdapterMain adapterMain = new AdapterMain(listViewType, this); // this adalah mengarah ke Context (MainActivity.this)
// Set layout manager recyclerViewMain
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
recyclerViewMain.setLayoutManager(layoutManager);
// Set adapter recyclerViewMain
recyclerViewMain.setAdapter(adapterMain);
}
}
Struktur Direktori Project
Output Program
Berikut adalah output program yang kita buat tadi. Memang agak sedikit jelek tampilannya tapi, yang perlu Anda pahami di tutorial ini adalah bahwa Anda sudah bisa membuat 2 view yang berbeda di RecyclerView. Untuk kedepannya, Anda sudah mudah untuk membuat berbagai macam layout yang Anda inginkan seperti membuat layout chat, layout timeline dan lain sebagainya.
