Blog

Dalam membuat aplikasi android, terkadang dibutuhkan suatu mekanisme untuk menampilkan gambar dalam bentuk yang menarik yaitu berupa galeri gambar secara horizontal yang dapat digeser, sebagai contoh pada gambar berikut :

Pada gambar di atas, galeri gambar ditempatkan pada suatu dialog dimana proses pembuatan dialog tidak di bahas pada artikel ini. Untuk membuat tampilan galeri gambar seperti di atas (lingkaran merah), android menyediakan kelas “Gallery” yang dapat menampilkan kolekse gambar dalam bentuk terkait. Dalam penggunaannya, dikarenakan “Gallery” merupakan adapter view yang dapat menampilkan kumpulan view (dalam artikel ini view berupa gambar beserta string label) maka kita perlu membuat suatu adapter untuk mendefenisikan penampilan setiap komponen (gambar dan label terkait) di dalam Gallery. Sebagai contoh adalah adapter berikut yang bersesuaian dengan gambar di atas dimana setiap gambar disimpan sebagai array of byte :

[sourcecode language="java"]
class ImageGalleryAdapter extends BaseAdapter {
private Context mContext;
private byte[][] arrayImageByteStream;
private String[] arrayImageLabel;

public ImageGalleryAdapter(Context c, byte[][] imgStream, String[] imgLabel){
this.mContext = c;
this.arrayImageByteStream = imgStream;
this.arrayImageLabel = imgLabel;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return arrayImageByteStream.length;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View v;
if(convertView==null){
LayoutInflater li = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = li.inflate(R.layout.icon, null);
byte[] tmpImg = arrayImageByteStream[position];
String tmpLabel = arrayImageLabel[position];
if (tmpImg != null && tmpLabel != null)
{
TextView tv = new TextView(this);
tv.setText(tmpLabel);
ImageView iv = new ImageView(this);
ByteArrayInputStream stream = new ByteArrayInputStream(tmpImg);
iv.setImageDrawable(Drawable.createFromStream(stream, "img"));
}
}
else {
v = convertView;
}
return v;
}

public Object getItem(int arg0) {
return arg0;
}

public long getItemId(int arg0) {
return arg0;
}
}
[/sourcecode]

Setelah adapter terdefenisi maka Gallery siap untuk dipakai dalam menampilkan koleksi gambar seperti yang diimplementasikan pada fungsi showGalleryImage(). Yang perlu diperhatikan adalah bahwa sebelum fungsi showGalleryImage() digunakan maka imageByteStream dan imageLabel diinisialisasi terlebih dahulu dengan gambar-gambar dan label-label terkait.

[sourcecode language="java"]
private byte[][] imageByteStream;
private String[] imageLabel;

public void showGalleryImage() {
if (imageByteStream != null && imageLabel != null) {
Gallery pageGallery = new Gallery(this);
pageGallery.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
pageGallery.setPadding(10, 10, 10, 10);
pageGallery.setGravity(Gravity.CENTER);
pageGallery.setAdapter(new ImageGalleryAdapter(this, imageByteStream, imageLabel));
pageGallery.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
// MELAKUKAN AKSI TERTENTU
}
});
LinearLayout galleryImageLayout = new LinearLayout(this));
galleryImageLayout.setOrientation(LinearLayout.VERTICAL);
galleryImageLayout.setGravity(Gravity.CENTER);
galleryImageLayout.addView(pageGallery);
setContentView(galleryImageLayout);
}
}
[/sourcecode]

Selanjutnya property-property layout dari Gallery bisa diatur agar lebih menarik, misalnya untuk menampilkan galeri gambar sebagai berikut :