Senin, 01 Desember 2014

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 :

Pertemuan 6, Membuat horizontal scroll view di android dengan menggunakan eclipse, 30 Desember 2014

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!!!!