Kiri:tampilan grid negara, kanan: tampilan wiki negara indonesia

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

Kiri:tampilan grid negara, kanan: tampilan wiki negara indonesia
Kiri:tampilan grid negara, kanan: tampilan wiki negara indonesia

Untuk membuat aplikasi ini kita membutuhkan 3 file XML dan 3 file java.

  1. grid_item.xml dan GVCustomAdapter.java bertanggung jawab untuk menampilkan data. kedalam gridview.
  2. activity_gird_view.xml dan GridViewActivity menampung gridItem dan menambahkan onclickListener di Grid
  3. 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 .

By Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com

One thought on “Tutorial GridView Android”

Leave a Reply

Your email address will not be published. Required fields are marked *