Aplikasi Android Sederhana – Menghitung Luas Persegi Panjang

Sebelum memulai dengan tutorial ini, bagi yang belum menyiapkan software untuk development aplikasi android, bisa menyiapkannya terlebih dahulu, untuk petunjuknya bisa lihat di Persiapan Membuat Aplikasi Android

Android sedang naik daun, membuat banyak orang ingin lebih tahu tentang android, khususnya dalam cara pembuatan aplikasinya. Penasaran dengan android akhirnya saya mencoba mempelajarinya.

Pada awal-awal mulai mempelajarinya tentunya ada beberapa kendala yang dihadapi, dari bagaiman cara installnya dieclipse, bagaimana cara menjalankannya dan bagaimana arsitektur applikasi android.

Sempat juga mengalami pada saat run applikasi muncul error sehingga muncul message “Force To Close”.

Pusing juga yah, tapi kita harus tetap berusaha dan jangan mudah menyerah.

Alhamdulillah akhirnya jadi juga aplikasi android pertama saya, aplikasi android yang sederhana. yang fungsinya untuk menghitung luas persegi panjang. dan saya coba buat langkah-langkahnya menjadi sebuah tutorial.

Bagi yang ingin mengetahui cara pembuatannya, berikut langkah-langkah yang dilakukan :

1. Jalankan Eclipse (sebaiknya gunakan versi 3.5 Galileo)

2. Buat  new Project, lalau Pilih Android Project

3. Isi Keterangan-keterangan Project Seperti dibawah ini

Pada saat project pertama kali dibuat ada 3 file penting yang langsung dibuat, yaitu

• main.xml
• string.xml
• HitungPersegiPanjang.java

Pada saat project pertama kali dibuat ada 3 file penting yang langsung dibuat, yaitu

• main.xml
• string.xml
• HitungPersegiPanjang.java

4. edit file main.xml

main.xml adalah digunakan untuk menggambar layout dan user interface di android, dengan menggunakan format bahasa xml

Pada file main.xml ketikkan script dibawah ini

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
<TextView android:text="Panjang :" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<EditText android:text="" android:id="@+id/txtPanjang" android:layout_width="fill_parent" android:layout_height="wrap_content" android:inputType="numberSigned|numberDecimal"></EditText>

<TextView android:text="Lebar :" android:id="@+id/TextView02" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<EditText android:text="" android:id="@+id/txtLebar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:inputType="numberSigned|numberDecimal"></EditText>
<Button android:text="Hitung Luas" android:id="@+id/btnHitung" android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="hitungLuas"></Button>
<TextView android:text="Luas :" android:id="@+id/TextView03" android:layout_width="wrap_content" android:layout_height="wrap_content" ></TextView>
<EditText android:text="" android:id="@+id/txtLuas" android:layout_width="fill_parent" android:layout_height="wrap_content" android:editable="false"></EditText>
</LinearLayout>

Pada aplikasi ini kita menggunankan LinearLayout dengan orientasi vertical, yang berarti setiap object yang kita gambar akan disusun secara vertical (satu object satu baris).

Perhatikan bagian ini

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />

Ini artinya TextView ini isi textnya diambil dari variable hello pada file string.xml

5. edit file string.xml

string.xml adalah sebagai pembantu dari main.xml, agar main.xml kita terlihat rapih dan tidak terlalu panjang dan memudahkan kita dalam membacanya maka kita bisa mebuat string object pada string.xml, dari main.xml tinggal panggil name nya saja.

Sekarang mari kita buka file string.xml. lalu ketikan kode dibawah ini

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Isi Nilai Panjang dan Lebar lalu klik Hitung Luas !</string>
    <string name="app_name">Persegi Panjang</string>
</resources>

Coba perhatikan, disitu terlihat hello, jadi apa bila dijalankan TextView pada main.xml diatas akan menampilkan tulisan “Isi Nilai Panjang dan Lebar lalu klik Hitung Luas !”.

