Modul Pertemuan 7 Fix

Recycler View : Teori
RecyclerView adalah sebuah komponen tampilan (widget) yang lebih canggih ketimbang
pendahulunya listview. Ia bersifat lebih fleksibel. RecyclerView memiliki kemampuan
untuk menampilkan data secara efisien dalam jumlah yang besar. Terlebih jika Anda
memiliki koleksi data dengan elemen yang mampu berubah-ubah sewaktu dijalankan
(runtime).
Gambar di atas menerangkan beberapa komponen yang harus Anda ketahui sebelum
menggunakan recyclerview.
1. RecyclerView dan LayoutManager : Komponen antarmuka yang bertugas untuk

menampilkan data set yang dimiliki di dalamnya. Layoutmanager akan mengatur
posisi tampilan data baik itu secara list (vertikal), grid (baris dan kolom) atau
staggeredgrid (grid yang memiliki susunan tak seragam / tak beraturan)
2. Adapter : Komponen yang akan mengatur bagaimana menampilkan data set ke
dalam RecyclerView. Di sinilah terjadi proses pengisian tampilan (ViewInflate) dari
file layout xml untuk tiap elemen dari data yang sebelumnya terpasang (bind) ke
dalam RecyclerView.
3. Dataset : Kumpulan data yang dimiliki dan ingin ditampilkan. Bisa berupa array, list
maupun obyek map.
4. Item Animator : Ini yang spesial. Kita bisa pasang animasi untuk tiap item di
dalamnya. Contoh animasi yang umum seperti penambahan (add) dan
penghapusan (removal) item. Kita akan mempelajari hal ini pada materi terpisah.
MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

Langkah-langkah mengimplementasikan recyclerview sebagai berikut :
1. Tambahkan dependencies komponen recyclerview pada file build.gradle level

