Gridview adalah komponen utama di android selain dari Listview. Gridview dan listview mempunyai model yang sama. Perbedaannya terletak pada layoutnya saja. Kali ini, saya akan menjelaskan teknik membuat gridview dengan contoh negara. Hah negara lagi? Aplikasi ini akan menampilkan bendera 4 negara (contoh datanya cuma 4 ) dan saat bendera di klik, maka akan menampilkan halaman wikipedia dari negara tersebut.
Tampilan Grid

Untuk membuat aplikasi ini kita membutuhkan 3 file XML dan 3 file java.
- grid_item.xml dan GVCustomAdapter.java bertanggung jawab untuk menampilkan data. kedalam gridview.
- activity_gird_view.xml dan GridViewActivity menampung gridItem dan menambahkan
onclickListener
di Grid - activity_wiki.xml dan WikiActivity, merupakan komponen WebView untuk menampilkan halaman wiki dari wikipedia.org.
Bagian CustomAdapter
grid_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:padding="5dp" > <ImageView android:id="@+id/imageView" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginRight="10dp" android:src="@drawable/ic_launcher" > </ImageView> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_gravity="center" android:textSize="15sp" > </TextView> </LinearLayout>
Perhatikan bahwa grid_item.xml terdiri dari 2 komponen yaitu imageView untuk menampung ikon bendera dan textview untuk menampung nama negara.
Snipet code GVCustomAdapter.java
Potongan dari adapter. Perhatikan disini, kita tidak mempunyai model data secara terpisah. Data di hardcode kedalam Adapter. Cara ini kurang bagus sebenarnya. Yang lebih bagus anda buat dulu modelnya lalu di panggil di adapter, seperti tutorial sebelumnya tentang customListview. Kode ini cocok untuk data yang sedikit dan statis, untuk data dinamis dari SQLite atau Webservice, silahkan disesuaikan sendiri (atau tunggu tutorialnya kalau saya sempet buat :).
@Override public View getView(int position, View convertView, ViewGroup parent) { View row = convertView; if (row == null) { LayoutInflater inflater = ((Activity) context).getLayoutInflater(); row = inflater.inflate(R.layout.grid_item, parent, false); TextView textViewTitle = (TextView) row.findViewById(R.id.textView); ImageView imageViewIte = (ImageView) row .findViewById(R.id.imageView); switch (position) { case 0: textViewTitle.setText("Indonesia"); imageViewIte.setImageResource(R.drawable.indonesia); break; case 1: textViewTitle.setText("Saudi Arabia"); imageViewIte.setImageResource(R.drawable.saudi); break; case 2: textViewTitle.setText("China"); imageViewIte.setImageResource(R.drawable.china); break; case 3: textViewTitle.setText("Amerika serikat"); imageViewIte.setImageResource(R.drawable.us); break; } }
Bagian GridViewActivity
Bagian ini akan menampilkan data grid kelayar.
ublic class GridViewActivity extends Activity { GridView gridView; GVCustomAdapter grisViewCustomeAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_grid_view); setTitle("Grid Negara"); gridView = (GridView) findViewById(R.id.gridViewCustom); // Create the Custom Adapter Object grisViewCustomeAdapter = new GVCustomAdapter(this); // Set the Adapter to GridView gridView.setAdapter(grisViewCustomeAdapter); // Handling touch/click Event on GridView Item gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int posisi, long arg3) { Intent intent = new Intent(getApplicationContext(), WikiActivity.class); //posisi negara intent.putExtra("posisi", posisi); startActivity(intent); } }); } }
Saat icon di klik maka sistem akan memanggil WikiActivity dengan menyertakan posisi array negara. Bagian WikiActivity tidak saya jelaskan karena itu hanya webview biasa.
Download
Seperti biasa,demi kemudahan anda dalam belajar, silahkan download source code lengkapnya disini .
bagaimana jika wiki activity ada 2??bagaimana cara memanggil 2 aktivity