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

Klik tombol Menu, maka akan langsung menjalankan Project PersegiPanjang

171 comments to Aplikasi Android Sederhana – Menghitung Luas Persegi Panjang

  • halo mas agus salam kenal, saya tertarik untuk mempelajari android, sudah download eclipse tapi begitu saya bikin new project kok gak ada pilihan untuk android yah? apa ada plugin lg yang perlu saya install?

  • makasi ya mas atas ilmu nya…

  • Misi mas.. sekedar tambahan aja nih… hehehe..
    dengan koding seperti diatas tidak bisa mengexekusi tombol btHitung karena di tbHitungnya tidak di beri action untuk menghitung luas. Barang kali masnya lupa masukin di blognya.

    public class HitungPersegiPanjang extends Activity {
    //————– koding seperti diatas ——-
    hitungLuas.setOnClickListener(new OnClickListener() {

    public void onClick(View v) {
    // TODO Auto-generated method stub
    hitungLuas(v);
    }
    });
    //——————-
    }
    ok mas.. hehehehe #uadroid@laabroo

  • admin

    @dedet, agar muncul new project -> android, harus install ADT plugins dieclipse

  • admin

    @laabro.
    Seperti kata pepatah banyak jalan menuju roma,
    kalau mas laabro pakai OnClickListener.

    Kalau saya memanfaatkan main.xml
    <Button android:text="Hitung Luas" android:id="@+id/btnHitung" android:layout_width="fill_parent" android:layout_height="wrap_content" android:onClick=”hitungLuas“>
    nah yang saya kasih tulisan tebal itulah yang akan membuat btnHitung memanggil method “hitungLuas

  • ooh… gtu ya mas…. aku kurang jelas melihatnya… hehehe Piss Gan… maklum masih newbies..

  • ziegal

    Thanks mas.. sangat berguna untuk mulai mempelajari android

  • salam kenal mas..
    mohon pencerahan untuk belajar android.
    sedikit bingung..apa beda cara pengcodean dengan pengcodean membuat aplikasi java?

    terima kasih..

  • admin

    @dendi cara pengcodean apanih, pada tutorial ini kan codingnya juga pakai java 🙂
    jadi harusnya kalau sudah terbiasa dengan coding aplikasi menggunakan java tidak ada masalah untuk coding aplikasi untuk android, karena sama-sama pakai java

  • bingung menggunakan xml nya..apa ada refrensi ku untuk belajar mas?

  • admin

    @dendy, nggak usah bingung dengan XMLnya, sebetulnya XML ini kan ditujukkan untuk layout
    nah tinggal kita pahami, misalnya untuk mebuat textbox, itu pakai tag XMLnya apa lalu property-property apa saja yang digunakan.
    Nah kalau developnya pakai eclipse bisa memanfaatkan fitur ADTnya tinggal drag and drop, langsung otomatis dibuatkan XMLnya 🙂
    kesimpulannya XML diandroid bukanlah suatu hambatan, dan tidak perlu jadi master XML untuk koding XML diandroid.
    Jadi terus semangat yah 🙂

  • ok…natur nuhun…^_^

  • Rangga

    mas…saya mau tanya..
    kalo saya baru selesaiin main.xml ny doang programnya dah bisa di jalanin ato g ???

    soalnya setiap saya jalanin itu pasti ada masalah di main.out.xml
    dibilang no element found

    thx

  • admin

    @rangga,
    sebaiknya selesaikan semuanya, kalau mengikuti petunjuk di tutorial ini harusnya tidak ada error.
    it kok erorrnya main.out.xml itu memang disengaja ?
    seharusnya kan nama filenya main.xml
    Jangan menyerah, teruslah mencoba 🙂

  • rangga

    oh iya….setelah di cek cek…saya salah…saya nge run programnya di main.xml nya (klik kanan main.xml–> run –> android application) :hammer:
    jelas g bisa :hammer:
    bisa di coba deh…pasti keluar main.out.xml (di eclipse ny saya gitu…g tau kalo orang lain )
    btw…thx banget ilmu2 ny mas.. 😀

  • thx mas, tutorialnya sangat bermanfaat…
    ditunggu tutorial selanjutnya

  • vx11

    Thank teman :), i got information about converting value to int:
    Integer.parseInt(txtLebar.getText().toString());

    keep share…

  • Saya mau tanya..bagaimana cara supaya pada saat aplikasi dijalankan,,

    aplikasi kita nge-link ke suatu website(seperti launcher web gitu)

    tolong kasih pencerahan..thx ya..

  • admin

    @alvin, Pada Android, untuk membuat web launcher cukup mudah yaitu dengan menggunakan webkit
    Kalau pada blackberry untuk OS 5 kebawah bisa menggunakan browserfield untuk OS 5 ke atas lebih enak dengan Blackberry Widget
    Untuk Nokia, kita bisa develop dengan menggunakan Nokia Web Runtime (WRT)

  • webkit itu plugin atau perintah,,bisa kasih contoh ga mas?thx banget ya..

  • oh iya,,uda bisa pak pake webkit nya..
    saya mau nanya pak,,kalo cara ganti icon di emulatornya jadi icon yang kita mau gmn ya?(bukan gambar android)hehe..thx..

  • admin

    @Alvin, wah mantap nih dah jalan dong web launchernya. kalau untuk ganti icon mudah
    1. buat icon lalu simpan dengan nama icon.png
    2. copy kan icon.png tersebut kedirectory res/drawable_* (lihat gambat ditutorial Membuat Marker dan InfoWindow di googlemap) sehingga mereplace icon.png yang lama

  • iya,,mantap mas..keren pas jalan d emulatornya,,hehe

    skrg saya lagi mendalami program mas agus yang aplikasi bangun ruang..thx 4 infonya ya..^^

  • oh iya mas,,saya bingung kenapa tombol back yang di handphone klo ditekan langsung keluar ya mas pada saat masuk aplikasi launchernya tersebut?ga bisa mundur satu halaman web..

  • saya mau tanya untuk buat program android apa hanya menggunakan eclipse?apa netbean tidak bisa?

    thanks 🙂

  • admin

    @Hendra, dengan netbean juga bisa kok. coba search di google, salah satunya coba kunjungi link ini http://gerry.ws/2009/01/1074/how-to-setup-netbeans-for-android-development.html

  • Achillez

    Pak Agus, saya mau tanya apakah setiap main class dari android apps selalu inherit dari activity?
    thx be4

  • Thank’s gan ane berhasil…untuk petama kalinya belajar android….

  • Makasih mas untuk tutorialnya… Saya berhasil coba bikin aplikasinya Rumus Persegi Panjang di android.. Ditunggu tutorial lainnya…..
    Mas saya mau tanya kalo bikin data base di SQL lite, kalo yang saya lihat di tutrial mas http://agusharyanto.net/wordpress/?p=317&cpage=1#comment-106, itu untuk data basenya apa memang harus di deklrasikan di dalam list codingnya ya mas??? Apa bisa kita membuat data basenya sendiri, trus baru di konekkin ke programnya.Soalnya kalau data basenya di di tulis di list programnya jadi kebanyakan kodingnya.
    Apa di eclipse ada tool untuk membuat databasenya??? YA seperti kita bikin program database di komputer kan bikin databasenya dulu baru bikin programnya… Mohon pencerahannya mas..

  • Siang mas, untuk installnya gimana yah ? ? ? saya sudah coba instal JDK kemudian, instal eclipse, yang anehnya itu ketika instal eclpise kok gak ada di start program yah mas?? jadi klo mau pake yah gitu mesti kudu, klik .exenya itu, terus ketika eclipse dah berjalan instal SDKnya ekh gak taunya ketika di tengah jalan yah dia berhenti begitu saja, mohon solusinya, terima kasih..

    NB : maklum mas newbie baru mau cobain android… ehehehe

  • mas, itu penghitung luasnya kalo salah satu isian mengandung bilangan desimal gak bisa dieksekusi ya kayaknya?

  • harryteguh

    Pak, saya mau nanya.

    Ketika saya cobakan kode ‘onClick’ dibagian main.xml koq muncul error yang katanya “No resource identifier found for attribute ‘onClick’ in package ‘android'”?

    Salahnya dimana ya, Pak? Mohon bantuannya…

  • harryteguh

    Udah terpecahkan, Pak. Saya pakai onClickListener di kode java-nya

  • Agus Haryanto

    @harryteguh, mantap tidak pantang menyerah, untuk event onclick memang bisa kita daftarkan di main.xml atau langsung di class javanya dengan onClickListener

  • Agus Haryanto

    @alief, pertanyaan bagusnih, untuk support decimal kita harus merubah tipe datanya dari integer ke float atau double.
    untuk jari-jari kelipatan 7 sebetulnya support tapi hasilnya tidak bulat. agar hasilnya bulat, buat lah perlakuan khusus untuk jari-jari yang habis dibagi 7

  • Pixel

    Pada saat running kok Edittext untuk Panjang ngak keluar ya ?
    txtPanjang = (EditText) findViewById(R.id.txtPanjang) dibaris ini ada pesan “Cannot be resolved”

    Apa ya kurangnya…? padahal ngetiknya udah sama persis, kayak tutorialnya.

  • Pixel

    Udah bisa admin, ternyata saya yg kurang teliti…
    thanks tutorialnya, ditunggu turorial yg lain.

  • sebelumnya thanks mas, tutorial nya bgs bgt bg yg baru belajar android kyk sy 🙂

    just sharing;

    saya coba script diatas ada error “The field HitungPersegiPanjang.btnHitung is never read locally (line 20).

    solusinya, sy ganti private Button btnHitung menjadi public private Button btnHitung.

  • so nice tutorial, keep posting kk…

  • makasih mas ilmunya? tapi saya mau tanya kalau udah bisa jalan diemulator dan mau mindahin ke handset androidnya caranya gimana yaaaaaa

  • Makasih mas tutorialnya, sangat membantu dan mudah dimengerti (walopun masih agak bingung karena basis saya bukan dari Java)

  • wah bagus banget tutorialnya. sangat ,membantu saya. thx

  • Iwan

    keren bgt tutorialnya, udah saya coba dan bisa, di tunggu tutorial berikutnya, buat referensi tugas jg…hehe…oh iya mas, klo mo bkin luas silinder kita masukin nilai phi (3,14 atau 22/7) gimana cra masukin rumus’a?mkasih…

  • Agus Haryanto

    Banyak yang menanyakan agar support perhitungan desimal, misalnya panjang 5.5 lebar 3.3 tidak dapat dijalankan dengan code diatas karena kita masih menggunakan tipe data integer, agar support desimal rubah ke tipe data float

    public void hitungLuas(View view) {
    try {

    float panjang = Float.parseFloat(txtPanjang.getText().toString());
    float lebar = Float.parseFloat(txtLebar.getText().toString());
    float luas = panjang * lebar;
    txtLuas.setText(String.valueOf(luas));

    } catch (Exception e) {
    e.printStackTrace();
    }
    }

  • GR-47

    Makasih Banget infonya…. Mohon ijin untuk dipelajari….

  • GR-47

    Mas, Saya mau nanya dunk… biar hasilnya bulat caranya gimana ya?

  • Agus Haryanto

    @GR-47, bilangan bulat apa yah ?

  • GR-47

    Itu loh mas… Kan klo float pasti hasil desimalnya ngk bulat… Angka di belakang komanya pasti banyak… Klo mau cuman nampilin 2 Angka di belakang koma caranya gimana ya?

  • dini

    salam kenal mas,,,,mu tny ni pny coding buat aplikasi perhitungan pajak penghasilan menggunakan android???bantu mas,,,buat tugas ni

    thax yy

  • Agus Haryanto

    @dini, nggak punya. Tapi kalau mau buat aplikasi perhitungan pajak harus jelas dulu apa yang ajdi input dan output yang diharapkan

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>