modul.
2. Tambahkan obyek RecyclerView di berkas layout xml dari activity / fragment.
3. Definisikan model kelas (POJO) yang akan digunakan sebagai data source.
4. Buat berkas layout xml untuk baris item di RecyclerView.
5. Buat sebuah kelas adapter yang inherit ke RecyclerView.Adapter dan ViewHolder
untuk menampilkan tiap elemen data.
6. Definisikan obyek RecyclerView berikut dengan bentuk yang diinginkan (bisa
dalam bentuk list, grid, atau staggered) dan selanjutnya pasang obyek adapter
(binding) agar bisa menampilkan koleksi data ke dalam RecyclerView.
Anda dapat memahami lebih dalam materi recyclerview dengan membaca tautan berikut
ini:
 List Cards (https://developer.android.com/training/material/lists-cards.html)

 Recycler View
(https://developer.android.com/reference/android/support/v7/widget/RecyclerV
iew.html)

Latihan Recycler View : ListView
Pada codelab kali ini kalian akan mempelajari cara menampilkan data presiden Republik
Indonesia ke dalam sebuah Recyclerview. Beberapa poin yang akan diulas dalam materi
ini adalah :
1. Bagaimana menggunakan Recyclerview?
2. Berbagai macam Recyclerview seperti list, grid, dan card.
3. Membuat CustomItemOnClickListener pada Recyclerview.
4. Menambahkan menu pada Action Bar.
Contoh dari Recyclerview yang akan kita buat dalam dalam bentuk list, grid dan list
dengan bentuk kartu menggunakan cardview dimana semuanya berada dalam satu
halaman saja.
Logika Dasar
Melakukan klik ke button → memanggil fragment atau activity dengan atau tanpa
data → menampilkan activity atau fragment yang dituju

Codelab
1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:
Nama Project MyRecyclerView

Target & Minimum Target SDK Phone and Tablet, Api level 21
Tipe Activity Empty Activity
Activity Name MainActivity
1. Setelah terbentuk, tambahkan beberapa dependensi yang akan kita gunakan

pada file build.gradle (module: app) di bagian dependencies seperti berikut :
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:cardview-v7:28.0.0'
implementation 'de.hdodenhof:circleimageview:2.2.0'
implementation 'com.github.bumptech.glide:glide:4.8.0'
Sehingga secara keseluruhan berkas build.gradle(module: app) Anda akan seperti ini :
1. apply plugin: 'com.android.application'

2. android {
3. compileSdkVersion 28
4. buildToolsVersion "28.0.3"
5. defaultConfig {
6. applicationId "com.dicoding.picodiploma.myrecyclerview"
7. minSdkVersion 21
8. targetSdkVersion 28
9. versionCode 1
10. versionName "1.0"
11. testInstrumentationRunner
"android.support.test.runner.AndroidJUnitRunner"
12. }
13. buildTypes {
14. release {
15. minifyEnabled false
16. proguardFiles getDefaultProguardFile('proguard-
android.txt'), 'proguard-rules.pro'
17. }
18. }
19. }
20.
21. dependencies {
22. implementation fileTree(include: ['*.jar'], dir: 'libs')
23. androidTestImplementation('com.android.support.test.espresso:espre
sso-core:2.2.2', {
24. exclude group: 'com.android.support', module: 'support-
annotations'

25. })
26.
27. implementation 'com.android.support:cardview-v7:28.0.0'
28. implementation 'com.android.support:appcompat-v7:28.0.0'
29. implementation 'com.android.support:recyclerview-v7:28.0.0'
30. implementation 'de.hdodenhof:circleimageview:2.2.0'
31. implementation 'com.github.bumptech.glide:glide:4.8.0'
32.
33. testImplementation 'junit:junit:4.12'
34. }
2. Selanjutnya pada activity_main.xml lengkapi kodenya menjadi seperti berikut :
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.dicoding.listview.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_category"
android:layout_height="match_parent"
tools:listitem="@layout/item_row_president"/>
</RelativeLayout>
Akan ada tanda merah di @layout/item_row_president. Ini karena layout

item_row_president belum ditambahkan.
3. Saatnya kita membuat sebuah item tampilan dalam bentuk berkas layout xml
yang akan ditampilkan di RecyclerView. Karena data pertama kali akan
ditampilkan dalam bentuk list, maka kita buat layout dengan cara klik kanan
pada direktori layout → new → layout resource file dan kemudian beri nama
item_row_president.

4. Setelah terbentuk kita lengkapi tampilan tersebut menjadi seperti ini :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:padding="@dimen/activity_vertical_margin">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/img_item_photo"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginEnd="@dimen/activity_horizontal_margin"
tools:src="@android:color/darker_gray"/>
<LinearLayout
android:layout_toRightOf="@id/img_item_photo"
android:layout_toEndOf="@id/img_item_photo"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:id="@+id/tv_item_name"
tools:text="Soekarno"
android:textStyle="bold"
android:textSize="16sp"
android:layout_marginBottom="8dp"/>

<TextView
android:id="@+id/tv_item_remarks"
tools:text="Presiden Pertama RI"/>
</LinearLayout>
</RelativeLayout>
tools:text bisa kita gunakan untuk placeholder di dalam editor layout. Atribut ini tidak
akan terbawa saat run-time dan hanya akan nampak di dalam preview editor saja.
Akan ada yang error pada bagian @dimen/activity_horizontal_margin, seperti pada

modul sebelumnya kita perlu menambahkan berkas dimens.xml secara manual di
dalam res → values. Dan isikan berkas dimens.xml seperti berikut.
<resources>

<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
</resources>
5. Kemudian buat sebuah kelas model data bernama President.
Setelah itu kita bisa menambahkan kode menjadi seperti berikut :

public class President implements Parcelable {
private String name, remarks, photo;
public String getName() {

return name;
}
public void setName(String name) {
this.name = name;
}
public String getRemarks() {
return remarks;
}
public void setRemarks(String remarks) {
this.remarks = remarks;
}
public String getPhoto() {
return photo;
}
public void setPhoto(String photo) {
this.photo = photo;
}
6. Setelah selesai kita akan membuat beberapa kelas terkait koleksi data yang
ingin ditampilkan. Buat kelas baru dengan nama PresidentData.
Setelah itu kita bisa menambahkan kode menjadi seperti berikut :

public class PresidentData {
public static String[][] data = new String[][]{
{"Soekarno", "Presiden Pertama RI",
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Presiden_Sukarn
o.jpg/418px-Presiden_Sukarno.jpg"},
{"Soeharto", "Presiden Kedua RI",
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/President_Suhar
to%2C_1993.jpg/468px-President_Suharto%2C_1993.jpg"},
{"Bacharuddin Jusuf Habibie", "Presiden Ketiga RI",
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Bacharuddin_Jus
uf_Habibie_official_portrait.jpg/520px-
Bacharuddin_Jusuf_Habibie_official_portrait.jpg"},
{"Abdurrahman Wahid", "Presiden Keempat RI",
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/President_Abdur
rahman_Wahid_-_Indonesia.jpg/486px-President_Abdurrahman_Wahid_-
_Indonesia.jpg"},
{"Megawati Soekarnoputri", "Presiden Kelima RI",
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/President_Megaw
ati_Sukarnoputri_-_Indonesia.jpg/540px-President_Megawati_Sukarnoputri_-
_Indonesia.jpg"},
{"Susilo Bambang Yudhoyono", "Presiden Keenam RI",
"https://upload.wikimedia.org/wikipedia/commons/5/58/Presiden_Susilo_Bamba
ng_Yudhoyono.png"},
{"Joko Widodo", "Presiden Ketujuh RI",
"https://upload.wikimedia.org/wikipedia/commons/1/1c/Joko_Widodo_2014_offi
cial_portrait.jpg"}
};
public static ArrayList<President> getListData(){

President president = null;
ArrayList<President> list = new ArrayList<>();
for (String[] aData : data) {
president = new President();
president.setName(aData[0]);
president.setRemarks(aData[1]);
president.setPhoto(aData[2]);
list.add(president);
}
return list;
}
}
7. Sekarang kita akan membuat sebuah adapter yang akan memformat

bagaimana tiap elemen dari koleksi data ditampilkan. Buat kelas adapter
secara manual dengan klik kanan pada package utama → new → Java Class
dan beri nama ListPresidentAdapter.

Setelah kelas adapter berhasil dibuat, lengkapi kodenya menjadi seperti berikut :
public class ListPresidentAdapter extends

RecyclerView.Adapter<ListPresidentAdapter.CategoryViewHolder> {
private Context context;
private ArrayList<President> listPresident;
private ArrayList<President> getListPresident() {

return listPresident;
}
void setListPresident(ArrayList<President> listPresident) {

this.listPresident = listPresident;
}
ListPresidentAdapter(Context context) {
this.context = context;
}
@NonNull
@Override
public CategoryViewHolder onCreateViewHolder(@NonNull ViewGroup
viewGroup, int i) {
View itemRow =
LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_row_pres
ident, viewGroup, false);
return new CategoryViewHolder(itemRow);
}
@Override
public void onBindViewHolder(@NonNull CategoryViewHolder

categoryViewHolder, int position) {
categoryViewHolder.tvName.setText(getListPresident().get(position).getName
());
categoryViewHolder.tvRemarks.setText(getListPresident().get(position).getR
emarks());
Glide.with(context)
.load(getListPresident().get(position).getPhoto())
.apply(new RequestOptions().override(55, 55))
.into(categoryViewHolder.imgPhoto);
}
@Override
public int getItemCount() {
return getListPresident().size();
}
class CategoryViewHolder extends RecyclerView.ViewHolder {

TextView tvName;
TextView tvRemarks;
ImageView imgPhoto;
CategoryViewHolder(@NonNull View itemView) {

super(itemView);
tvName = itemView.findViewById(R.id.tv_item_name);
tvRemarks = itemView.findViewById(R.id.tv_item_remarks);
imgPhoto = itemView.findViewById(R.id.img_item_photo);
}
}
}
8. Berikutnya, kita akan tambahkan script berikut pada MainActivity.java
public class MainActivity extends AppCompatActivity {

private RecyclerView rvCategory;
private ArrayList<President> list = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rvCategory = findViewById(R.id.rv_category);
rvCategory.setHasFixedSize(true);
list.addAll(PresidentData.getListData());
showRecyclerList();
}

private void showRecyclerList(){
rvCategory.setLayoutManager(new LinearLayoutManager(this));
ListPresidentAdapter listPresidentAdapter = new
ListPresidentAdapter(this);
listPresidentAdapter.setListPresident(list);
rvCategory.setAdapter(listPresidentAdapter);
}
}
9. Karena data gambar yang kita miliki berasal dari internet maka kita harus
menambahkan sebuah permission ke dalam file AndroidManifest.xml yang kita
miliki. Tambahkan satu baru berikut di atas tag <application>.
<uses-permission android:name="android.permission.INTERNET" />
10. Jalankan aplikasi yang dibuat. Hasilnya kurang lebih akan seperti gambar di
bawah ini :

Sekarang mari kita buat sebuah RecyclerView dengan memanfaatkan fasilitas menu.
11. Langkah pertama adalah dengan membuat resource directory terkait. Resource
directory menu secara bawaan tidak disediakan. Kita harus membuatnya
terlebih dahulu. Klik kanan pada direktori res → new → android resource
directory. Setelah muncul dialog box seperti di bawah ini, isikan menu pada field
directory name. Klik OK untuk menyelesaikannya.
Sebuah RecyclerView untuk menampilkan data Presiden Republik Indonesia sudah

tercipta.
12. Kemudian, klik kanan pada direktori tersebut → new → menu resource file. Beri
nama menu_main pada field file name.

Setelah itu, lengkapi kodenya menjadi seperti berikut :

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_list"
android:title="List"
app:showAsAction="never"/>
<item
android:id="@+id/action_grid"
android:title="Grid"
<item
android:id="@+id/action_cardview"
android:title="with CardView"
</menu>

Jangan lupa untuk memindahkan text ke strings.xml. Caranya alt+enter → Extract
string resource.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_list"
android:title="@string/list"
app:showAsAction="never" />
<item
android:id="@+id/action_grid"
android:title="@string/grid"
<item
android:id="@+id/action_cardview"
android:title="@string/with_cardview"
</menu>
Dan pada bagian res → values → strings.xml.
<resources>
<string name="app_name">MyRecyclerView</string>
<string name="list">List</string>
<string name="grid">Grid</string>
<string name="with_cardview">with CardView</string>
</resources>

13. Setelah selesai, saatnya kita pasang menu tersebut di MainActivity dengan
menambahkan dua metode berikut :

@Override
rvCategory = findViewById(R.id.rv_category);
rvCategory.setHasFixedSize(true);
list.addAll(PresidentData.getListData());
showRecyclerList();
}

}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.action_list:
break;
case R.id.action_grid:
break;
case R.id.action_cardview:
break;
}
return super.onOptionsItemSelected(item);
}
}
Coba jalankan aplikasinya…..

Recycler View : GridView
Pada modul sebelumnya, kita telah membuat menu pada aplikasi daftar presiden yang
sedang kita buat. Mari kita lanjutkan pembuatan bentuk dari RecyclerView dalam
bentuk grid.
1. Buat sebuah berkas layout xml baru dengan nama item_grid_president.
Setelah itu lengkapi kodenya menjadi seperti berikut :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ImageView
android:layout_margin="1dp"
android:scaleType="centerCrop"
tools:src="@color/colorAccent" />
</LinearLayout>
2. Setelah selesai, lanjut ke pembuatan Adapter untuk file layout xml tersebut. Buat
sebuah kelas baru dengan nama GridPresidentAdapter.

Kemudian kita lakukan hal yang sama dengan pembuatan ListPresidentAdapter,
lengkapi kodenya menjadi seperti berikut :
public class GridPresidentAdapter extends

RecyclerView.Adapter<GridPresidentAdapter.GridViewHolder> {

}
public void setListPresident(ArrayList<President> listPresident) {

}
public GridPresidentAdapter(Context context) {

}
@NonNull
@Override
public GridViewHolder onCreateViewHolder(@NonNull ViewGroup parent,
int viewType) {
View view =
LayoutInflater.from(parent.getContext()).inflate(R.layout.item_grid_presid
ent, parent, false);
return new GridViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull GridViewHolder holder, int
position) {
Glide.with(context)
.load(getListPresident().get(position).getPhoto())
.into(holder.imgPhoto);
}
@Override
}
class GridViewHolder extends RecyclerView.ViewHolder {

ImageView imgPhoto;
GridViewHolder(View itemView) {
super(itemView);
}
}
}
3. Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan

