Cara Membuat Layout GridView di Android Studio

Oleh Wildan M Athoillah 01.16

Assalamualaikum Warahmatullahi Wabarakatuh.

GridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.

Pada tutorial ini, kita akan belajar membuat program sederhana dengan menggunakan GridView didalam layout aplikasi kita, pada aplikasi tersebut, kita akan menampilkan gambar, dengan tampilan mirip dengan image gallery, dengan menggunakan GridView.

Materi lainnya yang direkomendasikan:

Cara Membuat Layout GridView di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Buka file activity_main.xml kalian, disini kita akan mengatur layout untuk tampilan GridView pada activity kita.

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF5F5F5"
    android:columnWidth="90dp"
    android:gravity="center"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

</GridView>

Penjelasan pada atribut-atribut yang digunakan:

android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.
android:gravity : Menentukan gravitasi di dalam setiap sel.
android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.
android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.
android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.
android:numColumns : Menentukan berapa kolom yang akan ditampilkan.

3) Selanjutnya buka file MainActiviy.java, pada layout tersebut kita akan menampilkan gambar/image, jadi saya sarankan kalian sudah menyiapkan gambarnya terlebih dahulu, gambar tersebut kalian simpan didalam dir drawable.

Masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    //Deklarasi Variable GridView
    protected GridView TampilanGrid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().setTitle("Image Gallery");
        TampilanGrid = findViewById(R.id.gridview);
        //Mengset/Menerapkan adapter pada GridView
        TampilanGrid.setAdapter(new ImageAdapter(this));

        //Membuat Listener untuk menangani kejadian saat salah satu item di klik
        TampilanGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView parent, View v, int position, long id) {
                Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

//Digunakan Untuk Mengatur Konten yang Akan Ditampilkan
class ImageAdapter extends BaseAdapter {

    //List Konten Gambar yang akan ditampilkan pada GridView
    private int[] gambar = {R.drawable.kucing1, R.drawable.kucing2, R.drawable.kucing3,
            R.drawable.kucing4, R.drawable.kucing5, R.drawable.kucing6,
            R.drawable.kucing7, R.drawable.kucing8, R.drawable.kucing9,
            R.drawable.kucing10, R.drawable.kucing11, R.drawable.kucing12,
            R.drawable.kucing13, R.drawable.kucing14, R.drawable.kucing15,
            R.drawable.kucing16, R.drawable.kucing17, R.drawable.kucing18,
            R.drawable.kucing19, R.drawable.kucing20};

    private Context mContext;

    //Membuat Contructor, dengan parameter Context, Untuk menghubungkan Adapter dengan GridView
    ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        //Menghitung Jumlah/Panjang dari Daftar Konten
        return gambar.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    //Membuat ImageView baru untuk setiap item yang direferensikan oleh Adaptor
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        //Jika tidak di daur ulang
        if (convertView == null) {
            //Menginisialisasi beberapa atribut
            imageView = new ImageView(mContext);
            //Mengatur Panjang dan Lebar pada ImageView
            imageView.setLayoutParams(new GridView.LayoutParams(120, 120));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            //Mengatur Padding
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        //Mengset Image dari Resource/Sumber berdasarkan posisinya
        imageView.setImageResource(gambar[position]);
        return imageView;
    }
}

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.