Cara Membuat Gallery Gambar Dengan GridView Di Android

Pada tutorial kali ini, saya akan membahas bagaimana cara membuat sebuah gallery sederhana di android menggunakan widget GridView. Untuk membuatnya silahkan ikuti langkah langkah berikut ini :

Gallery Gambar Dengan GridView

Petama kita buat project baru di eclipse (File –> New –> Project –> Android Application Project) dengan nama terserah anda

Kemudian  siapkan dulu gambar yang akan kita jadikan gallery kemudian  copy dan paste gambar yang sudah kita siapkan tadi di folder res –> drawable-mdpi . 

Kemudian ketikkan source code di layout "main.xml" seperti di bawah ini:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>

<GridView
    android:id="@+id/gridView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="4" >

</GridView>

</LinearLayout>

Lalu buat layout baru dengan nama  "singleimage.xml" untuk menampilkan gambar setelah gambar di klik atau di sentuh dan ketikkan source code seperti di bawah ini:

<?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/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:contentDescription="gambar tunggal"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_weight="1"
/>

</LinearLayout>

Kemudian buat class baru pada package dengan nama "GridActivity.java" dan ketikkan source code seperti di bawah ini:

package com.gallerygridview;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;

public class GridActivity extends Activity {

public static Integer[] imageIDS = {

R.drawable.aulia,
R.drawable.aulia1,
R.drawable.aulia2,
R.drawable.aulia3,
R.drawable.aulia4,
R.drawable.aulia5,
R.drawable.aulia6,
R.drawable.aulia7,
R.drawable.aulia8,
R.drawable.aulia9,
R.drawable.aulia10,
R.drawable.aulia11,
R.drawable.aulia12,
R.drawable.aulia13,
R.drawable.aulia14,
R.drawable.aulia15,
R.drawable.aulia16,
R.drawable.aulia17,
R.drawable.aulia18,
R.drawable.aulia19,
R.drawable.aulia20,
R.drawable.aulia21,
R.drawable.aulia22,
R.drawable.aulia23};
GridView gridView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new ImageAdapter(this));
gridView.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View v, int position,
long id) {
Toast.makeText(getBaseContext(), "Gambar " + (position + 1) + " yang di pilih",
Toast.LENGTH_SHORT).show();
detail(position);
}
});
}

protected void detail(int position) {
Intent i = new Intent(this, SingleImage.class);
Bundle b = new Bundle();
b.putInt("posisi", position);
i.putExtras(b);
startActivity(i);

}

public class ImageAdapter extends BaseAdapter{

Context context;
int itemBackground;
public ImageAdapter(Context c){
context = c;
}
@Override
public int getCount() {
return imageIDS.length;
}

@Override
public Object getItem(int position) {
return position;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if(convertView == null){
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(120, 120));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(5, 30, 5, 5);
}else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(imageIDS[position]);
return imageView;
}

}
}

Kemudian buat class lagi baru pada package dengan nama "SingleImage.java" dan ketikkan source code seperti di bawah ini:

package com.gallerygridview;

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

public class SingleImage extends Activity{

ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.singleimage);
int imId = this.getIntent().getExtras().getInt("posisi");
img = (ImageView) findViewById(R.id.imageView1);
int image = GridActivity.imageIDS[imId];
img.setImageResource(image);
}
}

Berikut ini adalah Screenshots dari  Gallery Gambar Dengan GridView Di Android

Selamat mencoba dan semoga berhasil, jika ada keluhan atau tutorial yang kurang jelas silahkan tinggalkan komentar. Terima Kasih!