Membuat Image Gallery dalam Android

Contoh Kasus:

Saya ingin membuat Gallery Mobil Seperti terlihat pada gambar dibawah ini:

Jadi ketika saya mengklik gambar mobil yang kecil maka akan tampil gambar mobil yang besar dibawahnya.

Pertanyaan:

Bagaimana membuatnya … ?

Jawaban:

Buatlah satu proyek android bernama Gallery, jika tidak tahu caranya maka kamu bisa lihat disini.

Perubahan file main.xml

Rubahlah file main.xml sehingga seperti kode dibawah ini:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” 

android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:weightSum=”1″ >

<TextView

android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Gallery Mobil”
android:gravity=”center”
android:paddingTop=”5px”
android:textSize=”24px”

/>
<Gallery

android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/gallery_gambar”
android:layout_weight=”0.22″¬† />

<ImageView

android:id=”@+id/gambar_besar”
android:layout_width=”320px”
android:layout_height=”250px”
android:scaleType=”fitXY” />

</LinearLayout>

Pembuatan Resources

Buatlah sebuah file xml bernama attrs.xml dalam direktori res/values dengan isi seperti kode dibawah ini:

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
<declare-styleable name=”style_gallery”>
<attr name=”android:galleryItemBackground” />
</declare-styleable>
</resources>

Peletakkan Gambar

Ambillah 4 gambar yang kamu inginkan dan letakkan dalam folder res/drawable-mdpi serta namai masing-masing gambar dengan nama mobil1, mobil2, mobil3, mobil4 sehingg terlihat seperti gambar dibawah ini:

Perubahan file GalleryActivity

Rubahlah file GalleryActivity.java dengan kode seperti dibawah ini:

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
public class GalleryActivity extends Activity {
 

Integer[] imageIDs={

R.drawable.mobil1,
R.drawable.mobil2,
R.drawable.mobil3,
R.drawable.mobil4

};

@Override
public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Gallery gallery=(Gallery)findViewById(R.id.gallery_gambar);
gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener(){

public void onItemClick(AdapterView<?> parent, View v, int position, long id){

Toast.makeText(getBaseContext(), “Gambar”+(position+1)+” terpilih”, Toast.LENGTH_SHORT).show();

ImageView imageView=(ImageView) findViewById(R.id.gambar_besar);
imageView.setImageResource(imageIDs[position]);

}});

}

public class ImageAdapter extends BaseAdapter{

private Context context;
private int itemBackground;

public ImageAdapter(Context c){

context =c;
TypedArray a = obtainStyledAttributes(R.styleable.style_gallery);
itemBackground = a.getResourceId(R.styleable.style_gallery_android_galleryItemBackground, 0);
a.recycle();

}

public int getCount(){

return imageIDs.length;

}

public Object getItem(int position){

return position;

}

public long getItemId(int position){

return position;

}

public View getView(int position, View convertView, ViewGroup parent){

ImageView imageView=new ImageView(context);
imageView.setImageResource(imageIDs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setLayoutParams(new Gallery.LayoutParams(150,120));
imageView.setBackgroundResource(itemBackground);
return imageView;

}

}

}

Keterangan:

  • R.drawable.mobil1, kode ini akan menuju ke file gambar mobil1.jpg yang berada pada folder res/drawable-mdpi
  • (Gallery)findViewById(R.id.gallery_gambar), Kode ini berarti saya mencari elemen view yang mempunyai id=”gallery_gambar lalu mengcasting tipenya menjadi objek Gallery.
  • gallery.setAdapter(new ImageAdapter(this)), Kode ini digunakan untuk memberikan data ke objek gallery.
  • obtainStyledAttributes(R.styleable.style_gallery), Kode ini digunakan untuk mengambil semua attribut dari elemen Style XML yang mempunyai id=”style_gallery”.
  • a.getResourceId(R.styleable.style_gallery_android_galleryItemBackground, 0), kode ini digunakan untuk mengambil id dari attribut “android:galleryItemBackground” yang terdapat dalam style yang mempunyai name=”style_gallery”, sedangkan nilai 0 adalah nilai default.
  • getCount() adalah sebuah metode untuk jumlah data.
  • getItem(int position), Kode ini digunakan untuk mengambil gambar yang berada pada posisi ke – (angka dari position).
  • getItemId(int position),¬†Kode ini digunakan untuk mengambil id dari gambar yang berada pada posisi ke – (angka dari position).
  • imageView.setImageResource(imageIDs[position]), Kode ini digunakan untuk memberikan gambar dari folder drawable yang mempunyai id dari nilai imageIDS[position] ke objek imageView.
  • imageView.setScaleType(ImageView.ScaleType.FIT_XY), Kode ini digunakan untuk memberikan tipe skala gambar yang otomatis menyesuaikan dengan bingkai imageView,
  • imageView.setLayoutParams(new Gallery.LayoutParams(150,120)), Kode ini digunakan untuk membuat lebar bingkai=150 dan tinggi bingkai=120.
  • imageView.setBackgroundResource(itemBackground), Kode ini digunakan untuk mengeset background ke objek imageView dengan nilai dari itemBackground.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *