aplikasi hitung bangun datar berbasis android

S4g3jali

Aplikasi Android untuk Menghitung Luas dan Keliling Bangun Datar

Tentang Aplikasi

Sebelum kita mendevelop aplikasi ini, saya ingin menerangkan mengenai aplikasi ini secara umum.

Aplikasi Hitung Luas dan Keliling Bangun Datar ini merupakan aplikasi yang bisa digunakan untuk

melakukan proses perhitungan luas dan keliling bangun datar dan dapat menampilkan

penjelasan mengenai bangun datar beserta jenis-jenis bangun datar secara umum.

Struktur Menu

Aplikasi ini memiliki 3 buah menu utama di dalam tab menu, yaitu Option Menu, Bangun

Datar, Hitung Bangun Datar. Berikut penjelasan mengenai menu-menu tersebut :

- Option menu adalah menu yang akan muncul saat tombol menu pada device di-klik, dan akan

memunculkan dua buah sub menu, yaitu Tentang (berisi penjelasan mengenai aplikasi ini) dan

Exit (menu untuk keluar dari aplikasi ini).

- Bangun Datar adalah menu yang berisi penjelasan mengenai bangun datar secara umum yang

akan ditampilkan menggunakan gambar.

- Hitung Bangun Datar adalah menu yang berisi list view jenis-jenis bangun datar yang ada

(Persegi, Persegi Panjang,Segitiga, Jajar Genjang, Trapesium, Layang-layang, Belah Ketupat, dan

Lingkaran), yang apabila di klik akan berpindah ke sub menu bangun datar tersebut, dimana di

sub menu bangun datar tersebut terdapat 3 buah button yang akan menuju ke menu yang berbeda-

beda. Button tersebut terdiri dari :

button tentang bangun datar tersebut

button untuk menghitung luas bangun datar tersebut

button untuk menghitung keliling bangun datar tersebut

S4g3jali


Aplikasi ini mempunyai struktur menu sebagai berikut :

Rancangan Struktur Menu

S4g3jali


Flowchart

Flowchart Sistem

Berikut merupakan flowchart system yang menggambarkan proses berjalannya aplikasi dari awal

sampai berakhir.

Flowchart Sistem

S4g3jali


Flowchart Program

Berikut merupakan 2 buah flowchart dari salah satu fitur perhitungan luas dan keliling aplikasi ini,

yaitu luas belah ketupat dan keliling belah ketupat:

a. Flowchart Luas Belah Ketupat

Flowchart Program Hitung Luas Belah Ketupat

Proses perhitungan luas belah ketupat yaitu :

1. Masukkan diagonal 1

2. Masukkan diagonal 2

3. Hitung luas belah ketupat : Luas = (diagonal 1*diagonal 2) / 2

4. Tampilkan hasil perhitungan luas

S4g3jali


b. Flowchart Keliling belah ketupat

Flowchart Program Hitung Keliling Belah Ketupat

Proses perhitungan keliling belah ketupat yaitu :

1. Masukkan sisi

2. Hitung keliling belah ketupat : keliling = 4*sisi

3. Tampilkan hasil perhitungan keliling

S4g3jali


Rancangan Tampilan Aplikasi

Berikut perancangan tampilan aplikasi ini :

Rancangan Tampilan Splash Screen

Rancangan halaman utama

Bangun Datar Hitung Bangun

Datar

Tab Menu

Loading % Completed

Hitung Luas dan Keliling Bangun Datar

Image View (Tampilan Splash Screen)

S4g3jali


Rancangan halaman utama saat Option Menu muncul

Rancangan halaman Tentang saat menu Tentang di Option Menu dipilih


Datar

Tentang Exit

Tab Menu

Tentang

Image View (Tentang Aplikasi)

S4g3jali


Rancangan halaman utama saat menu Bangun Datar di sentuh

Rancangan halaman utama saat menu Hitung Bangun Datar di sentuh


Datar

Image View (Tentang Bangun Datar)

Tab Menu

Hitung Bangun

Datar

Persegi

Persegi Panjang

Segitiga

Jajar Genjang

Trapesium

Layang-Layang

Belah Ketupat

Lingkaran

Bangun Datar

Tab Menu

S4g3jali


Rancangan halaman bangun datar (jajar genjang) setelah kita memilih list view

bangun datar di menu Hitung Bangun Datar

Rancangan halaman Tentang Jajar Genjang saat button Tentang Jajar Genjang di sentuh

Tentang Jajar Genjang

Image View(Tentang Jajar Genjang)

Jajar Genjang

Background

Tentang Jajar Genjang

Luas Jajar Genjang

Keliling Jajar Genjang

S4g3jali


Rancangan halaman Luas Jajar Genjang saat button Luas Jajar Genjang di sentuh

Rancangan halaman Keliling Jajar Genjang saat button Keliling Jajar Genjang di sentuh

Luas Jajar Genjang

