Tutorial Cara Membuat Tampilan Staggered Grid pada Item RecyclerView di Android Studio

Tutorial Cara Membuat Tampilan Staggered Grid Pada RecyclerView di Android Studio

Halo para Android Developer, Bagaimana kabar kalian semua hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali, saya akan membagikan Tutorial Cara Membuat Tampilan Staggered Grid Pada Item RecyclerView di Android Studio.

Staggered Grid adalah ViewGroup ekstensi dari Grid View. Dalam tampilan ini, Grid memiliki ukuran yang bervariasi yaitu, tinggi dan lebarnya dapat bervariasi. Ini menunjukkan item asimetris dalam View. Ini secara otomatis mengatur tampilan item sesuai dengan tinggi dan lebarnya.

Staggered View 2 Kolom

Untuk menggunakan RecyclerView untuk membuat tampilan Staggered View, kita perlu memerlukan StaggeredGridLayoutManager. LayoutManager bertanggung jawab untuk mengukur dan memposisikan tampilan item di RecyclerView.

Ada banyak aplikasi yang menggunakan tampilan seperti ini seperti aplikasi Galeri, Facebook, Google Chrome dan masih banyak lagi. Untuk itu, di bawah ini sudah saya buatkan tutorialnya. Silahkan disimak.

Tutorial Cara Membuat Tampilan Staggered Grid pada Item RecyclerView di Android Studio

Buatlah project Android Studio baru dengan informasi seperti pada tabel dibawah ini:

Application Name:Staggered Grid App
Package Name:com.androidrion.staggeredgridapp
Language:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml
  2. list_item.xml

Daftar file java yang digunakan dalam project ini:

  1. MainActivity.java
  2. Adapter.java

Daftar file drawable yang digunakan dalam project ini:

  1. poster_1.jpg
  2. poster_2.jpg
  3. poster_3.jpg
  4. poster_4.jpg
  5. poster_5.jpg
  6. poster_6.jpg
  7. poster_7.jpg
  8. poster_8.jpg
  9. poster_9.jpg
  10. poster_10.jpg

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Staggered Grid App.

Structure Project

Asset Drawable File

Download asset/gambar yang akan kita gunakan pada project ini pada link dibawah. Lalu pindahkan ke dalam project Android Studio kalian dalam folder drawable seperti pada gambar structure project diatas.

XML Layout File (list_item.xml)

Buatlah file layout baru dengan nama list_item dengan cara klik kanan pada folder layout lalu pilih New>Layout Resource File. Tambahkan komponen ImageView dengan atribut adjustViewBounds true dan scaleType fitXY. Berikut ini adalah kode lengkap untuk file list_item.xml

app/res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="4dp">

    <ImageView
        android:id="@+id/imageView"
        android:adjustViewBounds="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/poster_1" />

</RelativeLayout>

XML Layout File (activity_main.xml)

Buka file activity_main.xml lalu tambahkan komponen RecyclerView di dalamnya. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Java Class File (Adapter.java)

Buatlah file java dengan nama Adapter dengan cara klik kanan pada folder java lalu pilih New>Java Class. Berikut ini adalah kode lengkap untuk file Adapter.java

app/java/com.androidrion.staggeredgridapp/Adapter.java

package com.androidrion.staggeredgridapp;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
        ArrayList images;
        Context context;

public Adapter(Context context, ArrayList images) {
        this.context = context;
        this.images = images;
        }

@NonNull
@Override
public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);

        Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
        return viewHolder;
        }

@Override
public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
        int res = (int) images.get(position);
        holder.images.setImageResource(res);
        }

@Override
public int getItemCount() {
        return images.size();
        }

public class ViewHolder extends RecyclerView.ViewHolder {
    ImageView images;

    public ViewHolder(View view) {
        super(view);
        images = (ImageView) view.findViewById(R.id.imageView);
    }
}
}

Java Activity File (MainActivity.java)

Buka file MainActivity dalam folder java lalu deklarasikan komponen RecyclerView yang telah kita tambahkan pada file xml layout. Tambahkan juga StaggeredLayoutManager di dalamnya, lalu pada setLayoutManager buat menjadi staggerGridLayoutManager. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.staggeredgridapp/MainActivity.java

package com.androidrion.staggeredgridapp;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    ArrayList images = new ArrayList<>(Arrays.asList(R.drawable.poster_1, R.drawable.poster_2, R.drawable.poster_3,
            R.drawable.poster_4, R.drawable.poster_5, R.drawable.poster_6, R.drawable.poster_7, R.drawable.poster_8,
            R.drawable.poster_9, R.drawable.poster_10));

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);

        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);

        Adapter adapter = new Adapter(MainActivity.this, images);

        recyclerView.setAdapter(adapter);
    }
}

Run ‘app’

Sekarang jalankan project Android Studio kalian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Bagaimana Cara Membuat Tampilan Staggered Grid View Pada Item RecyclerView di Android Studio. Langkah-langkah diatas cukup mudah untuk kalian lakukan yang baru saja terjun ke Android Studio.

Jika kalian mengalami kendala saat melakukan tutorial di atas, Silahkan beri komentar pada artikel ini dibawah. Jangan lupa untuk Subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian semua. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Exit mobile version