Tutorial GridView dan ViewPager Android

GridView adalah komponen android yang menampikan data dalam format table yang biasanya terdiri dari beberapa kolom dan baris. GridView di android sering digunakan untuk menampilkan data yang formatnya gambar atau kombinasi gambar dan teks. Dalam tutorial kali ini, saya akan menjelaskan tentang Viewpager.

Loh kok tidak menjelaskan gridview? karena gridview sudah cukup jelas dan tutorial tentang cara membuat gridview sudah sangat banyak, jadi yang saya tekankan ada pada viewpager. Viewpager adalah komponen android yang sering dipakai untuk menampilkan data dalam format full screen dan use bisa berpindah antar data dengan menggeser ke kiri atau kekanan. COntohnya adalah saat kita membuka galeri image.

Gridlayout
Gridlayout
Tampilan viewpager saat user menggeser gambar ke kanan atau kekiri
Tampilan viewpager saat user menggeser gambar ke kanan atau kekiri

Tutorial ini sebenarnya adalah pengembangan dari tutorial Gridview yang ada di Androidhive dengan judul Android Gridview layout tutorial. Silahkan membacanya sendiri, dsitu sudah sangat gamblang tentang konsep gridview.

File XML yang dibutuhkan

  1. grid_layout.xml, bertanggung jawab data dalam format grid
  2. full_image.xml , bertanggung jawab untuk menampilkan gambar full screen
  3. viewpager_main.xml, bertanggung jawab untuk mengelola perpindahan halaman.

File Java

  1. MainGridActivity.java, menampilkan grid gambar.
  2. ImageAdapter.java , mengelola model data dan menampilkannya di gridview.
  3. FullPagerActivity.java, menampilkan gambar full screen
  4. ViewPagerAdapter.java, mengelola model data dari viewpager agar bisa ditampilan dengan benar.

    Kode ViewPagerAdapter.java

    
    package com.candralab.viewpager;
    
    import android.content.Context;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.RelativeLayout;
    
    public class ViewPagerAdapter extends PagerAdapter {
    
    	Context context;
    
    	int[] anArray;
    	LayoutInflater inflater;
    
    	public ViewPagerAdapter(Context context, int[] flag) {
    		this.context = context;
    
    		this.anArray = flag;
    	}
    
    	@Override
    	public int getCount() {
    		return anArray.length;
    	}
    
    	@Override
    	public boolean isViewFromObject(View view, Object object) {
    		return view == ((RelativeLayout) object);
    	}
    
    	@Override
    	public Object instantiateItem(ViewGroup container, int position) {
    
    		ImageView img;
    
    		inflater = (LayoutInflater) context
    				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    		View itemView = inflater.inflate(R.layout.full_image, container, false);
    
    		img = (ImageView) itemView.findViewById(R.id.full_image_view);
    
    		img.setImageResource(anArray[position]);
    
    		((ViewPager) container).addView(itemView);
    
    		return itemView;
    	}
    
    	@Override
    	public void destroyItem(ViewGroup container, int position, Object object) {
    		((ViewPager) container).removeView((RelativeLayout) object);
    
    	}
    }
    

    FullPageActivity

    package com.candralab.viewpager;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.util.Log;
    import android.view.Menu;
    
    public class FullPagerActivity extends Activity {
    
    	// Declare Variables
    	ViewPager viewPager;
    	PagerAdapter adapter;
    
    	int[] flag;
    
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.viewpager_main);
    
    		Intent i = getIntent();
    		 Integer position = i.getExtras().getInt("id");
    		Log.d("posisi",position.toString());
    		
    		ImageAdapter imageAdapter = new ImageAdapter(this);
    		flag = imageAdapter.wallpaper;
    		
    		viewPager = (ViewPager) findViewById(R.id.pager);
    		adapter = new ViewPagerAdapter(this, flag);
    		viewPager.setAdapter(adapter);
    		
    		viewPager.setCurrentItem(position);
    	}
    	@Override
    	  public void onPause()
    	  {
    	    super.onPause();
    
    	    System.gc();
    	  }
    }
    

    Download source code

    Silahkan download code lengkapnya disini.

Tutorial GridView Android

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 .