Pertemuan 6, Membuat Grid View Image di Android dengan menggunakan eclipse, 30 Desember 2014

Pada tutorial singkat ini saya akan menjelaskan cara membuat galeri foto sederhana menggunakan GridView pada platform smartphone berbasis Android. Ok, kita mulai saja langkah-langkahnya..
1. Buat project android seperti biasa
2. Siapkan gambar kecil sejumlah 6 aja cukup, gambar ini yang akan kita gunakan sebagai demo galeri foto pada gridview
3. Copy 6 gambar tersebut ke dalam folder /res/drawable. Jika tidak ada silahkan dibikin sendiri.
4. Pada contoh tutorial ini, gambar yang saya gunakan berformat jpg.. Dan bernama c1,c2,c3, hingga c6.
5. Jika sudah, buat layout xml bernama cell.xml. Layout ini akan kita gunakan sebagai konten/ isi dari gridview.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?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="88dp"         android:layout_height="122dp"         android:layout_gravity="center_horizontal" />       <TextView         android:id="@+id/keterangan"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:text="keterangan" />   </LinearLayout>

6. Buat layout xml bernama grid_layout.xml. Layout ini akan kita gunakan sebagai layout utama gridview.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?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" >       <GridView         android:id="@+id/grid"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:columnWidth="100dip"         android:gravity="center"         android:horizontalSpacing="5dip"         android:numColumns="auto_fit"         android:stretchMode="columnWidth"         android:verticalSpacing="40dip" />   </LinearLayout>

7. Yang terakhir adalah, buat class activity bernama GridDemo.java yang berfungsi untuk menghandle layout dan gridview didalamnya. Berikut source code dan penjelasan singkatnya.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

public class GridDemo extends Activity implements OnItemClickListener {     // data buku     private static final String[] items = { "buku 1", "buku 2", "buku 3",             "buku 4", "buku 5", "buku 6" };     // gambar buku     private int[] imageID = { R.drawable.c1, R.drawable.c2, R.drawable.c3,             R.drawable.c4, R.drawable.c5, R.drawable.c6 };       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.grid_layout);           GridView g = (GridView) findViewById(R.id.grid);           // set adapter gridview         g.setAdapter(new IconAdapter());           // beri action saat click         g.setOnItemClickListener(this);     }       private class IconAdapter extends ArrayAdapter<String> {           // konstruktor memanggil method super() dari class parent nya         public IconAdapter() {             super(GridDemo.this, R.layout.cell, items);         }           @Override         public View getView(int position, View convertView, ViewGroup parent) {             // instansiasi row dari convertView             View row = convertView;               if (row == null) {                 // inflate layout                 LayoutInflater inflater = getLayoutInflater();                 row = inflater.inflate(R.layout.cell, parent, false);             }             ImageView imageView = (ImageView) row.findViewById(R.id.imageView1);             TextView keterangan = (TextView) row.findViewById(R.id.keterangan);               // set skala gambar             imageView.setScaleType(ScaleType.FIT_XY);               // set keterangan dan gambar berdasarkan position             keterangan.setText(items[position]);             imageView.setImageResource(imageID[position]);             // kembalikan objek view             return row;         }       }       @Override     public void onItemClick(AdapterView<?> arg0, View arg1, int p, long arg3) {         //tampilkan pesan pop up saat click.         Toast.makeText(GridDemo.this, items[p] + " clicked!",                 Toast.LENGTH_SHORT).show();       } }

Sekarang compile.. dan ta da..! hasil nya seperti berikut.
Vertical :

Horizontal :