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">

<activity android:name=".Utama_activity"

android:label="@string/app_name">

<intent-filter>

</intent-filter>

</activity>

</application>

<uses-sdk android:minSdkVersion="9" />

</manifest>

Tampilan Grid View Android

2 komentar:

Labels

Recent Post

Recent Comment

Blog Archive