menambahkan satu metode berikut :
private void showRecyclerGrid(){

rvCategory.setLayoutManager(new GridLayoutManager(this, 2));
GridPresidentAdapter gridPresidentAdapter = new
GridPresidentAdapter(this);
gridPresidentAdapter.setListPresident(list);
rvCategory.setAdapter(gridPresidentAdapter);
}
Dan lengkapi metode onOptionItemSelected() menjadi seperti berikut :
@Override
showRecyclerList();
break;
showRecyclerGrid();
break;
break;
}

}
4. Ini akan mengubah tampilan ketika pengguna memilih salah satu bentuk layout.
Sekarang jalankan kembali aplikasinya. Akan ada dua bentuk dari RecyclerView
yaitu list dan grid.

Recycler View : CardView
Pada modul ini, kita akan membuat bentuk RecyclerView dengan komponen CardView.
Komponen ini akan menampilkan data selayaknya sebuah kartu. Pendekatan ini hanya
diperuntukkan bila item list memiliki lebih dari satu action.
1. Baik. Pertama, buat kembali berkas layout xml item_cardview_president.
Setelah itu lengkapi kodenya menjadi seperti berikut :

<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:id="@+id/card_view"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:padding="8dp">

<ImageView
android:layout_width="150dp"
android:scaleType="centerCrop"
tools:src="@color/colorAccent"/>
<TextView
android:id="@+id/tv_item_name"
android:textStyle="bold"
tools:text="Soekarno"
android:layout_marginTop="@dimen/activity_vertical_margin"
android:layout_marginRight="@dimen/activity_vertical_margin"
android:layout_marginLeft="@dimen/activity_vertical_margin"/>
<TextView
android:layout_below="@id/tv_item_name"
android:id="@+id/tv_item_remarks"
tools:text="Remarks"
android:layout_marginRight="@dimen/activity_vertical_margin"
android:layout_marginLeft="@dimen/activity_vertical_margin"/>
<LinearLayout
android:layout_alignParentBottom="true"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginStart="@dimen/activity_horizontal_margin"
android:orientation="horizontal">
<Button
android:id="@+id/btn_set_favorite"
style="@style/Widget.AppCompat.Button.Colored"
android:text="@string/favorite"
android:layout_weight="1"/>
<Button
android:id="@+id/btn_set_share"
style="@style/Widget.AppCompat.Button.Colored"
android:text="@string/share"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>

