Tutorial Android GridView Sederhana

Dalam tutorial ini, kita akan belajar cara 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 proyek baru di Eclipse, pilih File> New> Android Application Project. Isikan rincian dan nama 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

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(new OnItemClickListener() {
            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 adapter GridView. Pada GridView jika Item klik, akan menampilkan aktivitas baru yang disebut kelas ViewImage.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
 

 Output:

Kami telah menyiapkan beberapa contoh gambar untuk tutorial ini. Masukkan gambar sampel yang di download ke res > drawable-hdpi

Contoh Gambar 

• Download Gambar

Selanjutnya, membuat kelas baru dengan nama ImageAdapter.java. Buka File> New> Class dan beri nama ImageAdapter.java. Pilih paket Anda bernama com.androidbegin.gridviewtutorial dan klik Finish.

Buka ImageAdapter.java Anda dan paste kode berikut.

ImageAdapter.java

package com.androidbegin.gridviewtutorial;
 
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
 
public class ImageAdapter extends BaseAdapter {
    private Context mContext;
 
    public ImageAdapter(Context c) {
        mContext = c;
    }
 
    public int getCount() {
        return mThumbIds.length;
    }
 
    public Object getItem(int position) {
        return null;
    }
 
    public long getItemId(int position) {
        return 0;
    }
 
    // Create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        // if it's not recycled, initialize some attributes
        if (convertView == null) {
            imageView = new ImageView(mContext);
            // Center crop image
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        } else {
            imageView = (ImageView) convertView;
        }
        // Set images into ImageView
        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }
 
    // References to our images in res > drawable
    public Integer[] mThumbIds = { R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4,
            R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_8, R.drawable.sample_9, R.drawable.sample_10,
            R.drawable.sample_11, R.drawable.sample_12, R.drawable.sample_13,
            R.drawable.sample_14, R.drawable.sample_15, R.drawable.sample_16,
            R.drawable.sample_17, R.drawable.sample_18 };
}

Dalam activity ini, gambar direferensikan oleh id image dan disimpan ke dalam array Integer. Dalam metode getView, gambar diatur ke dalam ImageViews diikuti oleh posisi.

Selanjutnya, membuat activity baru di kelas baru yang disebut SingleItemView.java. Buka File> New> Class dan beri nama SingleItemView.java. Pilih paket Anda bernama com.androidbegin.gridviewtutorial dan klik Finish.

Buka SingleItemView.java Anda dan paste kode berikut.

SingleItemView.java

package com.androidbegin.gridviewtutorial;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
 
public class SingleItemView extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Get the view from singleitemview.xml
        setContentView(R.layout.single_item_view);
 
        // Get position from intent passed from MainActivity.java
        Intent i = getIntent();
 
        int position = i.getExtras().getInt("id");
 
        // Open the Image adapter
        ImageAdapter imageAdapter = new ImageAdapter(this);
 
        // Locate the ImageView in single_item_view.xml
        ImageView imageView = (ImageView) findViewById(R.id.image);
 
        // Get image and position from ImageAdapter.java and set into ImageView
        imageView.setImageResource(imageAdapter.mThumbIds[position]);
    }
}

Aktivitas ini mengambil posisi dari klik Item GridView di MainActivity.java dengan menggunakan intent. Kemudian kita gunakan setImageResource untuk mendapatkan gambar dari ImageAdapter menggunakan posisi sebagai referensi dan mengatur gambar ke ImageView.

Selanjutnya, membuat file XML untuk Anda SingleItemView Graphical Layout. Buka res> Layout> Klik kanan pada Layout> New> Android XML file

Nama baru file XML singleitemview.xml Anda dan paste kode berikut.

singleitemview.xml

Selanjutnya, ganti nama aplikasi. Buka strings.xml di res > values folder dan paste kode berikut.
 
strings.xml

 
    GridView Tutorial
    Hello world!
    Settings
 

Dalam AndroidManifest.xml , kita perlu mendeklarasikan activity SingleItemView.java. Buka AndroidManifest.xml dan paste kode berikut.

AndroidManifest.xml 

• Download Code