Menampilkan Gambar-gambar dengan Menggunakan 'GridView'

'GridView' akan menampilkan item-item secara grid dua dimensi. Kita bisa menggunakan 'GridView' bersama dengan 'ImageView' untuk menampilkan gambar-gambar. 

Berikut contoh latihan menampilkan gambar-gambar dengan menggunakan 'GridView':

File layout xml: activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > 

<GridView
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center" /> 

</LinearLayout>

Kemudian siapkan beberapa image/gambar dan beri nama pic1.png, pic2.png, dan seterusnya. Kemudian copy dan paste (atau drag-and-drop) semua gambar ke folder "res/drawable".

Catatan:

Untuk memastikan bahwa ukuran gambar sesuai dengan layar, kita perlu memastikan bahwa kita punya banyak versi gambar sesuai dengan folder "drawable" untuk masing-masing ukuran layar. Untuk latihan ini akan diabaikan, dan hanya menggunakan salah satu jenis ukuran resolusi layar saja.

File java: MainActivity.java:

package com.example.gridview; 

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 { 

//--gambar-gambar yang akan ditampilkan
Integer[] imageIDs = {
R.drawable.pic1,
R.drawable.pic2,
R.drawable.pic3,
R.drawable.pic4,
R.drawable.pic5,
R.drawable.pic6,
R.drawable.pic7
}; 

@Override
protected void onCreate(Bundle savedInstanceState) { 

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 

GridView gridView = (GridView) findViewById(R.id.gridview);
gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
Toast.makeText(getBaseContext(), "pic" + (position+1)+ " selected", Toast.LENGTH_SHORT).show();
}
});
} 

public class ImageAdapter extends BaseAdapter
{
private Context context; 

public ImageAdapter(Context c)
{
context = c;
} 

//--return jumlah gambar yang akan ditampilkan
public int getCount() {
return imageIDs.length;
} 

//--return itemnya
public Object getItem(int position) {
return position;
} 

//--return ID dari suatu item
public long getItemId(int position) {
return position;
} 

//--return ImageView
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5,5,5,5);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(imageIDs[position]);
return imageView;
}
}
}

Kemudian jalankan di emulator Android Studio dan tampilan 'GridView' akan tampak seperti berikut:

Contoh tampilan 'GridView'

Penjelasan

Seperti dalam contoh-contoh latihan sebelumnya tentang menampilkan gambar dengan 'Gallery' maupun dengan 'ImageSwitcher', kita menerapkan class 'ImageAdapter' untuk mengikatkan antara 'ImageView' dan 'GridView':

GridView gridView = (GridView) findViewById(R.id.gridview);

gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
Toast.makeText(getBaseContext(), "pic" + (position+1)+ " selected", Toast.LENGTH_SHORT).show();
}
});

Ketika salah satu gambar dipilih, kita akan menampilkan pesan menggunakan 'Toast' yang menunjukkan bahwa gambar dipilih. Di dalam method 'getView()' kita bisa menentukan ukuran gambar dan bagaimana gambar diberi sela ruang di dalam 'GridView' dengan men-set 'padding' untuk masing-masing gambar:

//--return ImageView
public View getView(int position, View convertView, ViewGroup parent)
{
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5,5,5,5);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(imageIDs[position]);
return imageView;
}