2. Selanjutnya kita buat terlebih dahulu kelas baru dengan nama
CustomOnItemClickListener.
Kelas ini nantinya yang berfungsi untuk menangani aksi ketika itemnya di klik.
Kodenya menjadi seperti berikut :
public class CustomOnItemClickListener implements View.OnClickListener {

private int position;
private OnItemClickCallback onItemClickCallback;
CustomOnItemClickListener(int position, OnItemClickCallback
onItemClickCallback) {
this.position = position;
this.onItemClickCallback = onItemClickCallback;
}
@Override
public void onClick(View view) {
onItemClickCallback.onItemClicked(view, position);
}
public interface OnItemClickCallback {
void onItemClicked(View view, int position);
}
}

3. Setelah selesai, buat kembali kelas Adapter dengan nama
CardViewPresidentAdapter.
Kemudian kita lakukan hal yang sama dengan pembuatan ListPresidentAdapter,

lengkapi kodenya menjadi seperti berikut :
public class CardViewPresidentAdapter extends

RecyclerView.Adapter<CardViewPresidentAdapter.CardViewViewHolder>{
}
public void setListPresident(ArrayList<President> listPresident) {
}
public CardViewPresidentAdapter(Context context) {
}
@NonNull
@Override
public CardViewViewHolder onCreateViewHolder(@NonNull ViewGroup
viewGroup, int i) {
View view =
LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_cardview_pr
esident, viewGroup, false);
return new CardViewViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull CardViewViewHolder
cardViewViewHolder, int i) {
President p = getListPresident().get(i);
Glide.with(context)
.load(p.getPhoto())
.into(cardViewViewHolder.imgPhoto);
cardViewViewHolder.tvName.setText(p.getName());
cardViewViewHolder.tvRemarks.setText(p.getRemarks());
cardViewViewHolder.btnFavorite.setOnClickListener(new
CustomOnItemClickListener(i, new
CustomOnItemClickListener.OnItemClickCallback() {
@Override
public void onItemClicked(View view, int position) {
Toast.makeText(context, "Favorite
"+getListPresident().get(position).getName(), Toast.LENGTH_SHORT).show();
}
}));
cardViewViewHolder.btnShare.setOnClickListener(new
CustomOnItemClickListener(i, new
CustomOnItemClickListener.OnItemClickCallback() {
@Override
public void onItemClicked(View view, int position) {
Toast.makeText(context, "Share
"+getListPresident().get(position).getName(), Toast.LENGTH_SHORT).show();
}
}));
}
@Override
}
class CardViewViewHolder extends RecyclerView.ViewHolder{

ImageView imgPhoto;
TextView tvName, tvRemarks;
Button btnFavorite, btnShare;
CardViewViewHolder(View itemView) {
super(itemView);
tvName = itemView.findViewById(R.id.tv_item_name);
tvRemarks = itemView.findViewById(R.id.tv_item_remarks);
btnFavorite = itemView.findViewById(R.id.btn_set_favorite);
btnShare = itemView.findViewById(R.id.btn_set_share);
}
}
}
4. Setelah selesai, kita perlu menambahkan satu metode lagi untuk menampilkan
bentuk RecyclerView ini. Caranya lengkapi kode pada MainActivity menjadi seperti
berikut:
private void showRecyclerCardView(){

CardViewPresidentAdapter cardViewPresidentAdapter = new
CardViewPresidentAdapter(this);

cardViewPresidentAdapter.setListPresident(list);
rvCategory.setAdapter(cardViewPresidentAdapter);
}
Dan update metode onOptionsItemSelected() menjadi seperti berikut :

