Contoh dan Tutorial Custom Gridview di Android Studio

Hello, Androiders! Postingan kali ini akan mentutorialkan penerapan Gridview ala custom di Android dengan Android Studio tentunya. Secara keseluruhan hampir-hampir sama saja dengan cara menerapakan custom Listview, hanya berbeda pada elemen di layout XML nya saja, untuk Gridview menggunakan tag <Gridview> dan Listview dengan tag <Listview>.  Untuk tampilannya sendiri cukup berbeda, dimana Listview tampilannya hanya baris, sedangkan Gridview tampilannya baris dan kolom. 

Baik, mari kita mulai dengan membuat sebuah proyek baru. Pada contoh ini saya menamakan package projectnya dengan com.gwnbs.proyeknine. Hal-hal yang akan di butuhkan disini adalah 3 java class yang mana dua di antara nya adalah class activity yaitu MainActivity.java dan ZoomActivity.java dan satu sisanya adalah Adaptor yaitu GridAdapter.java, 3 layout XML yang mana dua di antaranya adalah layout activity yaitu activity_main.xml dan activity_zoom.xml dan satu sisanya sebagai layout custom Gridview nya yaitu custom_grid.xml . Kemudian 8 buah icon yang semuanya saya download dari flaticon.com.



File ZoomActivity disini berfungsi untuk menerima intent. Intent ini akan menghantarkan item-item dari Gridview pada MainActivity menuju ke ZoomActivity, yang mana disini kita membuat gambar akan menjadi besar saat di lihat pada activity ZoomActivity. Berikut gambar yang memperlihatkan keseluruhan folder/file dan penamaan nya pada contoh project ini serta gambar dari aplikasi saat di running pada Android Virtual Device.

Gambar 1 : Keseluruhan folder dan file yang digunakan

Mari kita mulai dari activity_main.xml dengan menambahkan elemen Gridview. Berikut isi dari activity_main.xml :

activity_main.xml :

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

    <GridView
        android:id="@+id/gridView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_margin="6dp"
        android:gravity="center_horizontal|center_vertical"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="20dp"
        android:numColumns="3"
        android:listSelector="#FF03DAC5"/>

</RelativeLayout>

Beberapa penjelasan mengenai atribut-atribut pada elemen Gridview di atas:

• android:gravity="center_horizontal|center_vertical" berguna untuk memposisikan item berada di tengah-tengah secara horizontal maupun vertical.
• android:horizontalSpacing="10dp" memberikan jarak horizontal antara satu item dengan item di sebelahnya.
• android:verticalSpacing="20dp" memberikan jarak vertical antara satu item dengan item di bawahnya.
• android:numColumns="3" adalah penentuan jumlah kolomnya.
• android:listSelector="#FF03DAC5" ini akan memberikan warna pada item yang di pilih/klik.

Berikutnya buatlah sebuah layout sebagai custom layout dari Gridview yang nantinya akan di inflate melalui file java adaptor. Seperti yang sudah di jelaskan di atas, disini kita berikan nama custom_grid.xml. Layout ini berisi 2 buah komponen yaitu sebuah ImageView untuk penempatan icon dari item-itemnya dan sebuah TextView untuk penempatan teks dari item-itemnya. Berikut isi dari layout ini.

custom_grid.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="UseCompoundDrawables,
    UselessParent,HardcodedText">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/gambar"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/nama"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="monospace"
            android:text="Nama"
            android:textStyle="bold"
            android:textSize="20sp" />
        
    </LinearLayout>

</RelativeLayout>

Selanjutnya adalah membuat adapter nya, yang kita namakan GridAdapter.java dalam contoh ini. Layout custom_grid.xml di inflate di dalam file ini, kemudian adaptor ini akan menghubungkan layout tersebut ke MainActivity.java. Ya.. sesuai namanya, begitulah fungsinya. Berikut dibawah isi dari file java ini.

