Aplikasi Hitung Bangun Datar Berbasis Android

S4g3jali

Aplikasi Android untuk Menghitung Luas dan Keliling Bangun Datar

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 bangun datar beserta jenis-jenis jenis- jenis bangun datar secara umum.

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 terdiri dari : 

button tentang bangun datar tersebut tersebut



button untuk menghitung menghitung luas bangun bangun datar tersebut tersebut



button untuk menghitung menghitung keliling bangun bangun datar tersebut tersebut

S4g3jali


Aplikasi ini mempunyai struktur menu sebagai berikut :

Rancangan Struktur Menu

S4g3jali


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

Berikut perancangan tampilan aplikasi ini :

Hitung Luas dan Keliling Bangun Datar

Image View (Tampilan Splash Screen)

Loading … % Completed

Rancangan Tampilan Splash Screen Tab Menu Bangun Datar

Hitung Bangun Datar

Rancangan halaman utama


S4g3jali

Tab Menu Bangun Datar

Hitung Bangun Datar

Tentang

Exit

Rancangan halaman utama saat Option Menu muncul

Tentang

Image View (Tentang Aplikasi)

Rancangan halaman Tentang saat menu Tentang di Option Menu dipilih


S4g3jali


Hitung Bangun Datar

Image View (Tentang Bangun Datar)

Rancangan halaman utama saat menu Bangun Datar di sentuh


Hitung Bangun Datar

Persegi Persegi Panjang Segitiga Jajar Genjang Trapesium Layang-Layang Belah Ketupat Lingkaran

Rancangan halaman utama saat menu Hitung Bangun Datar di sentuh


S4g3jali

Jajar Genjang

Tentang Jajar Genjang

Luas Jajar Genjang Keliling Jajar Genjang

Background

Rancangan halaman bangun datar (jajar genjang) setelah kita memilih list view bangun datar di menu Hitung Bangun Datar

Tentang Jajar Genjang

Image View(Tentang Jajar Genjang)

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


S4g3jali

Luas Jajar Genjang Alas :

Tinggi :

Hitung Luas Luas Jajar Genjang :

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

Keliling Jajar Genjang Panjang :

Lebar :

Hitung Luas Keliling Jajar Genjang :

Rancangan halaman Keliling Jajar Genjang saat butto n Keliling Jajar Genjang di sentuh

S4g3jali


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. 2. 3. 4.

Editor (Eclipse / Netbeans), saya menggunakan Eclipse. JDK SDK Android ADT Plugin

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

Membuat Project Baru

1.

Jalankan Eclipse dan Buatlah Project Baru :

-

Klik FileNewProject


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 apli kasi, 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

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 g enjang, 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 k ita 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 res menu. Untuk penjelasan mengenai script-scriptnya bisa anda lihat di project yang telah saya buat, walau tidak semua script saya berikan keterangan, untuk sisanya bi sa 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 newpackage, dan akan muncul dialog box seperti berikut :

Setelah selesai klik finish, dan kemudian ki ta 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 Menu Bangun Datar


S4g3jali

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

Gambar Tab Menu Hitung 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

Recommend Documents