showRecyclerList();
break;
showRecyclerGrid();
break;
showRecyclerCardView();
break;
}
}
}
5. Jalankan kembali aplikasinya. Seharusnya Anda sudah bisa menampilkan tiga

bentuk RecyclerView yang telah kita rencanakan sebelumnya.

6. Untuk mempercantik tampilan dan memenuhi target di awal, kita akan melakukan
penambahan metode untuk mengubah judul halaman setiap kita melakukan
perubahan bentuk dari RecyclerView.
private void setActionBarTitle(String title){

getSupportActionBar().setTitle(title);
}
Kemudian tambahkan variable baru diatas metode onCreate() seperti berikut :

private String title = "Mode List";
@Override
Dan kita update kembali metode onOptionsItemSelected() sehingga menjadi

seperti berikut :

setActionBarTitle("Mode List");
showRecyclerList();
break;
setActionBarTitle("Mode Grid");
showRecyclerGrid();
break;
setActionBarTitle("Mode CardView");
showRecyclerCardView();
break;
}
}
}
Dan pada metode onCreate() tambahkan baris ini setActionBarTitle("Mode List");

sebelum kita memanggil metode showRecyclerList();

7. Jalankan kembali aplikasinya. Sekarang judul halaman akan berubah seiring
perubahan bentuk RecyclerView.

