Cara Membuat Grid Layout

Tugas Iwan Fitrianto Rahmad, M.Kom - Cara Membuat Grid Layout

Berikut Langkah-Langkahnya:

Pilih FILE kemudian NEW
Lalu pilih PROJECT kemudian pilih application project
Setelah itu jika muncul seperti gambar dibawah ini
Isi project namenya contoh: griddialog
Kemudian plih Android2.2
Lalu isi Application name, contoh:asyiyah
Kemudian Package name isi dengan contohnya: esoy.android.asyiyah
Lalu Create Activitynya diisi dengan contohnya: gridlayout
Dan SDK Version isi dengan 8 lalu pilih finish
Kemudian pilih res lalu layout kemudian double klik di full_image.xml dan isi dengan coding sebagai berikut:

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000000">
<ImageViewandroid:id="@+id/full_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

Kemudian buat lagi di xml dengan nama gridlayout.xml ketik coding sebagai berikut:

<?xmlversion="1.0"encoding="utf-8"?>
<GridViewxmlns: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>

Kemudian di java buat dengan nama full_image.java dan ketik script berikut ini:
package esoy.android.asyiyah;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
publicclass full_image extends Activity {
@Override
publicvoid 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]);
}

}

Kemudian buat kembali di java dengan nama gridlayout.java lalu ketik script seperti dibawah ini:
package esoy.android.asyiyah;

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;
publicclass gridlayout extends Activity {
@Override
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.gridlayout);
GridView gridView = (GridView) findViewById(R.id.grid_view);
// Instance of ImageAdapter Class
gridView.setAdapter(new imageadapter(this));
/**
* On Click event for Single GridView Item
* */
gridView.setOnItemClickListener(new OnItemClickListener() {
publicvoid onItemClick(AdapterView<?> parent, View v,
int position, long id) {
// Sending image id to FullScreenActivity
Intent i = new Intent(getApplicationContext(), full_image.class);
// passing array index
i.putExtra("id", position);
startActivity(i);
}
});
}
}

Kemudian buat lagi di java dengan nama imageadapter.java ketik script seperti dibawah ini:
package esoy.android.asyiyah;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
publicclass imageadapter extends BaseAdapter {
private Context mContext;
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.s1, R.drawable.s3,
R.drawable.s4, R.drawable.s5,
};
// Constructor
public imageadapter(Context c){
mContext = c;
}
publicint getCount() {
returnmThumbIds.length;
}
public Object getItem(int position) {
returnmThumbIds[position];
}
publiclong getItemId(int position) {
return 0;
}
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;
}
}

Kemudian di AndroidManifest.xml ketik scrip sebagai berikut ini:

<?xmlversion="1.0"encoding="utf-8"?>
<manifestxmlns:android="http://schemas.android.com/apk/res/android"
package="esoy.android.asyiyah"
android:versionCode="1"
android:versionName="1.0">
<applicationandroid:icon="@drawable/s1"
android:label="@string/app_name">
<activityandroid:name=".gridlayout"
android:label="@string/app_name">
<intent-filter>
<actionandroid:name="android.intent.action.MAIN"/>
<categoryandroid:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activityandroid:name=".full_image"></activity>
</application>
<uses-sdkandroid:minSdkVersion="8"/>

</manifest>