Alas :

Tinggi :

Luas Jajar Genjang :

Hitung Luas

Keliling Jajar Genjang

Panjang :

Lebar :

Keliling Jajar Genjang :

Hitung Luas

S4g3jali


Persiapan

Untuk memulai mendevelop aplikasi ini pastikan anda sudah menginstal editor, JDK, SDK Android,

dan ADT Plugin di Komputer atau Laptop anda. Kalau belum, anda bisa mendownload nya melalui

link di bawah ini :

1. Editor (Eclipse / Netbeans), saya menggunakan Eclipse.

2. JDK

3. SDK Android

4. ADT Plugin

Untuk cara menginstalnya, anda bisa mecari referensi di internet karena sudah banyak tersedia.

Tahapan Pembuatan Aplikasi

Membuat Project Baru

1. Jalankan Eclipse dan Buatlah Project Baru :

- Klik FileNewProject

S4g3jali


- Kemudian akan muncul kotak dialog sbb :

Pilih Android Application Project, kemudian klik Next

- Setelah itu akan muncu dialog sbb :

Apllication Name Nama aplikasi yang akan kita buat, harus diawali dengan huruf

besar. Misal namanya : Hitung Luas dan Keliling Bangun Datar

Project Name nama project atau nama folder dari aplikasi yang akan kita buat. Misal

namanya : Bangun_Datar, penamaan project bisa sama dengan penamaan aplikasi.

Package Name Nama Paket Java, Misal namanya : s4g3jali.bangundatar

Minimum Required SDK SDK minimum yang dibutuhkan untuk menjalankan aplikasi,

disini saya set API 8 : Android 2.2 (Froyo).

Target SDK Target SDK untuk menjalankan aplikasi. Disini saya set API 10 : Android

2.3.3 (Gingerbread), karena Menurut situs Developer Android, Android versi 2.3.3 yang

dijuluki Gingerbread masih menjadi OS Google yang paling banyak dipakai dengan

jumlah 50% dari total pengguna Android (presentase tahun 2012).

Compile with SDK yang kita pilih untuk mengkompile aplikasi ini pada saat di develop.

Disini saya set API 16 : Android 4.2 (Jelly Bean). Saya memilih jelly bean karena walau

S4g3jali


saya menargetkan SDK nya di Gingerbread, tapi saya ingin mencoba kompatibilitas di

versi yang lebih tinggi.

Theme thema aplikasi

Berikut tampilannya :

Setelah selesai klik next dan next, setelah semua proses selesai, maka project kita akan

tampil di project explorer seperti berikut :

S4g3jali


Membuat project aplikasi Hitung Luas dan Keliling Bangun Datar

1. Kita buat dan kumpulkan gambar yang akan digunakan dalam aplikasi ini. Gambar-gambar yang

akan digunakan yaitu untuk :

- launcher

- Splash Screen

- icon tab menu (menu bangun datar dan hitung bangun datar)

- icon option menu (menu tentang dan exit)

- background

- button

- penjelasan mengenai aplikasi, bangun datar, persegi, persegi panjang, segitiga, jajar genjang,

trapesium, layang-layang, belah ketupat, dan lingkaran.

Buat folder drawable di dalam folder res

letakkan semua gambar tersebut di dalam folder tersebut dengan format *.png

S4g3jali


2. Pada langkah ini kita masuk ke dalam tahap pengkodean. Untuk membangun aplikasi ini kita

membutuhkan activity dan layout sebagai berikut :

Berikut activity nya :

S4g3jali


Untuk hirarki pemanggilan activity nya adalah sebagai berikut :

Activity SplashScreen.java merupakan activity yang pertama kali di jalankan. Kita dapat mengatur

activity mana yang akan dijalankan pertama adalah di AndroidManifest.xml, dan juga semua activity

yang ada harus kita definisikan di sini juga, jadi semua class activity dalam aplikasi harus didefinisikan

di AndroidManifest.xml, kecuali untuk activity Zoom dan activity Tentang tidak perlu kita definisikan.

Kalau activity Zoom kita hanya memanfaatkan classnya untuk melakukan zooming terhadap gambar.

Jadi ketika kita ingin membuat agar gambar yang kita masukkan bisa di zoom, maka kita tinggal

memanggil nya saja. Sedangkan activity Tentang karena akan di masukkan ke dalam Option Menu,

maka tidak perlu kita definisikan juga karena untuk Option Menu, hanya dengan memanfaatkan

S4g3jali


method onCreateOptionsMenu() kita bisa membuatnya, nantinya tinggal kita buat layout nya saja

dan kita letakkan di folder resmenu.

Untuk penjelasan mengenai script-scriptnya bisa anda lihat di project yang telah saya buat, walau

tidak semua script saya berikan keterangan, untuk sisanya bisa anda pahami sendiri.

Sebelum kita membuat activity tersebut, pertama kita buat dulu activity yang akan kita gunakan

