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"?> 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> |
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"?> 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> |
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(); }} |
Vertical :
Horizontal :
