Rabu, 03 Desember 2014

Pt 6, Membuat Grid View Image di Android dengan menggunakan eclipse, 4 Desember 2014

 tutorial 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, intp, 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 :
Diposting oleh di Tidak ada komentar:
Label:

Pt5, membuat Grid View di Android menggunakan Eclipse, 4 desember 2014

pada pertemuan ini kita akan membuat GridView sederhana dalam aplikasi Android.GridView memungkinkan Anda untuk menampilkan gambar dalam bentuk kotak vertikal.Kami akan membuat GridView dan pada GridView jika di klik akan menampilkan gambar yang dipilih pada aktivitas baru. Jadi mari kita mulai ...

Buat project baru di Eclipse, pilih File> New> Android Application Project. Isikan rincian dannama GridViewTutorial pada proyek Anda.

Nama Aplikasi: GridViewTutorial
Nama Proyek: GridViewTutorial
Paket Nama: com.androidbegin.gridviewtutorial

Buka MainActivity.java Anda dan paste kode berikut.

MainActivity.java

?
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
package com.androidbegin.gridviewtutorial;
  
import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;
import android.view.View;
  
public class MainActivity extends Activity {
  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Get the view from gridview_main.xml
        setContentView(R.layout.gridview_main);
  
        // Locate GridView in listview_main.xml
        GridView gridview = (GridView) findViewById(R.id.gridview);
  
        // Set the ImageAdapter into GridView Adapter
        gridview.setAdapter(new ImageAdapter(this));
  
        // Capture GridView item click
        gridview.setOnItemClickListener(newOnItemClickListener() {
            public void onItemClick(AdapterView parent, View v,
                    int position, long id) {
  
                // Launch ViewImage.java using intent
                Intent i = new Intent(MainActivity.this, ViewImage.class);
  
                // Show the item position using toast
                Toast.makeText(MainActivity.this, "Position " + position,
                        Toast.LENGTH_SHORT).show();
  
                // Send captured position to ViewImage.java
                i.putExtra("id", position);
  
                // Start ViewImage.java
                startActivity(i);
            }
        });
    }
  
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_grid_view, menu);
        return true;
    }
}

Activity ini mengambil gambar dari kelas ImageAdapter.java dan menghubungkan ke adapterGridView. Pada GridView jika Item klik, akan menampilkan aktivitas baru yang disebut kelasViewImage.java. Kemudian toast message akan menunjukkan posisi saat ini dari GridView saat di klik.

Sekarang mari kita buat sebuah file XML untuk GridView untuk Layoutnya. Pergi ke res> layout> Klik kanan pada layout> New> Android XML file

Beri nama file XML dengan gridview_main.xml dan paste kode berikut.

gridview_main.xml
  
?
1
2
3
4
5
6
<!--?xml version="1.0" encoding="utf-8"?-->
<relativelayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent">
  
    <imageview android:id="@+id/image"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerinparent="true">
  
</imageview></relativelayout>
 Output:
Diposting oleh di Tidak ada komentar:
Label:

Pt 4, Membuat Listview dengan menggunakan Eclipse, 4 Desember 2014

Minggu ini kita akan membahas mengenai cara membuat listview dengan menggunakan Eclipse. berikut adalah tahapan-tahapannya:

Pertama – tama buka eclipsenya.
    1. Buat project baru di Eclipse dengan cara File ⇒ New Project ⇒ Application Project dan beri nama main classnya ListViewActivity.
    2. Kemudian untuk menampilkan daftar String yang akan di tampilkan bisa harcode di kodingnya atau bisa juga di buatkan file khusus yang menampung String tersebut dalam bentuk String Array.
    3. Buatlah Sebuah file list_data.xml dengan cara klik kanan pada res/values⇒ New ⇒ Android XML File dan masukkan code di bawah ini