Recycler View : ItemOnClickListener
Listview memiliki listener untuk melakukan sebuah aksi ketika salah satu item pada list
dipilih. Sementara itu, pada RecyclerView kita harus membuatnya secara manual.
Pada modul ini, kita akan mengupas bagaimana caranya menangani kejadian ketika
salah satu item pada list di Recyclerview dipilih.
1. Pertama buat berkas bernama ids pada direktori values. Klik kanan pada values →
new → value resource file dan isikan ids pada field file name.
Setelah terbentuk, lengkapi kodenya menjadi seperti berikut :

<resources>
<item name="item_click_support" type="id" />
</resources>

2. Selanjutnya buat kelas baru dengan nama ItemClickSupport.
Setelah terbentuk, lengkapi kodenya menjadi seperti berikut :
public class ItemClickSupport {

private final RecyclerView mRecyclerView;
private OnItemClickListener mOnItemClickListener;
private OnItemLongClickListener mOnItemLongClickListener;
private View.OnClickListener mOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mOnItemClickListener != null) {
RecyclerView.ViewHolder holder =
mRecyclerView.getChildViewHolder(v);
mOnItemClickListener.onItemClicked(mRecyclerView,
holder.getAdapterPosition(), v);
}
}
};
private View.OnLongClickListener mOnLongClickListener = new
View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if (mOnItemLongClickListener != null) {
RecyclerView.ViewHolder holder =
mRecyclerView.getChildViewHolder(v);

return mOnItemLongClickListener.onItemLongClicked(mRecyclerView,
holder.getAdapterPosition(), v);
}
return false;
}
};
private RecyclerView.OnChildAttachStateChangeListener mAttachListener
= new RecyclerView.OnChildAttachStateChangeListener() {
@Override
public void onChildViewAttachedToWindow(@NonNull View view) {
if (mOnItemClickListener != null) {
view.setOnClickListener(mOnClickListener);
}
if (mOnItemLongClickListener != null) {
view.setOnLongClickListener(mOnLongClickListener);
}
}
@Override
public void onChildViewDetachedFromWindow(@NonNull View view) {
}
};
private ItemClickSupport(RecyclerView recyclerView) {
mRecyclerView = recyclerView;
mRecyclerView.setTag(R.id.item_click_support, this);
mRecyclerView.addOnChildAttachStateChangeListener(mAttachListener);
}
public static ItemClickSupport addTo(RecyclerView view) {
ItemClickSupport support = (ItemClickSupport)
view.getTag(R.id.item_click_support);
if (support == null) {
support = new ItemClickSupport(view);
}
return support;
}
public static ItemClickSupport removeFrom(RecyclerView view) {
ItemClickSupport support = (ItemClickSupport)
view.getTag(R.id.item_click_support);
if (support != null) {
support.detach(view);
}
return support;
}
public void setOnItemClickListener(OnItemClickListener listener) {
mOnItemClickListener = listener;
}
public void setOnItemLongClickListener(OnItemLongClickListener listener) {
mOnItemLongClickListener = listener;
}
private void detach(RecyclerView view) {
view.removeOnChildAttachStateChangeListener(mAttachListener);
view.setTag(R.id.item_click_support, null);
}
public interface OnItemClickListener {
void onItemClicked(RecyclerView recyclerView, int position, View v);
}
public interface OnItemLongClickListener {
boolean onItemLongClicked(RecyclerView recyclerView, int position, View v);
}
}

