Pada latihan sebelumnya, kita telah membuat RecyclerView dengan mode list untuk menampilkan daftar pahlawan. Dan selanjutnya pada latihan ini kita akan membuat RecyclerView dengan mode grid.

Oke langsung saja kita tambahkan berkas baru pada layout dengan nama item_grid_hero dengan root element LinearLayout dan lengkapi kodenya dengan baris seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
 
    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_margin="1dp"
        android:scaleType="centerCrop"
        tools:src="@tools:sample/avatars" />
</LinearLayout>

Setelah selesai, lanjut ke pembuatan Adapter untuk berkas layout tersebut. Buat sebuah kelas baru dengan nama GridHeroAdapter.

Kemudian kita lakukan hal yang sama seperti pembuatan ListHeroAdapter, dan lengkapi kodenya menjadi seperti berikut:

public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {
    private ArrayList<Hero> listHero;
 
    public GridHeroAdapter(ArrayList<Hero> list) {
        this.listHero = list;
    }
 
    @NonNull
    @Override
    public GridViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_grid_hero, viewGroup, 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);
        }
    }
}

Setelah semuanya selesai, mari kita pasang lagi di MainActivity dengan menambahkan satu metode berikut:

private void showRecyclerGrid(){
    rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));
    GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);
    rvHeroes.setAdapter(gridHeroAdapter);
}

Selamat mencoba, terima kasih.