Codelab RecyclerView Mode Grid

Pada modul sebelumnya, kita telah membuat menu pada aplikasi daftar
Pahlawan 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_hero.

Setelah itu lengkapi kodenya menjadi seperti berikut :

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

3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro

id"

4. xmlns:tools="http://schemas.android.com/tools"

5. android:layout_width="match_parent"

6. android:layout_height="wrap_content"

7. android:orientation="vertical">

8.

9. <ImageView

10. android:id="@+id/img_item_photo"
11. android:layout_width="match_parent"

12. android:layout_height="250dp"

13. android:layout_margin="1dp"

14. android:scaleType="centerCrop"

15. tools:src="@tools:sample/avatars" />

</LinearLayout>

2. Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout xml

tersebut. Buat sebuah kelas baru dengan nama GridHeroAdapter.

Kemudian kita lakukan hal yang sama dengan

pembuatan ListHeroAdapter, lengkapi kodenya menjadi seperti
berikut:

a. Java
3. public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAda

pter.GridViewHolder> {

Setelah itu kita akan perbaiki eror dengan cara

menekan alt+enter atau klik lampu merahnya. Setelah memperbaiki
maka akan menjadi seperi ini:

a. Java
public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAda

pter.GridViewHolder> {

@NonNull

@Override

public GridViewHolder onCreateViewHolder(@NonNull ViewGroup paren

t, int viewType) {

return null;

@Override

public void onBindViewHolder(@NonNull GridViewHolder gridViewHold

er, int position) {

@Override

public int getItemCount() {

return 0;

public class GridViewHolder extends RecyclerView.ViewHolder {

public GridViewHolder(@NonNull View itemView) {

super(itemView);

}
}

Kemudian buatlah constructor untuk list seperti ini:

b. Java

public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAda

pter.GridViewHolder> {

private ArrayList<Hero> listHero;

public GridHeroAdapter(ArrayList<Hero> list) {

this.listHero = list;

...

Setelah itu kita bisa melengkapi kode kode hasil dari

turunan RecyclerView.Adapter. Maka kode lengkap dari
kelas GridHeroAdapter sebagai berikut:

c. Java

public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAda

pter.GridViewHolder> {

private ArrayList<Hero> listHero;

public GridHeroAdapter(ArrayList<Hero> list) {

this.listHero = list;
 }

@NonNull

@Override

public GridViewHolder onCreateViewHolder(@NonNull ViewGroup paren

t, int viewType) {

View view = LayoutInflater.from(parent.getContext()).inflate(

R.layout.item_grid_hero, parent, false);

return new GridViewHolder(view);

@Override

public void onBindViewHolder(@NonNull final GridViewHolder holder

, int position) {

Glide.with(holder.itemView.getContext())

.load(listHero.get(position).getPhoto())

.apply(new RequestOptions().override(350, 550))

.into(holder.imgPhoto);

@Override

public int getItemCount() {

return listHero.size();

}
 class GridViewHolder extends RecyclerView.ViewHolder {

ImageView imgPhoto;

GridViewHolder(View itemView) {

super(itemView);

imgPhoto = itemView.findViewById(R.id.img_item_photo);

4. Setelah semuanya selesai, mari kita pasang lagi

di MainActivity dengan menambahkan satu metode berikut:
a. Java
5. private void showRecyclerGrid(){

6. rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));

7. GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);

8. rvHeroes.setAdapter(gridHeroAdapter);

Dan lengkapi metode setMode() menjadi seperti berikut:

a. Java

public void setMode(int selectedMode) {

switch (selectedMode) {

case R.id.action_list:

showRecyclerList();
 break;

case R.id.action_grid:

showRecyclerGrid();

break;

case R.id.action_cardview:

break;

5. 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.

Codelab RecyclerView dengan 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. Pertama, buat kembali berkas layout xml item_cardview_hero.

Jangan lupa untuk mengganti Root element menjadi CardView.
Setelah itu lengkapi kodenya menjadi seperti berikut:
1. <?xml version="1.0" encoding="utf-8"?>

2. <androidx.cardview.widget.CardView xmlns:android="http://schema

s.android.com/apk/res/android"

3. xmlns:card_view="http://schemas.android.com/apk/res-auto"

4. xmlns:tools="http://schemas.android.com/tools"

5. android:id="@+id/card_view"

6. android:layout_width="match_parent"

7. android:layout_height="wrap_content"

8. android:layout_gravity="center"

9. android:layout_marginLeft="8dp"

10. android:layout_marginTop="4dp"

11. android:layout_marginRight="8dp"

12. android:layout_marginBottom="4dp"

13. card_view:cardCornerRadius="4dp">
14.

15. <RelativeLayout

16. android:layout_width="match_parent"

17. android:layout_height="200dp"

18. android:padding="8dp">

19.

20. <ImageView

21. android:id="@+id/img_item_photo"

22. android:layout_width="150dp"

23. android:layout_height="220dp"

24. android:layout_marginBottom="4dp"

25. android:scaleType="centerCrop"

26. tools:src="@tools:sample/avatars" />

27.

28. <TextView

29. android:id="@+id/tv_item_name"

30. android:layout_width="match_parent"

31. android:layout_height="wrap_content"

32. android:layout_marginLeft="16dp"

33. android:layout_marginTop="16dp"

34. android:layout_marginRight="16dp"

35. android:layout_marginBottom="8dp"

36. android:layout_toEndOf="@id/img_item_photo"

37. android:layout_toRightOf="@id/img_item_photo"

38. android:textSize="16sp"
39. android:textStyle="bold"

40. tools:text="@string/heroes_name" />

41.

42. <TextView

43. android:id="@+id/tv_item_detail"

44. android:layout_width="match_parent"

45. android:layout_height="match_parent"

46. android:layout_above="@+id/layout_button"

47. android:layout_below="@id/tv_item_name"

48. android:layout_marginLeft="16dp"

49. android:layout_marginRight="16dp"

50. android:layout_toEndOf="@id/img_item_photo"

51. android:layout_toRightOf="@id/img_item_photo"

52. android:ellipsize="end"

53. android:maxLines="5"

54. tools:text="@string/detail" />

55.

56. <LinearLayout

57. android:id="@+id/layout_button"

58. android:layout_width="match_parent"

59. android:layout_height="wrap_content"

60. android:layout_alignParentBottom="true"

61. android:layout_marginStart="16dp"

62. android:layout_marginLeft="16dp"

63. android:layout_toEndOf="@id/img_item_photo"
64. android:layout_toRightOf="@id/img_item_photo"

65. android:orientation="horizontal">

66.

67. <Button

68. android:id="@+id/btn_set_favorite"

69. style="@style/Widget.AppCompat.Button.Color

ed"

70. android:layout_width="match_parent"

71. android:layout_height="wrap_content"

72. android:layout_weight="1"

73. android:text="@string/favorite"

74. android:textSize="12sp" />

75.

76. <Button

77. android:id="@+id/btn_set_share"

78. style="@style/Widget.AppCompat.Button.Color

ed"

79. android:layout_width="match_parent"

80. android:layout_height="wrap_content"

81. android:layout_weight="1"

82. android:text="@string/share"

83. android:textSize="12sp" />

84. </LinearLayout>

85. </RelativeLayout>

86. </androidx.cardview.widget.CardView>
2. Setelah selesai, buat kembali kelas Adapter dengan
nama CardViewHeroAdapter.

Kemudian kita lakukan hal yang sama dengan

pembuatan LisHeroAdapter. Lengkapi kodenya menjadi seperti
berikut:

o Java
2. public class CardViewHeroAdapter extends RecyclerView.Adapter<C

ardViewHeroAdapter.CardViewViewHolder>{

3. }

Setelah itu kita akan perbaiki eror dengan cara

menekan alt+enter atau klik lampu merahnya. Setelah
memperbaiki maka akan menjadi seperi ini:

o Java
5. public class CardViewHeroAdapter extends RecyclerView.Adapter<C

ardViewHeroAdapter.CardViewViewHolder>{

6. @NonNull

7. @Override

8. public CardViewViewHolder onCreateViewHolder(@NonNull ViewG

roup parent, int viewType) {

9. return null;

10. }

11.
 12. @Override

13. public void onBindViewHolder(@NonNull CardViewViewHolde

r cardViewViewHolder, int position) {

14.

15. }

16.

17. @Override

18. public int getItemCount() {

19. return 0;

20. }

21.

22. public class CardViewViewHolder extends RecyclerView.Vi

ewHolder {

23. public CardViewViewHolder(@NonNull View itemView) {

24. super(itemView);

25. }

26. }

27. }

Kemudian buatlah dan constructor untuk list seperti ini:

o Java
29. public class CardViewHeroAdapter extends RecyclerView.Adapt

er<CardViewHeroAdapter.CardViewViewHolder>{

30. private ArrayList<Hero> listHero;

31.
 32. public CardViewHeroAdapter(ArrayList<Hero> list) {

33. this.listHero = list;

34. }

35.

36. ...

37. }

Setelah itu kita bisa melengkapi kode kode hasil dari

turunan RecyclerView.Adapter. Maka kode lengkap dari
kelas CardViewHeroAdapter sebagai berikut:

o Java
39. public class CardViewHeroAdapter extends RecyclerView.Adapt

er<CardViewHeroAdapter.CardViewViewHolder> {

40. private ArrayList<Hero> listHero;

41.

42. public CardViewHeroAdapter(ArrayList<Hero> list) {

43. this.listHero = list;

44. }

45.

46. @NonNull

47. @Override

48. public CardViewViewHolder onCreateViewHolder(@NonNull V

iewGroup parent, int viewType) {

49. View view = LayoutInflater.from(parent.getContext()

).inflate(R.layout.item_cardview_hero, parent, false);

50. return new CardViewViewHolder(view);

51. }

52.

53. @Override

54. public void onBindViewHolder(@NonNull final CardViewVie

wHolder holder, int position) {

55.

56. Hero hero = listHero.get(position);

57.

58. Glide.with(holder.itemView.getContext())

59. .load(hero.getPhoto())

60. .apply(new RequestOptions().override(350, 5

50))

61. .into(holder.imgPhoto);

62.

63. holder.tvName.setText(hero.getName());

64. holder.tvDetail.setText(hero.getDetail());

65.

66. holder.btnFavorite.setOnClickListener(new View.OnCl

ickListener() {

67. @Override

68. public void onClick(View v) {

69. Toast.makeText(holder.itemView.getContext()

, "Favorite " +

70. listHero.get(holder.getAdapterPosit

ion()).getName(), Toast.LENGTH_SHORT).show();
71.

72. }

73. });

74.

75. holder.btnShare.setOnClickListener(new View.OnClick

Listener() {

76. @Override

77. public void onClick(View v) {

78. Toast.makeText(holder.itemView.getContext()

, "Share " +

79. listHero.get(holder.getAdapterPosit

ion()).getName(), Toast.LENGTH_SHORT).show();

80. }

81. });

82. }

83.

84. @Override

85. public int getItemCount() {

86. return listHero.size();

87. }

88.

89. class CardViewViewHolder extends RecyclerView.ViewHolde

r {

90. ImageView imgPhoto;

91. TextView tvName, tvDetail;

 92. Button btnFavorite, btnShare;

93.

94. CardViewViewHolder(View itemView) {

95. super(itemView);

96. imgPhoto = itemView.findViewById(R.id.img_item_

photo);

97. tvName = itemView.findViewById(R.id.tv_item_nam

e);

98. tvDetail = itemView.findViewById(R.id.tv_item_d

etail);

99. btnFavorite = itemView.findViewById(R.id.btn_se

t_favorite);

100. btnShare = itemView.findViewById(R.id.btn_set_s

hare);

101. }

102. }

103. }

3. Setelah selesai, kita perlu menambahkan satu metode lagi untuk

menampilkan bentuk RecyclerView ini. Caranya lengkapi kode
pada MainActivity menjadi seperti berikut:
o Java
1. private void showRecyclerCardView(){

2. rvHeroes.setLayoutManager(new LinearLayoutManager(this));

3. CardViewHeroAdapter cardViewHeroAdapter = new CardViewHeroA

dapter(list);
 4. rvHeroes.setAdapter(cardViewHeroAdapter);

5. }

Dan update metode onOptionsItemSelected() menjadi seperti berikut:

o Java
7. public void setMode(int selectedMode) {

8. switch (selectedMode) {

9. case R.id.action_list:

10. showRecyclerList();

11. break;

12.

13. case R.id.action_grid:

14. showRecyclerGrid();

15. break;

16.

17. case R.id.action_cardview:

18. showRecyclerCardView();

19. break;

20. }

21. }

4. Jalankan kembali aplikasinya. Seharusnya Anda sudah bisa

menampilkan tiga bentuk RecyclerView yang telah kita rencanakan
sebelumnya.
5. Untuk mempercantik tampilan dan memenuhi target di awal, kita akan
menambah metode untuk mengubah judul halaman setiap melakukan
perubahan bentuk dari RecyclerView.
o Java
 1. private void setActionBarTitle(String title) {

2. if (getSupportActionBar() != null) {

3. getSupportActionBar().setTitle(title);

4. }

5. }

Kemudian tambahkan variable baru diatas metode onCreate() seperti

berikut:

o Java
7. private String title = "Mode List";

Dan kita update kembali metode setMode sehingga menjadi seperti

berikut:

o Java
9. public void setMode(int selectedMode) {

10. switch (selectedMode) {

11. case R.id.action_list:

12. title = "Mode List";

13. showRecyclerList();

14. break;

15.

16. case R.id.action_grid:

17. title = "Mode Grid";

18. showRecyclerGrid();

19. break;

20.

21. case R.id.action_cardview:

 22. title = "Mode CardView";

23. showRecyclerCardView();

24. break;

25. }

26. setActionBarTitle(title);

27. }

Dan pada metode onCreate() tambahkan baris

ini setActionBarTitle("Mode List"); sebelum kita memanggil
metode showRecyclerList(); untuk mengganti title sejak pertama kali
aplikasi dijalankan.

o Java
29. @Override

30. protected void onCreate(Bundle savedInstanceState) {

31. super.onCreate(savedInstanceState);

32. setContentView(R.layout.activity_main);

33. setActionBarTitle(title);

34.

35. ...

36. }
 6. Jalankan kembali aplikasinya. Sekarang judul halaman akan berubah
seiring perubahan bentuk RecyclerView.

Codelab 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. Bukalah kelas CardViewHeroAdapter dan perhatikan kode berikut:

o Java
2. holder.btnFavorite.setOnClickListener(new View.OnClickListe

ner() {
3. @Override

4. public void onClick(View v) {

5. Toast.makeText(holder.itemView.getContext(), "Favorite

" +

6. listHero.get(holder.getAdapterPosition()).getNa

me(), Toast.LENGTH_SHORT).show();

7.

8. }

9. });

10.

11. holder.btnShare.setOnClickListener(new View.OnClickListener

() {

12. @Override

13. public void onClick(View v) {

14. Toast.makeText(holder.itemView.getContext(), "Share

" +

15. listHero.get(holder.getAdapterPosition()).g

etName(), Toast.LENGTH_SHORT).show();

16. }

17. });
Jika diperhatikan, kode di atas digunakan untuk
menambahkan onClick untuk btnFavorite dan btnShare.
Lalu bagaimana mengimplementasikan untuk seluruh item di dalam
RecyclerView?

Tambahkan kode berikut di dalam CardViewHeroAdapter.

o Java
19. holder.itemView.setOnClickListener(new View.OnClickListener

() {

20. @Override

21. public void onClick(View v) {

22. Toast.makeText(holder.itemView.getContext(), "Kamu

memilih " + listHero.get(holder.getAdapterPosition()).getName()

, Toast.LENGTH_SHORT).show();
 23. }

24. });

Jika diperhatikan kembali metode setOnClickListener berada di

dalam kelas Adapter, bagaimana cara menerapkan agar bisa kita
tangani di kelas Activity?

2. Bukalah kelas ListHeroAdapter, tambahkan interface berikut dan

implementasikan onClick ke kelas interface berikut:
o Java
1. public class ListHeroAdapter extends RecyclerView.Adapter<ListH

eroAdapter.ListViewHolder> {

2. ...

3.

4. private OnItemClickCallback onItemClickCallback;

5.

6. public void setOnItemClickCallback(OnItemClickCallback onIt

emClickCallback) {

7. this.onItemClickCallback = onItemClickCallback;

8. }

9.

10. ...

11.

12. @Override

13. public void onBindViewHolder(@NonNull final ListViewHol

der holder, int position) {

14. ...

15.
 16. holder.itemView.setOnClickListener(new View.OnClick

Listener() {

17. @Override

18. public void onClick(View v) {

19. onItemClickCallback.onItemClicked(listHero.

get(holder.getAdapterPosition()));

20. }

21. });

22. }

23.

24. ...

25.

26. public interface OnItemClickCallback {

27. void onItemClicked(Hero data);

28. }

29. }

Kemudian bukalah MainActivity dan tambahkan satu metode ini untuk

menandakan item mana yang dipilih.

o Java
31. private void showSelectedHero(Hero hero) {

32. Toast.makeText(this, "Kamu memilih " + hero.getName(),

Toast.LENGTH_SHORT).show();

33. }
 Kemudian tambahkan pada masing-masing metode di list seperti
berikut:

o Java
35. private void showRecyclerList() {

36. rvHeroes.setLayoutManager(new LinearLayoutManager(this)

);

37. ListHeroAdapter listHeroAdapter = new ListHeroAdapter(l

ist);

38. rvHeroes.setAdapter(listHeroAdapter);

39.

40. listHeroAdapter.setOnItemClickCallback(new ListHeroAdap

ter.OnItemClickCallback() {

41. @Override

42. public void onItemClicked(Hero data) {

43. showSelectedHero(data);

44. }

45. });

46. }

Lakukan juga untuk metode grid!

3. Bukalah GridHeroAdapter tambahkan kode berikut di dalamnya:

o Java
1. public class GridHeroAdapter extends RecyclerView.Adapter<GridH

eroAdapter.GridViewHolder> {

2. ...

3.
4. private OnItemClickCallback onItemClickCallback;

5.

6. public void setOnItemClickCallback(OnItemClickCallback onIt

emClickCallback) {

7. this.onItemClickCallback = onItemClickCallback;

8. }

9.

10. ...

11.

12. @Override

13. public void onBindViewHolder(@NonNull final GridViewHol

der holder, int position) {

14. ...

15.

16. holder.itemView.setOnClickListener(new View.OnClick

Listener() {

17. @Override

18. public void onClick(View v) {

19. onItemClickCallback.onItemClicked(listHero.

get(holder.getAdapterPosition()));

20. }

21. });

22. }

23.

24. ...
 25.

26. public interface OnItemClickCallback {

27. void onItemClicked(Hero data);

28. }

29. }

Kemudian bukalah MainActivity dan tambahkanlah

metode grid seperti berikut:

o Java
31. private void showRecyclerGrid() {

32. rvHeroes.setLayoutManager(new GridLayoutManager(this, 2

));

33. GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(l

ist);

34. rvHeroes.setAdapter(gridHeroAdapter);

35.

36. gridHeroAdapter.setOnItemClickCallback(new GridHeroAdap

ter.OnItemClickCallback() {

37. @Override

38. public void onItemClicked(Hero data) {

39. showSelectedHero(data);

40. }

41. });

42. }
 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.

Selesai! Sejauh ini Anda telah berhasil menerapkan beragam bentuk

dari RecyclerView. Pendekatan ini sangat berguna karena ke depannya
Anda akan berhadapan dengan koleksi data yang harus ditampilkan ke
dalam bentuk list.

Bedah Kode

RecyclerView
Pendekatan umum dalam mengembangkan aplikasi mobile terletak pada
bentuk list-to-detail. Pendekatan ini menampilkan sejumlah informasi dalam
bentuk list. Ketika pengguna menekan salah satu item untuk mendapatkan
detail informasi, maka aplikasi akan menampilkannya secara detail.
Pendekatan tersebut sangat lumrah dikarenakan keterbatasan ukuran
layar. Keterbatasan ini justru memudahkan penggunaan dua jempol
sebagai pointer untuk melakukan sebuah aksi pada aplikasi.

Android sendiri memiliki beberapa mekanisme menampilkan data dalam

jumlah yang banyak, yaitu dalam bentuk ListView, GridView,
maupun RecyclerView. Namun semenjak adanya material design, para
developer dituntut untuk memahami suksesor dari komponen ListView ini.

Kelebihan utama dari RecyclerView terletak pada performa dan

fleksibilitasnya.

Dari sisi performa, secara default adapter dari RecyclerView haruslah

mengimplementasikan ViewHolder pattern. Tujuan dari pendekatan ini
adalah agar RecyclerView tetap responsif dengan mempertahankan
peforma terbaik ketika menampilkan koleksi data dalam jumlah yang
banyak.
Ini jelas berbeda dengan ListView yang tidak mewajibkan pattern tersebut
secara default. Pada salah satu contoh adapter yang kita tuliskan di atas,
pattern ViewHolder diimplementasikan pada bagian berikut:

 Java
1. public class ListHeroAdapter extends RecyclerView.Adapter<ListHeroAd

apter.ListViewHolder> {

2. private ArrayList<Hero> listHero;

3. private OnItemClickCallback onItemClickCallback;

4.

5. public void setOnItemClickCallback(OnItemClickCallback onItemCli

ckCallback) {

6. this.onItemClickCallback = onItemClickCallback;

7. }

8. public ListHeroAdapter(ArrayList<Hero> list) {

9. this.listHero = list;

10. }

11.

12. @NonNull

13. @Override

14. public ListViewHolder onCreateViewHolder(@NonNull ViewGroup vie

wGroup, int i) {

15. View view = LayoutInflater.from(viewGroup.getContext()).inf

late(R.layout.item_row_hero, viewGroup, false);

16. return new ListViewHolder(view);

17. }

18.

19. @Override

20. public void onBindViewHolder(@NonNull final ListViewHolder hold

er, int position) {

21. Hero hero = listHero.get(position);

22.

23. Glide.with(holder.itemView.getContext())

24. .load(hero.getPhoto())
25. .apply(new RequestOptions().override(55, 55))

26. .into(holder.imgPhoto);

27.

28. holder.tvName.setText(hero.getName());

29. holder.tvDetail.setText(hero.getDetail());

30.

31. holder.itemView.setOnClickListener(new View.OnClickListener

() {

32. @Override

33. public void onClick(View v) {

34. onItemClickCallback.onItemClicked(listHero.get(hold

er.getAdapterPosition()));

35. }

36. });

37. }

38.

39. @Override

40. public int getItemCount() {

41. return listHero.size();

42. }

43.

44. class ListViewHolder extends RecyclerView.ViewHolder {

45. ImageView imgPhoto;

46. TextView tvName, tvFrom;

47.
 48. ListViewHolder(View itemView) {

49. super(itemView);

50. imgPhoto = itemView.findViewById(R.id.img_item_photo);

51. tvName = itemView.findViewById(R.id.tv_item_name);

52. tvDetail = itemView.findViewById(R.id.tv_item_detail);

53. }

54. }

55.

56. public interface OnItemClickCallback {

57. void onItemClicked(Hero data);

58. }

59. }

Setiap kali kita melakukan scroll pada RecyclerView, ia akan memeriksa

memori apakah item view yang hendak ditampilkan tertentu sudah berada
di memori atau belum. Jika belum, maka akan dijalankan sebuah proses
yang cukup mahal dari segi memori, yaitu
dijalankannya onCreateViewHolder(). Di dalam metode ini, terjadi
sebuah casting view (findViewById) yang akan menampilkan koleksi data
dalam format tampilan yang ditentukan, baris per baris jika pada
bentuk list atau baris dan kolom pada bentuk grid.

Hubungan antara satu adapter dengan ViewHolder adalah satu ke banyak.

Artinya, satu kelas adapter bisa memiliki lebih dari satu ViewHolder.

 Java
1. rvHeroes.setHasFixedSize(true);

Baris di atas menjelaskan bahwa bila fixed size bernilai true,

maka RecyclerView dapat melakukan optimasi ukuran lebar dan tinggi
secara otomatis. Nilai lebar dan tinggi RecyclerView menjadi konstan.
Terlebih jika kita memiliki koleksi data yang dinamis untuk proses
penambahan, perpindahan, dan pengurangan item dari koleksi data.

Pada contoh kode di atas, kita menggunakan library bernama Glide untuk
menampilkan foto secara asynchronous dari URL yang diberikan.

Pada sisi fleksibilitas, RecyclerView memiliki beragam bentuk yang

disesuaikan dengan design yang diinginkan. Kita hanya perlu menentukan
nilai pada metode setLayoutManager() saja untuk menentukan
bagaimana RecyclerView ditampilkan.

 Java

1. rvHeroes.setLayoutManager(new LinearLayoutManager(this));

atau

 Java

1. rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));

Terakhir, untuk membuat kamu lebih paham

tentang RecyclerView beberapa link di bawah ini wajib kamu baca :

 RecylerView
 Using the RecyclerView
 Fundamentals for ListView
 RecyclerView Animator

Glide
Perhatikan kode berikut:

 Java

1. Glide.with(holder.itemView.getContext())

2. .load(listHero.get(position).getPhoto())

3. .apply(new RequestOptions().override(55, 55))

 4. .into(holder.imgPhoto);

Glide digunakan untuk memuat sebuah gambar, baik yang sudah Anda
siapkan di drawable maupun berada di server. Glide terdiri dari banyak
fungsi:

1. with: digunakan untuk memasukkan context.

2. load: digunakan untuk memasukkan sumber gambar, contohnya
menggunakan url atau asset dari Drawable.
3. apply: digunakan untuk melakukan memanipulasi gambar, contohnya
menggunakan RequestOption untuk me-override ukuran gambar.
4. into: digunakan untuk memasukkan imageView sebagai obyek
penampil gambar.

Contohnya dari kode di atas, kita bisa modifikasi untuk menampilkan

gambar profil maka jadi seperti ini:

 Java

1. Glide.with(holder.itemView.getContext())

2. .load(R.drawable.my_profile)

3. .apply(new RequestOptions().override(55, 55))

4. .into(holder.imgPhoto);