1
2
3
4
5
6
7
8
9
10
11
<resources>
    <string-array name="theHeranList">
        <item>Java Documentation</item>
        <item>Java Programming</item>
        <item>Android Programing</item>
        <item>Swing Programming</item>
        <item>News Java</item>
        <item>The Heran</item>
    </string-array>
</resources>
</strong>
    1. Buatlah satu file list_item.xml pada folder res/layout ⇒ New ⇒ Android XML File
1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:textSize="16dip"
    android:textStyle="bold" >
</TextView>
    1. Nah sekarang buka file class ListViewActivity yang sudah di buat tadi dan ketik/copy code di bawah ini. Pada bagian ini akan mengambil semua data dari resource file xml yang sudah di buat sebelumnya. Data – data tersebut kemudian di simpan dalam bentuk array yang selanjutnya akan di kaitkan pada method ListAdadapter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.theheran.listview;

import com.theheran.listview.R;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class ListViewActivity extends ListActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Ambil Data dan di simpan dalam bentuk Array
        String[] adobe_products = getResources().getStringArray(R.array.theHeranList);

        // Konversi array ke adalam listAdapter
        this.setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.label, adobe_products));
    1. Kemudian buatlah satu buah class yang akan menampung String dari main class. src/package folder ⇒ New ⇒ Class Dan beri nama SingleList. (SingleList.java). Setelah itu tambahkan kode di bawah ini pada main classListViewActivity sehinggga kode lengkapnya menjadi seperti di bawah ini

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
package com.theheran.listview;import com.theheran.listview.R;import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class ListViewActivity extends ListActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Ambil Data dan di simpan dalam bentuk Array
String[] adobe_products = getResources().getStringArray(R.array.theHeranList);

// Konversi array ke adalam listAdapter
this.setListAdapter(new ArrayAdapter(this, R.layout.list_item, R.id.label, adobe_products));

ListView lv = getListView();

// Fungsi klik pada list
lv.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View view,
int position, long id) {

// Memilih item
String product = ((TextView) view).getText().toString();

//memanggil aktivity baru ketika salah satu list di pilih
Intent i = new Intent(getApplicationContext(), SingleList.class);
// mengirim data ke ke aktivity baru dengan kata kunci "kategori"
i.putExtra("kategori", product);
startActivity(i);

}
});
}
}
    1.  
    2. Selanjutnya activity yang sudah di panggil tersebut tentu harus dapat menerima dan menampilkan data oleh karena itu tahap selanjutnya adalah membuat design atau layout untuk menerima data . buatlan file single_list_view.xml dan ketik kode di bawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <TextView android:id="@+id/kategori_label"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="25dip"
            android:textStyle="bold"
            android:padding="10dip"
            android:textColor="#ffffff"/>
</LinearLayout>
    1. Tahap berikutnya setelah layout untuk menerima sebuah data sudah di buat maka buka kembali class SingleList dan ketik kode di bawah ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package com.theheran.listview;
import com.theheran.listview.R;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;

public class SingleList extends Activity{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.single_list_view);

        TextView txtProduct = (TextView) findViewById(R.id.kategori_label);

        Intent i = getIntent();
        //Menerima data yang di kirim.
        String product = i.getStringExtra("kategori");
        // Menampilkan data yang sudah di pilih
        txtProduct.setText(product);

    }
}
    1. Tahap terakhir adalah melakukan konfigurasi pada fileAndroidManifest.xml.modifikasi file tersebut sehingga menjadi seperti di bawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.theheran.listview"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon"android:label="@string/app_name">
        <activity android:name="com.theheran.listview.ListViewActivity"
                  android:label="Android List View">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name="com.theheran.listview.SingleList"
                    android:label="Single Item Selected"></activity>

    </application>
</manifest>
    1. Finally jalankan project dengan cara Klik kanan pada project⇒ Run As ⇒1 Android Application







Diposting oleh di Tidak ada komentar:
Label:
Langganan: Komentar (Atom)