Membuat Aplikasi Android Gallery View

Membuat Aplikasi Android Gallery View - Galery view adalah layout aplikasi android yang menampilkan item - item gambar dalam bentuk seperti galery. Galery view biasanya kita gunakan untuk melihat kumpulan foto atau gambar yang kita miliki dalam perangkat android kita. Galery view memudahkan kita mengenali gambar di bandingkan dengan menampilkan hanya nama gambar tersebut.

Baca juga : Membuat Aplikasi Android Image Switcher View

Buatlah Sebuah Project Android Baru

Sebelum anda memulai membuat project, apa bila anda baru memulai membuat aplikasi android dan belum menginstal software yang diperlukan harap di instal terlebih dahulu, untuk cara penginstalan software yang di butuhkan baca di sini Cara Instalasi Package Untuk Membuat Aplikasi Android.

Untuk langkah - langkah membuat project baru lihat disini Cara Membuat Aplikasi Android

Buatlah sebuah project dengan property :

Project name            : Gallery View

Build Target              : Android 2.3

Application name      : gallery

Package                   : com.wilis.gallery

Activity                     : gallery
Min SDK                 : 9

1. Perisapan Awal

Pertama siapkan terlebih dahulu lima buah gambar sebagai contoh gambar di gallery yang kita buat nanti. simpan gambar tersebut di dalam direktori folder res/drawabe-hdpi seperti gambar di bawah ini :

2. displayview.xml

Buat sebuah file layout xml di dalam res/layout dengan nama displayview.xml. dengan isi script seperti 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">
  
<textview  
 android:layout_height="wrap_content" 
 android:layout_width="fill_parent" 
 android:text="Pemandangan Alam"/>

<gallery 
 android:layout_height="wrap_content" 
 android:id="@+id/gallery1" 
 android:layout_width="fill_parent"/>

<imageview 
 android:layout_height="250px" 
 android:layout_width="320px" 
 android:id="@+id/image1" 
 android:scaleType="fitXY"/>

</LinearLayout>

3. gallery.java

Ubah isi script gallery.java di dalam src menjadi seperti ini :

package com.wilis.gallery;

import android.app.Activity;
import android.os.Bundle;
import android.content.Context;
import android.content.res.TypedArray;
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 gallery extends Activity {
 Integer[] imageIDs = {
    R.drawable.image1,
       R.drawable.images2,
       R.drawable.images3,
       R.drawable.images4,
       R.drawable.images5
     };
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
     
     
        super.onCreate(savedInstanceState);
        setContentView(R.layout.displayview);
        
        Gallery gallery = (Gallery)findViewById(R.id.gallery1);
        
        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemClickListener(new OnItemClickListener(){
   public void onItemClick(AdapterView parent, View v, int position, long id){
          Toast.makeText(getBaseContext(), "Pic"+(position + 1)+" Selected", Toast.LENGTH_SHORT).show();
         }
        });
    }
    
    public class ImageAdapter extends BaseAdapter{
     
     private Context context;
     private int itemBackground;

  public ImageAdapter(Context c) {
   // TODO Auto-generated constructor stub
   context=c;
  }

  @Override
  public int getCount() {
   // TODO Auto-generated method stub
   return imageIDs.length;
  }

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

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

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
   // TODO Auto-generated method stub
   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;
  }    
    }
}

4. ViewsActivity.java

Ubah isi script ViewsActivity.java menjadi seperti ini :

package com.wilis.gallery;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

public class ViewsActivity extends Activity {
 public void onCreate(Bundle SavedInstanceState){
  super.onCreate(SavedInstanceState);
  setContentView(R.layout.main);
  
  startActivity(new Intent(this, gallery.class));
 }
}

Sekarang coba anda running project anda dengan menekan CTRL + F11. maka hasilnya akan seperti gambar di awal.
Sekaran coba anda ubah script pada gallery.java pada bagian ini :

public void onItemClick(AdapterView parent, View v, int position, long id){
          Toast.makeText(getBaseContext(), "Pic"+(position + 1)+" Selected", Toast.LENGTH_SHORT).show();
         }

Menjadi seperti ini :

public void onItemClick(AdapterView parent, View v, int position, long id){
    ImageView imageView = (ImageView) findViewById(R.id.image1);
    imageView.setImageResource(imageIDs[position]);
         }

Maka sekarang apabila anda mengklik salah satu gambar maka akan muncul di bawah seperti pada gambar berikut :

Sumber :  Pemograman Aplikasi Mobile Smartphone dan tablet PC Berbasic Android Penerbit Informatika, Bandung, 2012 By : Nazruddin Safaat.

Aplikasi Android Gallery View anda sekarang sudah selesai, baca juga tutorial membuat aplikasi android lainnya.