Aplikasi
Tampilan Grid merupakan tampilan dasar aplikasi
android yang menampilkan data gambar dalam bentuk grid, dimana dibutuhkan
widget GridView pada class activity
serta layout GridView pada File main xml. Dimana pada aplikasi ini
akan menampilkan gambar binatang beserta namanya. Berikut screenshoot tampilan aplikasi.
Sama halnya dengan
aplikasi menu tab, Pertama kali buat project baru, setelah selesai membuat project baru maka secara otomatis akan
di-create File xml yang berada dalam folder
res(layout/values), File java berada dalam folder src, File generate java File
(R.java) berada pada folder gen, serta File
AndroidManifest.xml. Pertama akan dijelaskan untuk file class.java.
a. Utama_activity
Utama_activity
merupakan class basic activity yang
akan memanggil main.xml dan
menghubungkan komponen-komponen yang digunakan pada main.xml. Untuk lebih jelasnya dapat dilihat pada source code berikut.
Utama_activity.java
|
package com.app.grid;
import android.app.Activity;
import
android.os.Bundle;
import
android.view.LayoutInflater;
import
android.view.View;
import
android.view.ViewGroup;
import
android.widget.ArrayAdapter;
import
android.widget.GridView;
import
android.widget.ImageView;
import
android.widget.TextView;
import
android.widget.ImageView.ScaleType;
public class
Utama_activity extends Activity {
private static final String[] nm_bn = { "Anjing", "Ayam", "Babi",
"Bangau", "Bebek", "Bekicot", "Buaya", "Bunglon", "Burung",
"Cicak", "Gajah", "Ikan", "Jerapah", "Kalajengking",
"Kelabang", "Kepiting", "Kucing", "Kuda", "Kupu-kupu",
"Lalat", "Harimau", "Nyamuk",
"Rusa", "Sapi", "Semut", "Singa", "Ular" };
private int[] gbr_bn = {
R.drawable.bn_anjing, R.drawable.bn_ayam,
R.drawable.bn_babi, R.drawable.bn_bangau,R.drawable.bn_bebek,
R.drawable.bn_bkc, R.drawable.bn_buaya,R.drawable.bn_bunglon,
R.drawable.bn_burung, R.drawable.bn_cicak,
R.drawable.bn_gajah, R.drawable.bn_ikan,
R.drawable.bn_jerapah, R.drawable.bn_kala,
R.drawable.bn_kel, R.drawable.bn_kptn, R.drawable.bn_kucing,
R.drawable.bn_kuda, R.drawable.bn_kupu2, R.drawable.bn_lalat,
R.drawable.bn_macan, R.drawable.bn_nyamuk,
R.drawable.bn_rusa, R.drawable.bn_sapi, R.drawable.bn_semut,
R.drawable.bn_singa, R.drawable.bn_ular };
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView grid = (GridView)
findViewById(R.id.gridView);
grid.setAdapter(new Adapter());
}
public class Adapter extends
ArrayAdapter<String> {
public Adapter() {
super(Utama_activity.this, R.layout.image, nm_bn);
}
public View getView(int position,
View convertView, ViewGroup parent) {
// instansiasi
row dari convertView
TextView txt = (TextView)
findViewById(R.id.text_view);
txt.setText("Nama
Binatang");
View row = convertView;
if (row == null) {
// inflate
layout
LayoutInflater
inflater = getLayoutInflater();
row = inflater.inflate(R.layout.image, parent, false);
}
ImageView imageView =
(ImageView) row.findViewById(R.id.imageView1);
TextView nama = (TextView)
row.findViewById(R.id.textView1);
// set skala
gambar
imageView.setScaleType(ScaleType.FIT_XY);
// set keterangan
dan gambar berdasarkan position
nama.setText(nm_bn[position]);
imageView.setImageResource(gbr_bn[position]);
// kembalikan
objek view
return row;
}
}
}
|
b. main.xml
File
main.xml merupakan File default yang terdapat dalam folder res/layout yang merupakan user interface awal dari aplikasi.
Berikut merupakan source code dari File main.xml.
main.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:background="@drawable/background"
android:orientation="vertical"
>
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:layout_marginBottom="2dp"
android:text="TextView"
android:textColor="#00FFFF"
android:textSize="20dp"
android:textStyle="bold"
/>
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:verticalSpacing="30dp"
>
</GridView>
</LinearLayout>
|
c. image.xml
image.xml
merupakan
file .xml yang berfungsi untuk
mengatur gaya tampilan dari isi pada gridview, mulai dari pemanggilan gambar
sampai pada pengaturan posisi gambar dan teks pada anggota grid.
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"
>
<ImageView
android:id="@+id/imageView1"
android:layout_width="88dp"
android:layout_height="122dp"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="keterangan"
android:textColor="#FFFFFF"/>
</LinearLayout>
|
d.
AndroidManifest
File
AndroidManifest diperlukan oleh setiap aplikasi android, File ini berada pada folder
root aplikasi. File ini
mendeskripsikan variable global dari paket aplikasi yang kita gunakan. Di dalam
File AndroidManifest inilah berisi
semua pendefinisian semua hal-hal yang dibutuhkan pada aplikasi MenuTab ini.
Untuk lebih jelasnya, berikut dibawah merupakan source code dari File
AndroidManifest.
AndroidManifest.xml
|
<?xml version="1.0"
encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app.grid"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon"
android:label="@string/app_name">
<activity android:name=".Utama_activity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="9"
/>
</manifest>
|
mas boleh minta source code grid layout diatas gak??? saya masih kurang paham
BalasHapus(p)
BalasHapus