Pada aplikasi ini kita menggunakan 3 object untuk user interfacenya yaitu TextView, EditText dan Button.

Object	Fungsi
TextView	sama seperti label pada SWING, yaitu untuk menampilkan tulisan dilayar.
EditLabel	sama seperti TextBox pada SWING, yaitu untuk user menginputkan data
Button	Sama seperti Button pada SWING yaiu sebagai Trigger untuk menjalankan suatu Fungsi

6. Edit file HitungPersegiPanjang.java

HitungPersegiPanjang.java adalah pemain utama, yang akan djalankan pada saat applikasi dijalankan. Pada class ini, kita buat untuk dapat membaca data yang diinputkan user dalam hal ini inputan panjang dan lebar, kemudan menghitunngnya dan menampilkan hasilnya.

Sekarang Buka file HitungPersegiPanjang.java dan ketikkan kode dibawah ini

package com.agus;

/**
 * Class HitungPersegiPanjang
 * @version 1.0 Oct 03, 2010
 * @author Agus Haryanto (agus.superwriter@gmail.com)
 * @website http://agusharyanto.net
 */

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class HitungPersegiPanjang extends Activity {
	private EditText txtPanjang;
	private EditText txtLebar;
	private EditText txtLuas;
	private Button btnHitung;

	/**
	 * Method yang dipanggil pada saat applikaasi dijalankan
	 * */
	@Override
	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		txtPanjang = (EditText) findViewById(R.id.txtPanjang);
		txtLebar = (EditText) findViewById(R.id.txtLebar);
		txtLuas = (EditText) findViewById(R.id.txtLuas);
		btnHitung = (Button) findViewById(R.id.btnHitung);

	}

	/**
	 * Method untuk Menghitung Luas Persegi panjang dipanggil pada saat button
	 * Hitung Luas diklik
	 *
	 * @param view
	 */
	public void hitungLuas(View view) {
		try {

			int panjang = Integer.parseInt(txtPanjang.getText().toString());
			int lebar = Integer.parseInt(txtLebar.getText().toString());
			int luas = panjang * lebar;
			txtLuas.setText(String.valueOf(luas));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Pada saat applikasi dijalankan, maka method yang pertamakali dipanggil adalah method onCreate

Perhatikan kode ini

txtPanjang = (EditText) findViewById(R.id.txtPanjang);

kode diatas digunakan agar kita bisa melakukan manipulasi terhadap object txtPanjang yang kita gambar pada main. Xml

buka file main.xml perhatikan kode ini

<Button android:text="Hitung Luas" android:id="@+id/btnHitung" android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick="hitungLuas"></Button>

Ini menandakan bahwa apabila kita mengklik tombol Hitung Luas maka akan memanggil method hitungLuas

8. Run Project,  Caranya klik kanan project PersegiPanjang, pilih Run As lalu pilih  Run Configration. Isikan keterangan-keteranagnnya seperti dibawah ini. Lalu klik tombol Run

Tujuannya agar applikasi kita langsung dijalankan pada emulator android.

Perhatinkan Log yang ada pada jendela console

Menjelaskan proses-proses yang terjadi pada emulator android.

Emulator sedang melakukan start up

Emulator siap menjalankan program

Klik tombol Menu, maka akan langsung menjalankan Project PersegiPanjang

Isi Nilai Panjang dan lebar

Klik Tombol Hitung

Untuk Menutup applikasi, karena kita belum buat button Closenya kita tombol escape saja pada keyboard.

Untuk menjalankan Applikasi Persigi Panjang lagi, klik tombol Menu dan Klik Icon Persegi Panjang

9. Sampai bertemu pada tutorial android selanjutnya

Jika ada yang kurang jelas silahkan ditanyakan.

untuk source codenya bisa didownlaod disini {filelink=3}

Salam Hangat

Agus Haryanto