Latihan 5 Mode Grid Pada RecyclerView di Android Studio

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"?></code><br /><code class="language-java"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"</code><br /><code class="language-java">    xmlns:tools="http://schemas.android.com/tools"</code><br /><code class="language-java">    android:layout_width="match_parent"</code><br /><code class="language-java">    android:layout_height="wrap_content"</code><br /><code class="language-java">    android:orientation="vertical"></code><br /><code class="language-java"> </code><br /><code class="language-java">    <ImageView</code><br /><code class="language-java">        android:id="@+id/img_item_photo"</code><br /><code class="language-java">        android:layout_width="match_parent"</code><br /><code class="language-java">        android:layout_height="250dp"</code><br /><code class="language-java">        android:layout_margin="1dp"</code><br /><code class="language-java">        android:scaleType="centerCrop"</code><br /><code class="language-java">        tools:src="@tools:sample/avatars" /></code><br /><code class="language-java"></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:

<code class="language-java">public class GridHeroAdapter extends RecyclerView.Adapter<GridHeroAdapter.GridViewHolder> {</code><br /><code class="language-java">    private ArrayList<Hero> listHero;</code><br /><code class="language-java"> </code><br /><code class="language-java">    public GridHeroAdapter(ArrayList<Hero> list) {</code><br /><code class="language-java">        this.listHero = list;</code><br /><code class="language-java">    }</code><br /><code class="language-java"> </code><br /><code class="language-java">    @NonNull</code><br /><code class="language-java">    @Override</code><br /><code class="language-java">    public GridViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {</code><br /><code class="language-java">        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_grid_hero, viewGroup, false);</code><br /><code class="language-java">        return new GridViewHolder(view);</code><br /><code class="language-java">    }</code><br /><code class="language-java"> </code><br /><code class="language-java">    @Override</code><br /><code class="language-java">    public void onBindViewHolder(@NonNull final GridViewHolder holder, int position) {</code><br /><code class="language-java">        Glide.with(holder.itemView.getContext())</code><br /><code class="language-java">                .load(listHero.get(position).getPhoto())</code><br /><code class="language-java">                .apply(new RequestOptions().override(350, 550))</code><br /><code class="language-java">                .into(holder.imgPhoto);</code><br /><code class="language-java">    }</code><br /><code class="language-java"> </code><br /><code class="language-java">    @Override</code><br /><code class="language-java">    public int getItemCount() {</code><br /><code class="language-java">        return listHero.size();</code><br /><code class="language-java">    }</code><br /><code class="language-java"> </code><br /><code class="language-java">    class GridViewHolder extends RecyclerView.ViewHolder {</code><br /><code class="language-java">        ImageView imgPhoto;</code><br /><code class="language-java"> </code><br /><code class="language-java">        GridViewHolder(View itemView) {</code><br /><code class="language-java">            super(itemView);</code><br /><code class="language-java">            imgPhoto = itemView.findViewById(R.id.img_item_photo);</code><br /><code class="language-java">        }</code><br /><code class="language-java">    }</code><br /><code class="language-java">}</code><br /><br /><br />

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

private void showRecyclerGrid(){</code><br /><code class="language-java">    rvHeroes.setLayoutManager(new GridLayoutManager(this, 2));</code><br /><code class="language-java">    GridHeroAdapter gridHeroAdapter = new GridHeroAdapter(list);</code><br /><code class="language-java">    rvHeroes.setAdapter(gridHeroAdapter);</code><br /><code class="language-java">}

Selamat mencoba, terima kasih.

Apa itu Grid Mode?

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.

Setup Grid Layout

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)