Tutorial Android Membuat Image Gallery (Galeri Gambar) Menggunakan GridView

Last Updated on 12 years by Mas Herdi

Hai, bagi kalian yang seorang web development, pasti mengenal tentang grid element atau grid layout. Yaitu sebuah sistem layout dua dimensi yang dibagi lagi menjadi beberapa bagian. Contohnya seperti layout pada Pinterest atau Twitter Bootstrap. Dan ternyata di Android juga ada sistem layout yang menggunakan grid, yang dinamakan GridView. Kali ini saya akan berbagi tutorial tentang bagaimana membuat gallery image (galeri gambar) dengan menggunakan GridView sebagai layout-nya. Nantinya gambar-gambar di gallery kita akan tampil seperti pada Instagram 😀 Menarik bukan? Oke langsung saja ke tutorialnya~

Membuat Gallery Image menggunakan GridView

Oke, 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, disiapkan saja dulu 😀

Kalau 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 :

Android Grid Layout

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 :

package ganti.dengan.nama.packagemu;

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

public class ImageAdapter extends BaseAdapter {
	private Context mContext;

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

	public static Integer[] mThumbIds =
		{
			//Gambar-gambar yang ada disimpan dalam array

			R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7
		};

	@Override
	public int getCount() {
		// Jumlah total gambar
		return mThumbIds.length;
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// Mengambil satu gambar dari gallery
		ImageView imageView;
if (convertView == null) {  // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
	}
}

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 :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_followed_top"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:weightSum="1"
    android:orientation="vertical"
    >
		<GridView
		    android:id="@+id/gridview_followed"
		    android:layout_width="match_parent"
		    android:layout_height="match_parent"
		    android:columnWidth="90dp"
		    android:numColumns="auto_fit"
		    android:verticalSpacing="10dp"
		    android:horizontalSpacing="10dp"
		    android:stretchMode="columnWidth"
		    android:gravity="center"
		    >
		</GridView>
</LinearLayout>

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 :

package ganti.dengan.nama.packagemu;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnItemClickListener, OnClickListener{

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView = (GridView) findViewById(R.id.gridview_followed);
        gridView.setAdapter(new ImageAdapter (this));
        gridView.setOnItemClickListener(this);
    }

	@Override
	public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
		// TODO Auto-generated method stub
		Toast.makeText(MainActivity.this, "Klik di"+position, Toast.LENGTH_SHORT).show();
		Intent i = new Intent(this, SingleImage.class);
		Bundle b = new Bundle();
		b.putInt("posisi", position);
		i.putExtras(b);
		startActivity(i);
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
	}
}

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 :

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

    <ImageView
        android:id="@+id/singleimage"
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:contentDescription="gambar tunggal"
        android:layout_gravity="center_horizontal|center_vertical"
        android:layout_weight="1"
    />

</LinearLayout>

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

package ganti.dengan.nama.packagemu

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

public class SingleImage extends Activity {

	 @Override
	    public void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.singleimage);

	        int imId = this.getIntent().getExtras().getInt("posisi");
	        ImageView iv = (ImageView) findViewById(R.id.singleimage);
	        int image = ImageAdapter.mThumbIds[imId];
	        iv.setImageResource(image);

	    }
}

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:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="id.sg.apollo.sg"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar"

        >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".SingleImage"
            android:label="@string/app_name"
            >
        </activity>
    </application>
</manifest>

That’s all.

Demo

Ketika aplikasi tersebut dijalankan, inilah screenshot dari aplikasi :

Tampilan Utama GridView Gallery

Tampilan Single Image pada GridView Gallery

Semoga bermanfaat :). Keep develop.