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

  • Mohon penjelasan untuk program android luas egitiga untuk input data bilangan bulat semuanya lancar tetapi untuk input bilangan desimal program langsung error…gimana solusinya. Saya telah membuat program android untuk menghitung lua segitiga kasusya sama…Mohon solusinya…

  • Pak saya telah membuat program android seperti contoh yang bapak buat dan saya mengalami masalah untuk input panjang dan lebar bilangan desimal atau berkoma ( contoh panjang 2.5 dan lebar 1.5), maka program tersebut error mohon solusinya….

  • teo

    mas klo di eclipse indigo ad yg error pas di .java ny
    disini ney yg erro ny
    txtPanjang = (EditText) findViewById(R.id.txtPanjang);
    txtLebar = (EditText) findViewById(R.id.txtLebar);
    txtLuas = (EditText) findViewById(R.id.txtLuas);
    btnHitung = (Button) findViewById(R.id.btnHitung); sma di main.xml ny
    disini android:layout_height=”wrap_content” android:inputType=”numberSigned|numberDecimal”>
    knp y mas????

  • Paranoid Android

    wah tutorial bagus nih. saya coba bantu jawab pertanyaan ya mas.

    @widodo
    kenapa tidak bisa memakai bilangan desimal? karena tipe data yang dipakai dalam tutorial ini adalah Integer. jadi agar dapat melakukan perhitungan desimal gunakan tipe data Double.

    contoh script :

    public void hitungLuas(View view) {
    try {
    double panjang = Double.parseDouble(txtPanjang.getText().toString());

    double lebar = Double.parseDouble(txtLebar.getText().toString());
    double luas = panjang * lebar;
    txtLuas.setText(String.valueOf(luas));
    } catch (Exception e) {
    e.printStackTrace();
    }
    }

    @teo
    itu error karena anda belum mengimport widget dan view.
    tambahkan code ini di bagian atas di bawah package code.

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

    kalo anda menggunakan Eclipse dengan OS Windows masalah tersebut dapat diselesaikan hanya dengan menekan tombol Ctrl+O. karena dengan otomatis Eclipse akan mengimport class yg diperlukan. hehehe..

    oke semoga membantu. salam Paranoid! CMIIW.

  • Muhammad

    Pak agus tutorial bapak sangat bagus, namun hanya ada 1 kelemahanya…. yaitu tidak disertai penjelasan baris per baris scriptnya. Jdi saya sebagai pemula agk kesulitan utk mempelajarinya.Trims 😀

  • adit

    mas saya mau tanya,,,itu aplikasinya menggunakan sqlite apa gax?
    kayak’y g iia?
    saya minta aplikasi yang menggunakan sqlite donk mas .. 😀

  • adit

    mas saya mau tanya,,,itu aplikasinya menggunakan sqlite apa gax?
    kayak’y g iia?
    saya minta aplikasi yang menggunakan sqlite donk mas .. 😀

  • @NuuWardhana

    kalo ada pesan error: No resource identifier found for attribute ‘layout_widht’ in package ‘android’, gimana cara menanggulaginya ya?

  • viepho

    mas agus slain membuat aplikasi hitung luas segi panjang mintak bantuannya bagaimana kalau membuat aplikasi buat mesin pencarian???mohon jawaban nya,…thanks,..sya tunggu jwaban nya secepatnya

  • Mantab. Ijin share

  • oh Iy ada tambahan itu setter sama getternya gak ada

  • Sizuka

    thanks mas ….

  • mas saya sudah berhasil running programnya di Android Virtual Devicenya..
    tapi waktu saya klik button hitung luas malah keluar ” Unfortunatelly, Persegi Panjang Has Stopped”

    itu knp ya mas??

  • Denny

    mas saya mau tanya ?
    waktu tak jalan kan program nya keluar kata
    ini mas :
    the application persegi panjang (process com.agus) has stopped unexpectedly.please try again.
    itu yang salah apa nya mas ?

    tolong di bantu

  • Agus Haryanto

    @Denny, Coba perhatikan sudah semua mengikuti yang ada diartikel ini, biasanya kesalahan ada pada xmlnya. lihat logcatnya

  • Agus Haryanto

    @usman, pastikan sudah mengikuti code pada article ini.

  • putri

    bagaimana cara mengatasi jika tanda kuning di koding

  • Agus Haryanto

    @putri, tanda kuning hanya warning saja. tidak akan membuat aplikasi error. misalanya ada import yang tidak digunakan atau variable yang tidak digunakan. untuk solusi permanentnya lihat message yang diberikan oleh eclipse pada tanda kuning tersebut nah dari pesan itu kita bisa tahu apa yang harus skita lakukan

  • priyanto

    Pak Agus,, saya coba jalnkan souce code dari sampeyan ga bisa jalan. karena SDK saya targetnya 4.1.2 🙂
    kemudian saya coba bikin sendiri projectnya… dan bisa di load di emulator.
    Masalahnya,,, ketika tombol hitung luas di klik, ga muncul hasil perhitungannya Pak…
    sepertinya yg di eksekusi catch-nya…
    di logcat muncul gini :
    java.lang.NullPointerException

  • dion

    mas, maaf nanya…,,
    apakah bisa link download nya di upload ulang???

    saya mohon

  • mas kalo bikin aplikasi yang mirip facebook mobil sama gak caranya..

  • meri

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

    main.xml
    string.xml
    HitungPersegiPanjang.java”

    itu pilihannya dimana? baru banget belajar android nih hehehe

  • tolong bantuannya mas agus kalo setiap saya mau buat app android dibagian setContentView(R.layout.main); itu pasti error padahal blm saya apa2in ini tolong bantuannya terima kasih

  • alfin

    kok saya pas di run di emulator waktu klik button Hitung Luas nya gak muncul hasilnya ya..? di file PersegiPanjang.java nya ada warning waktu deklarasiin yang private Button btnhitung nya..
    kalau di liat di warning nya ada notif seperti ini “The value of the field MainActivity.btnHitung is not used”.. kira2 itu yang mana nya yang salah ya..

  • woow. Thank you pak Agus .

  • hamid

    mas,,sama masalahnya..dengan teo
    padahal sudah ada importnya
    gmn ya solusinya?

  • bambang

    Wah gak jalan om skripnya. dipencet tombolnya ngefek try n catch nya

  • marshel

    pak coding nya banyak yg eror di eclipse saya

  • richard

    aslamualaikum….
    ada yang punya pemrograman android untuk Fuzzy logic g???
    btuh bgt ini soalnya!!

  • didik

    pak.. saya mau tanya kalau memnghitung luas dan volume balok gmna pak…

  • mas,.. knp yah xml nya ada tanda silangnya..?? mohon bantuannya.. newbie

  • Agus Haryanto

    @ismail gaffar, kalau ada tanda silang. penyebabnya biasanya ada yang salah di xmlnya.

  • Agus Haryanto

    @didik, harusnya kalau sudah paham manipulasi object view sepeert TextView, EditField, Button dapat dengan mudah diselesaikan

  • triono

    terimakasih pak..saya coba berjalan tutorialnya…

  • terimakasih Pak Agus, saya jadi tambah mudeng sama Java nih, meski awalnya banyak error tapi alhamdulillah bisa dibenerin 😀

  • revi

    Pak, kok build target pas buat new android project g bs dicentang ya?
    Mohon bantuannya. Terima Kasih

  • Agus Haryanto

    @revi, Emulator nya sudah dibuat belum

  • revi

    sudah saya buat, tp tetep g bs. gmn ya?

  • caesar

    mas mau tanya gimana si cara buat shopping cart di android

    terima kasih

  • revi

    cara buat button link untuk menggabungkan beberapa projek gimamana mas?
    mohon bantuannya…

  • mifta

    mas agus saya telah mengikuti saran “@paranoid android” di atas , semuanya berjalan baik akan tetapi jika saya masukan panjang = 3 dan lebar 2 , yang terjadi adalah kok hasilnya 6.0 mas , nah yang saya mau tanya menghilangkan angka nol dibelakang koma itu bagaimana mas ?

  • mas berarti aplikasi tersebut bisa di jalnkan di pc dl ya sebelum ke hp??

  • Yaqub

    mau tanya nih mas, udah lama ni error ga beres2. udah ke stackoverflow juga tapi blum ada yang bisa mberesin.

    errornya disini : di file .java

    txtPanjang = (EditText) findViewById(R.id.txtPanjang);
    txtLebar = (EditText) findViewById(R.id.txtLebar);
    txtLuas = (EditText) findViewById(R.id.txtLuas);
    btnHitung = (Button) findViewById(R.id.btnHitung);

    isi errornya : R cannot be resolved to a variable

    apa yang salah ya? udah utak atik R.java nya juga, clean, update sdk, ubah2 properties, dll tapi ya tetep aja error.

    semoga master bisa membantu 🙂

  • tolee

    mas, kalau mau buat program 2 class gmana? class 1 isinya editText, button. class 2 isinya teksView. nah kalau edittext saya isi nama sya lalu di klik button, di textView otomatis tertulis nama saya gtu.
    kalau saya nulis okesaja si edittext, lalu buttonnya saya klik, maka otomatis tampilan textview juga tertulis okesaja gt mas. mhon sharenya y mas

  • febri

    nice mastah

  • Nof

    mas mau tnya. kenapa pas saya running kok keluar pesan seperti ini diconsole nya:
    [2013-06-19 12:11:26 – Emulator] Failed to allocate memory: 8
    [2013-06-19 12:11:26 – Emulator]
    [2013-06-19 12:11:26 – Emulator] This application has requested the Runtime to terminate it in an unusual way.
    [2013-06-19 12:11:26 – Emulator] Please contact the application’s support team for more information.

    Mohon bantuannya mas…
    thanks

  • Agus Haryanto

    @Nof, Didelte saja emulator existing, lalu buat emulator baru

  • Nof

    terima kasih mas, sudah saya coba ternyta bisa…
    oya satu lagi, klu diintegrasikan dengan php dan mysql bisa gk mas?

  • Mas, mau nanya nih, saya kan nubi dalam pemrograman Android, jadi kalo masih awal gini apa harus belajar pemrograman java terlebih dahulu ?

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>