Breaking News
Loading...
Senin, 06 Mei 2013

Tampilan Grid View Android

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>

2 komentar:

  1. mas boleh minta source code grid layout diatas gak??? saya masih kurang paham

    BalasHapus

 
Toggle Footer