custom_grid.xml :

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class GridAdapter extends BaseAdapter {
    Context context;
    int[] gambar;
    String[] namanya;
    LayoutInflater inflter;

    public GridAdapter(Context applicationContext, int[] gambar, String[] namanya) {
        this.context = applicationContext;
        this.gambar = gambar;
        this.namanya = namanya;
        inflter = (LayoutInflater.from(applicationContext));
    }
    @Override
    public int getCount() {
        return gambar.length;
    }
    @Override
    public Object getItem(int i) {
        return null;
    }
    @Override
    public long getItemId(int i) {
        return 0;
    }
    @SuppressLint({"ViewHolder", "InflateParams"})
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        if (view == null) {
            view = inflter.inflate(R.layout.custom_grid, null);
        }
        ImageView gambarHewan = view.findViewById(R.id.gambar);
        TextView namaHewan = view.findViewById(R.id.nama);

        namaHewan.setText(namanya[i]);
        gambarHewan.setImageResource(gambar[i]);
        return view;
    }
}

Sebelum membuat activity baru, terlebih dahulu kita akan melakukan kodingan yang di butuhkan pada MainActivity.java. Pertama-tama dengan membuat integer untuk ke delapan icon-icon dengan memanggil sumber resource nya, lalu membuat String sebagai nama-nama dari delapan icon tersebut, kemudian menghubungkan keseluruhan dengan adaptor. Untuk metode klik pada setiap item, seperti yang di jelaskan sebelumnya di atas; setiap item yang di pilih/klik akan di hantarkan ke activity ZoomActivity mengunakan intent.

MainActivity.java :

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {

    int [] gambar = {R.drawable.hewan_citah, R.drawable.hewan_domba, R.drawable.hewan_gajah,
            R.drawable.hewan_gorila, R.drawable.hewan_harimau, R.drawable.hewan_hiu,
            R.drawable.hewan_kuda, R.drawable.hewan_puma};
    String [] namanya = {"Cita", "Domba", "Gajah", "Gorila", "Harimau", "Hiu",
            "Kuda", "Puma"};

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

        GridView gridView = findViewById(R.id.gridView);
        GridAdapter gridAdapter = new GridAdapter(this, gambar, namanya);
        gridView.setAdapter(gridAdapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Intent zoomActivity = new Intent(getApplicationContext(), ZoomActivity.class);
                zoomActivity.putExtra("gambar", gambar[position]);
                zoomActivity.putExtra("namanya", namanya[position]);
                startActivity(zoomActivity);
            }
        });
    }
}

Kemudian membuat activity baru, yaitu ZoomActivity.java dengan layout nya activity_zoom.xml. Pada layout ini juga harus berisi 2 komponen seperti pada activity_main.xml, yaitu ImageView dan Textview. Namun disini tentu kita memberikan atribut ukuran yang lebih besar tentunya. Lalu pada ZoomActivity.java kita hanya perlu menyambut intent dari MainActivity.java. Berikut isi lengkap dari kedua file ini.

activity_zoom.xml :

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

    <ImageView
        android:id="@+id/gambarZoom"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="10dp"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/namaZoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/gambarZoom"
        android:layout_centerHorizontal="true"
        android:fontFamily="monospace"
        android:text="Nama"
        android:textStyle="bold"
        android:textSize="40sp" />

</RelativeLayout>

ZoomActivity.java :

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class ZoomActivity extends AppCompatActivity {

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

        ImageView gambarZoom = findViewById(R.id.gambarZoom);
        TextView namaZoom = findViewById(R.id.namaZoom);

        Intent i = getIntent();
        gambarZoom.setImageResource(i.getIntExtra("gambar", 0));
        namaZoom.setText(i.getStringExtra("namanya"));
    }
}

Tentunya Anda juga bisa menerapkan tutorial ini pada Listview, Anda hanya perlu mengganti elemen Gridview pada activity_main.xml menjadi Listview, kemudian merubah atribut-atribut nya menjadi yang sesuai untuk Listview. Sekian dan terima kasih! Apabila ada pertanyaan, silahkan di tanyakan saja melalui komentar atau contact form pada bilah samping kiri.