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

Kenalan dengan RecyclerView?

RecyclerView adalah komponen UI Android yang menampilkan kumpulan data dalam bentuk list, grid, atau staggered layout. Dibandingkan ListView lama, RecyclerView lebih efisien dalam penggunaan memory dan lebih fleksibel.

5 Mode Grid pada RecyclerView

1. GridLayoutManager Standar

val layoutManager = GridLayoutManager(this, 2) // 2 kolom
recyclerView.layoutManager = layoutManager

2. Grid dengan Span Size

layoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
    override fun getSpanSize(position: Int): Int {
        return if (position == 0) 2 else 1 // Header span penuh
    }
}

3. Staggered Grid

val layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
recyclerView.layoutManager = layoutManager

4. Dynamic Grid (berdasarkan orientasi)

val columns = if (resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) 3 else 2
recyclerView.layoutManager = GridLayoutManager(this, columns)

5. Grid dengan Header

Implementasi adapter dengan multiple view type untuk menambahkan header di atas grid.

Tips Optimasi

• Gunakan setHasFixedSize(true) jika ukuran RecyclerView tidak berubah
• Implementasi DiffUtil untuk update data yang efisien
• Gunakan ViewHolder pattern dengan benar