TUTORIAL ANDROID
Membangun Aplikasi Calculator Untuk Andr oid
Indra W idiatm ojo
2
Pembuka
Kali ini penulis akan berbagi pengalaman tentang bagaimana cara membuat aplikasi
sederhanan didalam android (smart phone Android) bagi pemula. Disini penulis akan menggunakan
ADT (
Android Developer Tools
)
Eclipse dan SDK Android
untuk digunakan membuat aplikasi Android.
Saya harap kalian semua sudah mengerti tentang
Eclipse
atau fitur-fitur didalamnya dan cara
memakainya.
Sebagai contoh kali ini penulis akan berbagi cara bagaimana membuat aplikasi Calculator
didalam Android. Untuk membuat aplikasi Calculator tersebut saya akan membagi 2 cara
pengerjaannya yaitu pertama
desain interface
, dan yang kedua
pengkodingan
.
D esain I nterface
Rencana desain calculator yang akan kita buat adalah sebagai berikut :
Untuk mendesain aplikasi diatas pertama buka Eclipse lalu klik
file
New
pilih
Android
3
Isikan
Aplication Name
,
Project Name
, dan
Package Name
setelah diisikan semua kemudian klik next
sampai muncul kotak dialog sebagai berikut :
4
Buka
AndroidManifest.xml
dan gantikan
source code
yang diblok dengan
@android:style/theme.black
seperti pada gambar dibawah ini
Selanjutnya kita akan membuat gradasi warna untuk memperindah interface calculator yang
kita buat nantinya. Untuk membuat gradasi kita mulai dari folder projeck
Calculator Of Math,
pilih
res
drawable_hdpi.
Pada
drawable_hdpi
klik kanan pilih
New
Other
Android
Android XML File
5
Pada
file
isikan dengan “bg_button” dan pada
root Element
nya pilih
selector
setelah itu finish.
Isikan kode XML dibawah ini ke dalam yang ditunjukan oleh anak panah diatas
<i t emandr oi d: st at e_pr essed=" t r ue">
<shape>
<sol i d andr oi d: col or=" #74138C"/ >
<st r oke andr oi d: wi dt h=" 1dp"/ >
<cor ner s andr oi d: r adi us=" 10dp"/ >
<paddi ng
andr oi d: bot t om=" 10dp"
andr oi d: t op=" 10dp"
andr oi d: r i ght=" 10dp"
andr oi d: l ef t=" 10dp"/ >
</shape>
</i t em>
<i t em>
<shape>
<gr adi ent
andr oi d: st ar t Col or=" #FF7DFF"
andr oi d: endCol or=" #990099"
6
Tambahkan XML file kedalam folder
drawable_hdpi
dengan cara yang sama seperti sebelumnya
dengan nama “bg_latar” dan pada
root Element
nya pilih
selector
setelah itu finish. Isikan kode XML
dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
<i t em>
Tambahkan XML file kedalam folder
drawable_hdpi
dengan cara yang sama seperti sebelumnya
dengan nama “bg_latarsoal” dan pada
root Element
nya pilih
selector
setelah itu finish. Isikan kode
XML dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
7
</shape> </i t em>
Tambahkan XML file kedalam folder
drawable_hdpi
dengan cara yang sama seperti sebelumnya
dengan nama “bg_text” dan pada
root Element
nya pilih
selector
setelah itu finish. Isikan kode XML
dibawah ini ke dalam yang ditunjukan oleh anak panah pada gambar yang ditunjukan sebelumnya
<i t em>
<shape>
<gr adi ent
andr oi d: st ar t Col or=" #FFFFFF"
andr oi d: endCol or=" #C0F7FE"
andr oi d: angl e=" 270"/ >
<st r oke
andr oi d: wi dt h=" 1dp"
andr oi d: col or=" #A5D3CA"/ >
<cor ner s andr oi d: r adi us=" 15dp"/ >
<paddi ng
andr oi d: l ef t=" 10dp"
andr oi d: r i ght=" 10dp"
andr oi d: t op=" 10dp"
andr oi d: bot t om=" 10dp"/ >
</shape> </i t em>
Referensi kode warna :
-
http://www.sambidoplang.mobie.in/Warna
-
http://www.infoindong.com/2013/01/kode-warna-html.html
Setelah selesai selanjutnya masuk ke
res
values
pilih
string.xml
yang ada dalam projeck
8
Tambahkah code XML dibawah ini di tempat yang ditunjukan oleh anak panah di atas.
<st r i ng name=" l bl _def oul d">medi um_t ext</st r i ng>
Kode-kode XML diatas nantinya akan dipanggil di setiap komponen-komponen (button,
textView, textEdit, dll) pada desain interface calclulator.
Selanjutnya kita akan membuat interface calculator tersebut dengan cara buka folder
res
12
</Li near Layout>
</Scr ol l Vi ew>
Kode diatas bisa dilihat dalam bentuk navigator seperti pada gambar dibawah ini
Hasil dari koding XML diatas dapat kita liat hasil sementaranya dengan cara membuka
Graphical
13
Pengkodingan
Dalam pembuat aplikasi Android bahasa pemrograman yang digunakan adalah bahasa
pemrograman JAVA. Untuk memulainya kita harus membuka folder yang ada didalam project
Calculation Of Math.
Buka
rsc
com.indra.calculationofmath
MainActivty.java
kemudian tulis
semua
source code
di bawah ini.
package com. i ndr a. cal cul at i onof mat h;
i mpor t andr oi d. app. Act i vi t y;
i mpor t andr oi d. os. Bundl e;
i mpor t andr oi d. vi ew. Vi ew;
i mpor t andr oi d. wi dget . Edi t Text ;
i mpor t andr oi d. wi dget . Text Vi ew;
publ i c cl ass Mai nAct i vi t y ext ends Act i vi t y { Edi t Text t xt Number 1, t xt Number 2; Text Vi ew l bl Hasi l;
doubl e number 1, number 2, hasi l; St r i ng oper at or;
@Over r i de
pr ot ect ed voi d onCr eat e( Bundl e savedI nst anceSt at e) { super. onCr eat e( savedI nst anceSt at e) ;
set Cont ent Vi ew( R. l ayout .act i vi t y_mai n) ;
t xt Number 1=( Edi t Text ) f i ndVi ewByI d( R. i d.edi t Text 1) ; t xt Number 2=( Edi t Text ) f i ndVi ewByI d( R. i d.edi t Text 2) ; l bl Hasi l=( Text Vi ew) f i ndVi ewByI d( R. i d.t ext Vi ew1) ;
17
el se i f (oper at or==" quadr at ") {
hasi l=Mat h.pow(number 1, number 2) ; }
el se i f (oper at or==" Mod") { hasi l=number 1 % number 2; }
l bl Hasi l. set Text ( St r i ng.val ueOf(hasi l) ) ; }
}