Pada prinsipnya, kelas ItemClickSupport akan menangani kejadian ketika
pengguna menekan (on clicked) atau melakukan klik yang lama (long clicked)
pada salah satu item pada RecyclerView.
3. Setelah selesai, mari kita pasang pada MainActivity. Tambahkan satu metode ini
untuk menandakan item mana yang dipilih.
private void showSelectedPresident(President president){

Toast.makeText(this, "Kamu memilih "+president.getName(),
Toast.LENGTH_SHORT).show();
}
Kemudian tambahkan pada masing-masing metode di list dan grid seperti berikut:

ItemClickSupport.addTo(rvCategory).setOnItemClickListener(new
ItemClickSupport.OnItemClickListener() {
@Override
public void onItemClicked(RecyclerView recyclerView, int position,
View v) {
showSelectedPresident(list.get(position));
}
});
}
private void showRecyclerGrid(){

rvCategory.setLayoutManager(new GridLayoutManager(this, 2));
GridPresidentAdapter gridPresidentAdapter = new
GridPresidentAdapter(this);
gridPresidentAdapter.setListPresident(list);
rvCategory.setAdapter(gridPresidentAdapter);
ItemClickSupport.addTo(rvCategory).setOnItemClickListener(new
ItemClickSupport.OnItemClickListener() {
@Override
public void onItemClicked(RecyclerView recyclerView, int position,
View v) {
showSelectedPresident(list.get(position));
}
});
}