untuk mendeklarasikan button sebagai navigasi yang akan kita gunakan. Kita buat activity button di

sebuah paket baru dengan nama paket fungsiButton, caranya klik kanan di folder src, kemudian pilih

newpackage, dan akan muncul dialog box seperti berikut :

Setelah selesai klik finish, dan kemudian kita buat activity FungsiButton.java di dalam paket tersebut:

S4g3jali


Untuk file-file layoutnya adalah sebagai berikut :

S4g3jali


Selain file-file layout diatas, ada file layout lain yang perlu kita buat juga, yaitu :

style_hitungbangun.xml dan style_tentangbangundatar.xml digunakan pada activity TabLayout.java

sebagai indicator icon dari tab menu. Sedangkan opt_menu.xml digunakan pada TabLayout.java

juga, sebagai layout dari Option Menu.

Berikut pasangan activity dan layout nya :

Activity Layout

SplashScreen.java splashscreen.xml

TabLayout.java tablayout.xml

Tentang.java tentang.xml

TentangBangunDatar.java tentangbangundatar.xml

Persegi.java persegi.xml

LuasPersegi.java lpersegi.xml

KelilingPersegi.java kpersegi.xml

PersegiPanjang.java persegipanjang.xml

LuasPersegiPanjang.java lpersegipanjang.xml

KelilingPersegiPanjang.java kpersegipanjang.xml

Segitiga.java segitiga.xml

S4g3jali


LuasSegitiga.java lsegitiga.xml

KelilingSegitiga.java ksegitiga.xml

JajarGenjang.java jajargenjang.xml

LuasJajarGenjang.java ljajargenjang.xml

KelilingJajarGenjang.java kjajargenjang.xml

Trapesium.java trapesium.xml

LuasTrapesium.java ltrapesium.xml

KelilingTrapesium.java ktrapesium.xml

LayangLayang.java layanglayang.xml

LuasLayangLayang.java llayanglayang.xml

KelilingLayangLayang.java klayanglayang.xml

BelahKetupat.java belahketupat.xml

LuasBelahKetupat.java lbelahketupat.xml

KelilingBelahKetupat.java kbelahketupa.xml

Lingkaran.java lingkaran.xml

LuasLingkaran.java llingkaran.xml

KelilingLingkaran.java klingkaran.xml

pada list di atas kita tidak menemukan layout button.xml, ini karena layout tersebut digunakan

untuk mendefinisikan button. Layout ini digunakan sebagai background oleh layout lain yang

menggunakan button.

S4g3jali


Demikian penjelasan singkat mengenai aplikasi ini, selanjutnya anda bisa langsung mencoba

project yang sudah saya sertakan. Untuk dapat melihat hasilnya, anda bisa menjalankannya di

editor eclipse dengan menggunakan Android Virtual Device sebagai emulator, tetapi harus di

buat terlebih dahulu. Untuk membuatnya juga sudah banyak referensi tersedia di internet. Tapi

bagi anda yang mempunyai HP dengan OS Android di dalamnya, anda bisa menginstalkan

aplikasi ini langsung di HP anda dengan cara membuat installan .apk nya, di eclipse pun cara nya

sangat mudah atau anda juga bisa menggunakan HP anda sebagai emulator nya.

Berikut hasil dari implementasi aplikasi ini :

1. SplashScreen (intro) saat aplikasi ini pertama kali dijalankan

Gambar SplashScreen

2. Tampilan Tab Menu dengan menu Bangun Datar yang terseleksi

Gambar Tab MenuBangun Datar

S4g3jali


3. Tampilan Tab Menu dengan menu Hitung Bangun Datar yang terseleksi

Gambar Tab MenuHitung Bangun Datar

4. Tampilan saat salah satu list bangun datar yang dipilih (misal belah ketupat)

Gambar Menu belah Ketupat

5. Tampilan saat button Tentang Belah Ketupat, Luas belah Ketupat, dan

Keliling Belah Ketupat di klik

Gambar Tentang Belah Ketupat Gambar Luas Belah Ketupat

S4g3jali


Contoh soal :

Diketahui jjika panjang diagonal belah

ketupat masing-masing 4cm dan 5cm dan

panjang sisinya 5cm. Hitunglah Luas dan

Keliling belah ketupat tersebut.

Jawab :

Luas = (Diagonal 1 x Diagonal 2) / 2

Luas = (4 cm x 5 cm) / 2

Luas = 10 cm

Keliling = 4 x sisi

Keliling = 4 x 5 = 20 cm

Gambar Keliling Belah Ketupat

6. Tampilan saat Option Menu dan menu tentang di klik

Gambar Option Menu Gambar Menu Tentang

S4g3jali


Sekian penjelasan yang sangat singkat ini, untuk lebih

lanjutnya silahkan mencoba script nya secara langsung.

semoga bermanfaat.

aplikasi hitung bangun datar berbasis android

Documents