Membuat Grid View Image di Android dengan menggunakan eclipse

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"?> <LinearLayoutxmlns: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"?> <LinearLayoutxmlns: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 implementsOnItemClickListener {     // 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 :

Membuat horizontal scroll view di android dengan menggunakan eclipse

Pada tutorial kali ini saya akan mencoba untuk membuat sebuah aplikasi Android yang akan menampilkan galery gambar. Langsung kita praktekin ok.

Langkah pertama buat sebuah project Android baru dengan nama galerygambar, pada build target pilih android 2.2, lalu pada properties tulis application name menjadi Galery Gambar, package name menjadi com.firdan, Create Activity menjadi myMain dan Min SDK version menjadi 8 seperti gambar dibawah ini.

Sebelumnya kita masukan dulu gambar2 yang akan digunakan dalam aplikasi ini ke dalam folder galerygambar – res – drawable-hdpi, gambarnya bisa anda gunakan seperti yang tersedia di bawah ini.

Selanjutnya kita edit file main.xml nya agar memiliki 1 buah imageview untuk menampilkan gambar utama, 2 buah textview untuk menampilkan informasi dan juga nama mengenai gambar tersebut dan 5 buah imageview lainnya yang ditampilkan secara horizontal scrollview untuk menampilkan daftar gambar yang tersedia. Pada TextView bagian informasi, saya menambhakan sebuah scrollview, jadi apabila informasi yang ditampilkan gambar tersebut banyak, maka para penggunanya dapat me-scroll informasi tersebut secara vertical.

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:id = "@+id/nama"

android:layout_width = "fill_parent"

android:layout_height= "wrap_content"

android:text = "Bayam"

android:textStyle = "bold"

android:gravity = "center"

/>

<ImageView

android:id = "@+id/gambarutama"

android:src = "@drawable/bayam"

android:layout_width = "250dp"

android:layout_height= "150dp"

android:layout_gravity = "center"

/>

<TextView

android:layout_width = "fill_parent"

android:layout_height= "50dp"

/>

<ScrollView

android:layout_width = "wrap_content"

android:layout_height = "150dp"

>

<LinearLayout

android:layout_width = "fill_parent"

android:layout_height= "150dp"

android:orientation = "vertical"

>

<TextView

android:id = "@+id/informasi"

android:layout_width = "fill_parent"

android:layout_height= "wrap_content"

/>

LinearLayout>

 

ScrollView>

 

<TextView

android:layout_width = "fill_parent"

android:layout_height= "50dp"

/>

<HorizontalScrollView

android:layout_width = "wrap_content"

android:layout_height= "100dp"

>

<LinearLayout

android:layout_width = "wrap_content"

android:layout_height= "wrap_content"

android:orientation = "horizontal"

>

<ImageView

android:id = "@+id/daftargambar1"

android:src = "@drawable/bayam"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar2"

android:src = "@drawable/susu"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar3"

android:src = "@drawable/roti"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar4"

android:src = "@drawable/buah"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

<ImageView

android:id = "@+id/daftargambar5"

android:src = "@drawable/telur"

android:layout_width = "75dp"

android:layout_height= "75dp"

/>

LinearLayout>

 

HorizontalScrollView>

 

LinearLayout>

 

Jika main.xml telah kita ubah seperti coding diatas, maka selanjutnya kita oprek file myMain.java yang terdapat pada folder src – com.firdan – myMain.java seperti dibawah ini.

package com.firdan;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageView;

import android.widget.TextView;

public class myMain extends Activity implements OnClickListener{

ImageView Display;

TextView informasi, nama;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

Display = (ImageView) findViewById (R.id.gambarutama);

ImageView gambar1 = (ImageView) findViewById (R.id.daftargambar1);

ImageView gambar2 = (ImageView) findViewById (R.id.daftargambar2);

ImageView gambar3 = (ImageView) findViewById (R.id.daftargambar3);

ImageView gambar4 = (ImageView) findViewById (R.id.daftargambar4);

ImageView gambar5 = (ImageView) findViewById (R.id.daftargambar5);

informasi = (TextView) findViewById (R.id.informasi);

nama = (TextView) findViewById (R.id.nama);

gambar1.setOnClickListener(this);

gambar2.setOnClickListener(this);

gambar3.setOnClickListener(this);

gambar4.setOnClickListener(this);

gambar5.setOnClickListener(this);

}

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

String nama1 = "Bayam";

String nama2 = "Susu";

String nama3 = "Roti";

String nama4 = "Buah-Buahan";

String nama5 = "Telur";

String info1 = "Bayam bagus untuk tubuh anda, anda bisa menjadi seperti popeye jika makan bayan :).";

String info2 = "Minum susu biar tinggi dan tulang anda menjadi kuat";

String info3 = "Roti merupakan makanan yang dapat menggantikan nasi, makan roti biar keliatan kaya orang bule dikit :P";

String info4 = "Buah-buahan sangat bagus untuk mendapatkan vitamin yang dibutuhkan bagi tubuh";

String info5 = "Telur merupakan sumber protein yang bagus untuk tubuh";

switch (v.getId()){

case R.id.daftargambar1:

nama.setText(String.valueOf(nama1));

Display.setImageResource(R.drawable.bayam);

informasi.setText(String.valueOf(info1));

break;

case R.id.daftargambar2:

nama.setText(String.valueOf(nama2));

Display.setImageResource(R.drawable.susu);

informasi.setText(String.valueOf(info2));

break;

case R.id.daftargambar3:

nama.setText(String.valueOf(nama3));

Display.setImageResource(R.drawable.roti);

informasi.setText(String.valueOf(info3));

break;

case R.id.daftargambar4:

nama.setText(String.valueOf(nama4));

Display.setImageResource(R.drawable.buah);

informasi.setText(String.valueOf(info4));

break;

case R.id.daftargambar5:

nama.setText(String.valueOf(nama5));

Display.setImageResource(R.drawable.telur);

informasi.setText(String.valueOf(info5));

break;

}

}

}

Setelah coba kita jalankan program tersebut pada emulator android, maka tampilannya akan seperti gambar di bawah ini :

Mudah bukan membuat sebuah galery gambar :). Semoga tutorial ini berguna bagi yang menggunakannya dan jangan lupa. Keep a rockin in the free world!!!!