Tutorial Android Membuat Image

Gallery (Galeri Gambar)

Menggunakan GridView
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 layoutnya. Nantinya gambar-gambar di
gallery kita akan tampil seperti pada Instagram.

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 :
Setelah itu, buat kelas baru bernama ImageAdapter.java, kelas inilah yang
berfungsi sebagai adapter gambar-gambar yang akan ditampilkan di gallery.
Kode Programmnya :
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.

<?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. Kode
Programmnya:
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. Kode
Programnya:
<?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. Kode programmnya :
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. Kode programnya :

<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>
Ketika dijalankan :