Popular Post

Posted by : Unknown Wednesday, March 5, 2014

Asalamualaikum Wr.Wb.
selamat pegi sahabat bloger kali ini saya akan share bagaimana cara Membuat Tampilan galeri Sederhana degan GridView di Android bahan-bahan yang kita butuhkan

eclips >> bisa download di sini 
SDK dan ADT >> di download di sini

setelah bahan-bahan terkumpul kita mulai...
pertama kita buat project baru
klik file >> pilih new >> Android Aplication Project

Gambar 1.1 Membuat Projek Android
setehitu ikuti ja langkah selanjutnya...
untuk targetnya kita pilih yang 2.2 atau 2.3 biar semuanya bisa gunainnya, jangan lupa kita copy dulu fotonya di res >> drawable...

setelah itu buka activity_main.xml dan ketikkan kode berikut:

<?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>
lalu buatlah satu buah layout lagi bernama galeri.xml:
<?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>
Setealah kita buat layoutnya sekarang kita buat untuk MainActivitin.java

package com.andri.gridveiw;
import android.os.Bundle;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.TextView;
import android.widget.Toast;

 public class MainActivity extends Activity implements OnItemClickListener {
   // data buku
   private static final String[] items = { "IDMF", "My Farm", "Damar",
           "Damar", "Anwar", "Me", "Me", "Me", "Me" };
   // gambar buku
   private int[] imageID = { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,
    R.drawable.f, R.drawable.h, R.drawable.l, R. drawable.m, R.drawable.q };
 
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.galeri);
  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(MainActivity.this, R.layout.activity_main, 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.activity_main, 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(MainActivity.this, items[p] + " ^_^",
               Toast.LENGTH_SHORT).show();

   }
}
OK Siap di run deh...
kalo yang saya hasilnya gini..

OK demikian tutorial kali ini semoga bermanfaat...
janganlupa postkan komentarnya ya...
SALAM ITB...

Wasalamualaikum...



{ 1 comments... read them below or add one }

- Copyright © D4 ITB-SEAMOLEC - Date A Live - Powered by Blogger - Designed by Aris -