Beranda / Android Programming / Basic Android / Image / Layout

Cara Membuat Image Gallery Menggunakan GridView

Oleh Wildan M Athoillah

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial ini kita akan belajar, bagaimana Cara Membuat Image Gallery menggunakan GridView di Android Studio, Image Gallery yang akan kita buat, tampilannya hampir mirip dengan image gallery pada aplikasi seperti Instagram, dengan tampilan Grid atau Kotak-kotak, untuk memudakan kita membuat tampilan seperti itu, kita akan membuat layout tersebut dengan GridView.


Pada program aplikasi yang akan kita buat ini, dimana pada aplikasi tersebut akan banyak sekali menampilkan thumbnails/gambar berukuran kecil, ketika salah satu gambar tersebut diklik, maka akan muncul gambar tunggal dengan ukuran yang lebih besar.

Saya sarankan kalian sudah mempersiapkan gambarnya terlebih dahulu, disini saya menggunakan 20 gambar yang akan ditampilkan pada GridView, untuk resolusi gambar, jangan terlalu besar, resolusi pada gambar yang saya gunakan yaitu 200 x 200.

Materi lainnya yang direkomendasikan:

Cara Membuat Image Gallery Menggunakan GridView

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

2) Simpan gambar yang sudah kalian siapkan, pada direktori res > drawable.


3) Selanjutnya buat class baru, berinama "ImageAdapter", class ini digunakan untuk mengatur konten yang akan ditampilkan.
package android.cianjur.developer.net.basicandroid;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

/**
 * Created by Wildan M Athoillah on 22/01/2018.
 */

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

    //List Konten Gambar yang akan ditampilkan pada GridView
    static 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;
    }
}
Pada Kelas ImageAdapter kita mengexends atau mewarisi fungsi dari kelas BaseAdapter dan mempunyai beberapa method bawaan, seperti getView(), getCount(), getItem(), getItemId().

4) 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.

5) Setelah itu, kita buat file activity ViewGambar.java yang berfungsi untuk menampilkan gambar tunggal dari gallery menggunakan ImageView. Buka file activity_view_gambar.xml, Kalian buat layoutnya seperti ini.
<?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"
    android:gravity="center"
    android:background="#000000"
    tools:context="android.cianjur.developer.net.basicandroid.ViewGambar">

    <ImageView
        android:id="@+id/viewImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
Buka file AndroidManifest.xml (didalam direktori main), disini kita akan menghilangkan ActionBar bawan pada Activity ViewGambar, kalian tambahkan atribut berikut ini, didalam Activity ViewGambar.
<activity android:name=".ViewGambar"
      android:theme="@style/Theme.AppCompat.NoActionBar">
</activity>
6) Berikutnya buka file ViewGambar.java masukan source code berikut:
package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class ViewGambar extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_gambar);
        int imgPosition = this.getIntent().getExtras().getInt("posisi");
        ImageView iv = findViewById(R.id.viewImage);
        int getImage = ImageAdapter.gambar[imgPosition];
        iv.setImageResource(getImage);
    }
}
Pada imgPosition, kita memanggil key/kata kunci "posisi" untuk mendaptkan posisi dari Image yang sedang diklik.

Gambar akan ditampilkan pada ImageView, berdasarkan imgPosition/Posisi gambar yang user klik, didalam variable getImage, disana kita medapatkan gambar pada variable Array (gambar) didalam , class ImageAdapter, sesuai dengan posisi pada gambar

Lalu menampilkannya menggunakan fungsi setImageResource().

7) Selanjutnya buka file MainActiviy.java, Masukan source code berikut ini:
package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements OnItemClickListener{

    //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 dalam GrdiView diklik
        TampilanGrid.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView adapterView, View view, int position, long l) {
        Toast.makeText(MainActivity.this, "Posisi yan diklik : "+position, Toast.LENGTH_SHORT).show();
        Intent nextPage = new Intent(this, ViewGambar.class);
        Bundle bundle = new Bundle();
        //Menyimpan nilai dari padameter position kedalah key posisi.
        //Yang akan dikirimkan pada Activiy ViewGambar
        bundle.putInt("posisi", position);
        nextPage.putExtras(bundle);
        startActivity(nextPage);
    }
}
Didalam method onItemClick(), kita mengirimkan data berupa posisi gambar, dengan Mempassing data menggunakan Bundle dan Intent.

 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
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.