4. Sekarang jalankan kembali aplikasinya. Klik salah satu item pada RecyclerView
bentuk list dan grid. Seharusnya sebuah obyek Toast akan tampil ketika salah satu
item ditekan.

Modul Pertemuan 7 Fix

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pertemuan 7 Fix

Diunggah oleh

Hak Cipta:

Format Tersedia

Recycler View : Teori

1. RecyclerView dan LayoutManager : Komponen antarmuka yang bertugas untuk

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

1. Tambahkan dependencies komponen recyclerview pada file build.gradle level

 List Cards (https://developer.android.com/training/material/lists-cards.html)

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

Nama Project MyRecyclerView

1. Setelah terbentuk, tambahkan beberapa dependensi yang akan kita gunakan

1. apply plugin: 'com.android.application'

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

2. Selanjutnya pada activity_main.xml lengkapi kodenya menjadi seperti berikut :

<?xml version="1.0" encoding="utf-8"?>

Akan ada tanda merah di @layout/item_row_president. Ini karena layout

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

<?xml version="1.0" encoding="utf-8"?>

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

Akan ada yang error pada bagian @dimen/activity_horizontal_margin, seperti pada

5. Kemudian buat sebuah kelas model data bernama President.

Setelah itu kita bisa menambahkan kode menjadi seperti berikut :

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

public String getName() {

Setelah itu kita bisa menambahkan kode menjadi seperti berikut :

public static ArrayList<President> getListData(){

7. Sekarang kita akan membuat sebuah adapter yang akan memformat

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

public class ListPresidentAdapter extends

private ArrayList<President> getListPresident() {

void setListPresident(ArrayList<President> listPresident) {

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

class CategoryViewHolder extends RecyclerView.ViewHolder {

CategoryViewHolder(@NonNull View itemView) {

8. Berikutnya, kita akan tambahkan script berikut pada MainActivity.java

public class MainActivity extends AppCompatActivity {

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

<uses-permission android:name="android.permission.INTERNET" />

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

Sebuah RecyclerView untuk menampilkan data Presiden Republik Indonesia sudah

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

<?xml version="1.0" encoding="utf-8"?>

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

<?xml version="1.0" encoding="utf-8"?>

Dan pada bagian res → values → strings.xml.

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

public class MainActivity extends AppCompatActivity {

private void showRecyclerList(){

Coba jalankan aplikasinya…..

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

1. Buat sebuah berkas layout xml baru dengan nama item_grid_president.

Setelah itu lengkapi kodenya menjadi seperti berikut :

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

public class GridPresidentAdapter extends

private ArrayList<President> getListPresident() {

public void setListPresident(ArrayList<President> listPresident) {

public GridPresidentAdapter(Context context) {

class GridViewHolder extends RecyclerView.ViewHolder {

3. Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan

private void showRecyclerGrid(){

Dan lengkapi metode onOptionItemSelected() menjadi seperti berikut :

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM

Setelah itu lengkapi kodenya menjadi seperti berikut :

<?xml version="1.0" encoding="utf-8"?>

MODUL APLIKASI MOBILE - RECYCLERVIEW JUNADHI, M.KOM