Membuat GridView Layout Gallery Di Android

Pada tutorial Programming Android kali ini kita akan mulai mencoba membuat aplikasi yang berhubungan dengan Gallery View, dan dimulai dengan membuat GridView layout. GridView layout merupakan salah satu layout yang sering digunakan pada aplikasi android. GridView layout akan menampilkan gallery dalam tampilan grid kotak dan jika dipilih atau disentuh pada salah satu gambar maka aplikasi akan menampilkan gambar dalam ukuran penuh.

Untuk lebih jelasnya kita akan langsung praktek dengan membuat aplikasinya.

Langkah pertama yang wajib dilakukan adalah mempersiapkan foto atau gambar yang ingin Anda tampilkan dalam aplikasi GridView Layout.

Buat project android seperti berikut:
Application Name               : GridLayout
Project Name                      : GridLayout
Package Name                    : com.android.gridlayout
Minimum Required SDK   : Andoid 2.2
Target SDK                          : Android 4.2
Yang lain biarkan default.
Pilih foto atau gambar yang sudah disiapkan, dan masukan di folder nama_aplikasi/res/drawable-hdpi.
Buat file baru grid_layout.xml di res/layout/grid_layout.xml dan isi dengan coding sehingga menjadi seperti berikut:

grid_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth" 
    android:background="#000000">   
</GridView>

Buat class baru dengan nama ImageAdapter.java pada folder src/com.android.gridlayout/ImageAdapter.java dan isi dengan coding seperti berikut:

ImageAdapter.java
package com.android.gridlayout;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
 
public class ImageAdapter extends BaseAdapter {
    private Context mContext;
 
    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.pic1, R.drawable.pic6, R.drawable.pic11, 
            R.drawable.pic2, R.drawable.pic7, R.drawable.pic12,
            R.drawable.pic3, R.drawable.pic8, R.drawable.pic13,
            R.drawable.pic4, R.drawable.pic9, R.drawable.pic14,
            R.drawable.pic5, R.drawable.pic10, R.drawable.pic15,
    };
 
    // Constructor
    public ImageAdapter(Context c){
        mContext = c;
    }
 
    @Override
    public int getCount() {
        return mThumbIds.length;
    }
 
    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }
 
    @Override
    public long getItemId(int position) {
        return 0;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
        return imageView;
    } 
}

Buka class utama GridLayout.java isi seperti berikut:

GridLayout.java
package com.android.gridlayout;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class GridLayout extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.grid_layout);
		
		GridView gridView = (GridView) findViewById(R.id.grid_view);
		
		// Instance of ImageAdapter Class
		gridView.setAdapter(new ImageAdapter(this));
	}
}

Jalankan aplikasi.

GridView Layout

Sementara aplikasi GridView Layout sudah bisa ditampilkan seperti diatas, namun masih belum bisa menampilkan gambar yang dipilih atau disentuh dalam ukuran penuh.

Untuk menampilkan pilihan gambar kita perlu mengedit class utama dan menambahkan satu file xml dan satu class java seperti berikut ini.

Buat file baru full_image.xml dan isi coding seperti berikut:

full_image.xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#000000" >
    <ImageView android:id="@+id/full_image_view"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"/>
</LinearLayout>

Buat class FullImage.java isi coding seperti berikut:

FullImage.java
package com.android.gridlayout;

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

public class FullImage extends Activity {
		
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.full_image);
		
		// get intent data
		Intent i = getIntent();
		
		// Selected image id
		int position = i.getExtras().getInt("id");
		ImageAdapter imageAdapter = new ImageAdapter(this);
		
		ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
		imageView.setImageResource(imageAdapter.mThumbIds[position]);
	}
}

Modifikasi class utama GridLayout.java dengan menambahkan coding berikut :

GridLayout.java
gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v,
                    int position, long id) {
 
                // Sending image id to FullScreenActivity
                Intent i = new Intent(getApplicationContext(), FullImage.class);
                // passing array index
                i.putExtra("id", position);
                startActivity(i);
            }
        });

Buka file AndroidManifest.xml dan tambahkan activity baru.

AndroidManifest.xml
<activity android:name=".FullImage"></activity>

Selesai. Jalankan aplikasi.

GridView Layout GridView Layout

DOWNLOAD CODE

You may also like...

9 Responses

  1. Nisa says:

    gan makasih tutorial nya sangat membantu, tapi saya menemui kendala ketika aplikasi di running malah force closed.aplikais stoped. kenapa ya ? mohon bantuan nya gan . urgent soalnya. terima kasih :))

  2. pusinkkk says:

    Gan, kalau ingin membuka aktivitas lain (bukan gambar yang diklik) dengan mengklik salah satu gambar, kira2 kodenya gmn ?

    • nubener.ink says:

      // Sending image id to FullScreenActivity
      Intent i = new Intent(getApplicationContext(), FullImage.class);
      // passing array index
      i.putExtra(“id”, position);
      startActivity(i);

      diganti dengan:
      Intent i = new Intent(ClassIni.this, ClassTujuan.class);
      // passing array index
      startActivity(i);

  3. Tresna says:

    Mo tanya, kalo gambar fullimagenya didownload pake tombol di kanan atas bisa ga?

  4. Doni says:

    gan fotonya kok kecil kecil ya ? masalahnya dimana itu? terus mau nambahin slide gimana ya ? jadi full image nya bisa di slide juga

  5. Alan says:

    Gan kalo image nya bisa di perbesar seperti di galery gimana yah?

  6. Nova says:

    Thank you ya tutorialnya bermanfaat bangeeeeet buat tugas kuliah saya! :))
    Sukses terus!!

Leave a Reply

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