1

Tutorial Android Membuat Image Gallery (Galeri Gambar)

Menggunakan GridView

Membuat Gallery Image menggunakan GridView

Pada dasarnya grid layout memang dioptimalkan untuk memberikan desain user
interface yang lebih baik dengan membagi suatu bagian besar, ke dalam kotak-kotak
bagian yang lebih kecil. Sehingga gallery gambar yang menggunakan GridView akan lebih
tampil menarik dibandingkan dengan yang menggunakan gallery layout biasa. Nanti
tampilan awal gallery kita akan menampilkan banyak thumbnails, ketika thumbnail
tersebut diklik, maka akan ditampilkan gambar tunggalnya dengan ukuran yang lebih
besar.
Untuk memulai membuat gallery menggunakan GridView, pertama-tama kalian
membutuhkan 7 buah gambar. Gambarnya terserah Anda.
Jika sudah, buat project baru di Android. Nama project dan nama package-nya terserah.
Kemudian, masukkan ketujuh gambar yang sudah disiapkan tadi ke folder /res/drawable
dan beri nama sample_0, sample_1, sample_2 dan seterusnya seperti di bawah ini :

Setelah itu, buat kelas baru bernama ImageAdapter.java, kelas inilah yang berfungsi
sebagai adapter gambar-gambar yang akan ditampilkan di gallery. Copy pastekan kode
berikut ini pada ImageAdapter.java :

PEMROGRAMAN MOBILE IWAN FITRIANRTO RAHMAD, M.KOM

2

Kelas ImageAdapter merupakan warisan dari kelas BaseAdapter dan mempunyai beberapa method
bawaan, seperti getView(), getCount() dan sebagainya seperti di atas. Selanjutnya, kita akan membuat
sebuah layout GridView yang bernama activity_main.xml. Dan kopi pastekan kode di bawah ini :

PEMROGRAMAN MOBILE IWAN FITRIANRTO RAHMAD, M.KOM

3

Bisa dilihat, ada banyak properti pada GridView, seperti numColums, gravity dan sebagainya. Untuk
numColums diset ke auto fit yang berarti banyaknya kolom akan menyesuaikan dengan lebar layar
yang ada. Jika sudah, kita buka MainActivity.java atau activity utama. Dan copy pastekan kode berikut
pada file MainActivity.java :

Pada dasarnya kelas MainActivity berfungsi untuk menampilkan GridView gallery. Kelas ini juga
mempunyai method onItemClick() yang berguna untuk menampilkan gambar tunggal ketika sebuah
thumbnails diklik. Setelah itu, kita buat file activity SingleImage.java yang berfungsi untuk
menampilkan gambar tunggal dari gallery. Namun sebelumnya kita buat layoutnya dulu. Buat file baru
bernama singleimage.xml dan kopi pastekan kode berikut :

PEMROGRAMAN MOBILE IWAN FITRIANRTO RAHMAD, M.KOM

4

Layout singleimage.xml berisi ImageView yang berguna untuk menampilkan single image. Jika sudah
kita kembali ke activity SingleImage.java dan copy pastekan kode berikut :

Gambar yang ditampilkan pada SingleImage.java diambil dari kelas ImageAdapter menggunakan
referensi image id yang didapat dari GridView pada MainActivity.java. Kemudian yang terakhir, kita
buka AndroidManifest.xml untuk mendaftarkan activity-activity yang sudah kita buat. Copy pastekan
kode di bawah ini pada AndroidManifest.xml:

PEMROGRAMAN MOBILE IWAN FITRIANRTO RAHMAD, M.KOM

5

Jalankanlah Aplikasi Tersebut.

PEMROGRAMAN MOBILE IWAN FITRIANRTO RAHMAD, M.KOM