Professional Documents
Culture Documents
Pengantar Penulis.
Telah banyak juga buku-buku yang membahas mengenai Android programming, mulai yang dasar hingga yang tingkat mahir, namun pada buku ini penulis hanya membahas mengenai yang dasar-dasar saja karena penulis juga masih harus banyak belajar. Anda bebas mendistribusikan dan membagikan buku elektronik ini kepada siapa saja ataupun ingin menggunakan buku ini sebagai bahan pembelajaran ataupun pelatihan bagi suatu institusi pendidikan dengan menyertakan sumber dan nama penulis. Penulis tidak memungut uang sepeserpun atas waktu dan tenaga yang penulis gunakan untuk menyelesaikan buku ini, namun penulis hanya mengharapkan bagi siapa saja yang mendapatkan buku ini dan mendapat manfaat setelah menggunakannya untuk bersedekah kepada orang-orang yang kurang mampu sejumlah Rp 1000 rupiah, namun jika ada yang ingin memberikan lebih silahkan saja !. "uku ini terdiri dari # bab yaitu sebagai berikut "ab 1 "erisi sejarah Android. "ab $ "erisi %ara instalasi Android &'( dan )%lipse. "ab * +embuat aplikasi hello world di Android. "ab , +eran%angan tampilan program dan juga beberapa %ara untuk memanipulasi widget. "ab # +embahas %ara membuat aplikasi pemesanan fast food dan juga membuat aplikasi penghitung luas bangun datar. Akhir kata penulis u%apkan banyak terima kasih dan semoga buku ini bermanfaat bagi yang menggunakannya.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. pada perangkat seluler. 'i lain pihak, 0oogle merilis kode-kode Android dibawah lisensi Apa%he, sebuah lisensi perangkat lunak dan standar terbuka perangkat seluler. Terdapat dua jenis distributor sistem operasi Android. Pertama yang dapat dukungan penuh dari 0oogle atau 0oogle +ail &er8i%e -0+&! dan kedua adalah yang benar-benar bebas distribusinya tanpa dukungan langsung dari 0oogle atau dikenal sebagai 2pen 3andset 'istribution -'3'!. "erikut ini adalah sejarah perjalanan Android 1. (erjasama Android 1n%. dengan 0oogle 1n%. $. $009 - $00: Produk awal Android *. Android 8ersi 1.1 ,. Android 7ersi 1.# -4up%ake! #. Android 7ersi 1.; -'onut! ;. Android 7ersi $.0<$.1 -)%lair! 9. Android 7ersi $.$ -=royo < =ro>en ?oghurt! :. Android 7ersi $.* -0ingerbread! @. Android 7ersi *.0 -3oney%omb!
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Android, dokumentasi yang lengkap, dan juga beberapa %ontoh aplikasi. 'idalam Android &'( tersebut juga terdapat tools untuk membantu Anda menulis dan me-debug aplikasi yang kita buat, seperti misalnya )mulator Android untuk menjalankan projek Android yang anda buat dan juga 'al8ik 'ebug +onitoring &er8i%e -''+&! untuk membantu Anda dalam memperbaiki aplikasi yang Anda buat jika terdapat kesalahan.
$emulai Android
1. %nstall "a&a SD' 1.(
1nstall ja8a &'( -&oftware 'e8elopment (it! 1.; pada komputer anda, jika anda tidak
2. %nstall )clipse 1nstall e%lipse pada komputer anda, sebaiknya gunakan e%lipse *.# -0alileo! atau e%lipse *.; -3elios!. Anda dapat mendownload e%lipse dimana saja karena e%lipse ini bersifat open sour%e, atau anda dapat juga mendownload langsung dari situs resmi e%lipse http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/heliossr2
&etelah )%lipse berhasil didownload, selanjutnya ekstrak file tersebut, Anda bebas untuk memilih di folder mana Anda ingin mengekstraknya. *. %nstall Android SD' 1nstall Android &'( pada komputer anda, jika anda belum memiliki android &'(, anda dapat mendownloadnya di http://developer.android.com/sdk/index.html.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. &etelah proses download selesai, ekstrak file Android &'( tersebut di folder mana saja yang anda suka, atau agar lebih mudah ekstrak file Android &'( tersebut satu folder dengan folder dimana Anda mengekstrak file e%lipse. +. %nstall )clipse ADT Plugin "uka e%lipse yang telah anda download, lalu pilih menu 3elp C 1nstall 6ew &oftware
(lik button add, lalu pada bagian name ketika adt -android dan pada bagian lo%ation ketikan https://dl-ssl.google.com/android/eclipse/ seperti gambar dibawah ini
&etelah selesai, maka akan keluar tampilan D'e8eloper ToolsE, jangan lupa %entang Biraynara Copyright 2011
Firdan Ardiansyah | Pengenalan Dasar Android Programming. bagian 'e8eloper tools lalu klik ne/t.
#. 'ownload .ibrary-.ibrary &elanjutnya download .ibrary-library android dengan %ara pilih menu Bindows C Android &'( and A7' +anager.
.alu pilih semua pa%kage yang tersedia, klik install sele%ted dan tunggu sampai proses download selesai. Proses download ini memang lama karena 1 file kira-kira besarnya Biraynara Copyright 2011
Firdan Ardiansyah | Pengenalan Dasar Android Programming. @0mb, jadi saya saranin download aja yang &'( Platform Android $.$, AP1 :, Re8ision $. (alo ada waktu luang, baru download 8ersi platform yang lainnya.
(. $embuat )mulator &etelah proses download library android diatas selesai, maka langkah selanjutnya adalah membuat emulator android. Pilih menu windows C Android &'( and A7' +anager. &etelah keluar windows Android &'( and A7' manager pilih 6ew, lalu isikan data seperti gambar dibawah ini.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. &etelah emulator android berhasil dibuat, maka langkah selanjutnya adalah mengetes emulator android tersebut apakah berjalan dengan baik atau tidak dengan %ara, pilih menu windows - C Android &'( and A7' +anager. Pilih 7irtual 'e8i%es. .alu pilih emulator android yang kita buat tadi, lalu klik &tar.
Tunggu beberapa saat sampai emulator android menampilkan gambar seperti di bawah ini.
&ai tahap ini Anda telah berhasil mengkonfigurasi )%lipse 1') agar dapat digunakan untuk memulai de8elopment program Android.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. atau untuk lebih jelasnya silahkan lihat gambar dibawah ini
Firdan Ardiansyah | Pengenalan Dasar Android Programming. &etelah proje%t hello world berhasil dibuat, selanjutnya buka file main./ml yang terdapat pada folder res-layout
)dit file main./ml tersebut menjadi seperti %oding /ml 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="Hallo World . ini pro!ram android pertama sa"a" /> </LinearLayout>
&elanjutnya %oba anda jalankan program android hallo world tersebut melalui emulator yang sebelumnya telah anda buat dengan %ara klik kanan proje%t hello world, lalu pilih Run As C Android Appli%ation.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Tunggu sampai emulator mun%ul, setelah mun%ul maka akan ditampilkan program Android 3ello Borld yang tadi Anda buat seperti gambar dibawah ini
Pada program diatas anda hanya membuat sebuah Te/t7iew yang berisikan teks D3allo BorldHHH. 1ni program android pertama sayaI pada main./ml tanpa menambahkan 8ariabel string apapun. main./ml tersebut merupakan file untuk mengatur user interfa%e atau tampilan dari program yang anda buat pada Android. ,allo World Dengan -ambar. &ekarang kita akan men%oba merubah teks hello world yang sebelumnya ditampilkan dalam bentuk teks menjadi sebuah gambar, anda bisa membuat gambarnya terlebih dahulu dengan menggunakan gimp yang terdapat pada linu/ ataupun paint yang terdapat pada windows. Atau jika anda malas membuatnya, gunakan saja gambar
setelah anda mendapatkan atau membuat gambar hello world, selanjutnya %opy file gambar tersebut ke folder res-drawable-hdpi, perlu diperhatikan juga untuk penulisan nama file gambarnya harus dengan huruf ke%il semua dan tidak boleh ada spasi, %ontoh disini saya menggunakan nama imageshelloworld. "uka kembali file main./ml lalu lakukan perubahan seperti %oding /ml 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" > <ImageView android:layout_width = "wrap_content" android:layout_height= "wrap_content" android:layout_gravity = "center" android:src = "#drawa$le/ima!eshelloworld" /> </LinearLayout>
Aika pada file /ml sebelumnya Anda menggunakan Te/t7iew untuk menampilkan teks hello world, maka disini untuk menampilkan gambar menggunakan /ml 1mage7iew. Aalankan proje%t hello world tersebut melalui emulator android, maka output tampilannya akan seperti gambar dibawah ini
Pada bab * ini kita telah mempelajari mengenai menampilkan teks dan gambar melalui main./ml. +asih banyak lagi yang akan kita bahas pada bab-bab selanjutnya, jadi jangan lupa bikin kopi dan bakar rokoknya biar gak ngantuk !. (eep ro%kin dude.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. CheckBox = Tom#ol yang merepresentasi"an apa"ah terpilih %$he$"ed& ata! tida" %!n$he$"ed&. RadioButton = Tom#ol/tom#ol yang ditampil"an se$ara gro!p* #iasanya dig!na"an !nt!" !ser memilih salah sat! dari tom#ol yang ada pada 0adioB!tton terse#!t. 1anti "ita a"an men$o#a mem#!at masing/masing dari idget terse#!t* nam!n se#enarnya it! hanya #e#erapa idget yang dimili"i oleh Android. 2nt!" da3tar leng"apnya mengenai idget* Anda #isa men$arinya di sit!s ini 4 http://code.google.com/android/reference/view-gallery.html.
Layouts
+ayo!t 5anagers %Biasa dise#!t dengan +ayo!ts& dig!na"an !nt!" mengontrol posisi !tama dari layar. +ayo!ts dapat di le"at"an %em#ed& dengan layo!t lainnya* 'adi dengan "ata lain Anda dapat memas!"an le#ih dari sat! #!ah layo!t pada tampilan yang nantinya a"an di#!at. Android .D6 '!ga menyedia"an #e#erapa layo!ts sederhana !nt!" mem#ant! anda mem#ang!n tampilan program. (adi Anda tinggal memilih ingin mengg!na"an layo!t yang mana sa'a !nt!" mem#!at tampilan program yang nantinya a"an di#!at men'adi m!dah dimengerti dan dig!na"an. Be#erapa layo!ts yang terdapat pada Android 4 FrameLayout = +ayo!ts yang paling sederhana* Frame+ayo!t menampil"an setiap )ie di "iri atas. LinearLayout = +inear+ayo!t menam#ah"an setiap $hild Vie se$ara datar* artinya +inear+ayo!t hanya menampil"an sat! #!ah $hild Vie per#aris. RelativeLayout = Dengan mengg!na"an 0elati)e+ayo!t* Anda mende3inisi"an posisi dari masing/masing $hild Vie men'adi relati3. Ta leLayout = Ta#le+ayo!t mem!ng"in"an layo!t ditampil"an se$ara garis dan "olom ata! mirip ta#el %ya namanya '!ga ta#lelayo!t&. ! soluteLayout = .etiap $hild Vie di de3inisi"an dalam "ordinat. 1anti Anda a"an mempra"ti"an se$ara langs!ng salah sat! layo!ts terse#!t* ata! !nt!" le#ih Biraynara Copyright 2011
Firdan Ardiansyah | Pengenalan Dasar Android Programming. memahami de3inisi dari masing/masing layo!t terse#!t Anda dapat #er"!n'!ng "e sit!s 4 http477$ode.google.$om7android7de)el7!i7layo!t.html
"mplementasi wid#et
6ita a"an men$o#a mem#!at masing/masing idget yang telah di'elas"an se#el!mnya. 6ali ini "ita a"an men$o#a mengimplementasi"an idget TextVie * ,ditText dan se#!ah B!tton. +angs!ng sa'a #!"a e$lipse* #!at se#!ah pro'e$t Android #ar! lal! isi"an datanya seperti di#a ah ini 4 Pro'e$t 1ame = implementasi idget1 B!ild Target = Android 2.2 Appli$ation 1ame = 8mplementasi idget 1 Pa$"age 1ame = $om.implement1 Create A$ti)ity = my5ain 5in .D6 Version = 9 B!"a 3ile main.xml* "ita a"an memas!"an sat! #!ah TextVie * 1 #!ah ,ditText dan '!ga 1 #!ah B!tton. 5as!"an $oding xml seperti di#a ah ini 4
<?xml version="1.0" encoding="utf-8"?> < elativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="top"> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width = "wrap_content" android:layout_height= "wrap_content" android:layout_gravity = "center" android:text = "%asukan &ama 'nda" />
Pada masing/masing ,ditText dan '!ga B!tton* telah diserta"an se#!ah 8d %android4id&* 8d disini dig!na"an se#agai media yang nantinya dig!na"an !nt!" mem#!at se#!ah )aria#el pada masing/masing idget terse#!t*se"arang $o#a Anda lihat hasil dari pem#!atan halaman terse#!t dengan $ara "li" graphi$al layo!t yang ada pada "anan #a ah main.xml.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. 5a"a a"an didapat o!tp!t tampilan seperti di#a ah ini 4
:" selan'!tnya "ita #eralih "e 'a)a* #iasanya disininya ini yang #i"in "epala sedi"it aga" m!met* tapi slo lah* "alo ga" p!sing #!"an #ela'ar namanya 4&. +angs!ng a'a di#!"a 3ile my5ain.'a)a yang ada di 3older sr$/$om.implement1/my5ain.'a)a
Firdan Ardiansyah | Pengenalan Dasar Android Programming. .elan'!tnya #ila 3ile my5ain.'a)a telah ter#!"a isi"an dengan $oding 'a)a seperti di#a ah ini 4 Pertama kita import terlebih dahulu file-file yang dibutuhkan dalam pengembangan aplikasi ini
package com%im&lement'( import import import import import import android%a&&%)ctivity( android%os%"undle( android%view%View( android%widget%"utton( android%widget%!ditText( android%widget%TextView(
&elanjutnya deklarasikan %lass utama yang meng e/tends A%ti8ity, juga deklarasikan 8ariabel untuk masing-masing widget yang sebelumnya telah dibuat pada main./ml.
public class my*ain extends )ctivity + /,, #alled when the activity is -irst created% ,/ !ditText nama( "utton o$( TextView out&ut(
.alu Anda harus meng 28erride publi% 8oid on4reate, maksudnya adalah semua 8ariabel ataupun inner %lass yang terdapat didalam kelas on4reate akan dieksekusi pada waktu pertama kali program dijalankan. .alu mensetting layout yang akan ditampilkan, dalam hal ini layout main./ml pada bagian set4ontent7iew. 'an juga pendeklarasian dari masingmasing 8ariabel ok dan output.
./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2( o$ = 0"utton2 -indView"yId 0 %id%ok2( out&ut = 0TextView2 -indView"yId 0 %id%output2(
&elanjutnya buat sebuah %lass baru dengan nama hasil yang memiliki parameter 7iew, %lass ini adalah %lass yang akan tereksekusi apabila "utton ok yang sebelumnya telah dibuat di klik oleh user.
public class my*ain extends )ctivity + /,, #alled when the activity is -irst created% ,/ !ditText nama( "utton o$( TextView out&ut( ./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2( o$ = 0"utton2 -indView"yId 0 %id%ok2( out&ut = 0TextView2 -indView"yId 0 %id%output2( public void hasil 0View v2+ nama = 0!ditText2 -indView"yId 0 %id%nama2( nama%getText02%to1tring02( 1tring name = 1tring%value*f0nama%getText02%to1tring022( out&ut%setText045ama )nda )dalah 46name2( 3 3
Firdan Ardiansyah | Pengenalan Dasar Android Programming. .angkah terakhir tinggal kita lihat hasilnya melalui emulator seperti gambar dibawah ini
"agaimanaJ Apa Anda puas dengan proje%t Android yang telah anda buatJ &ebaiknya jangan puas dulu, karena masih banyak yang akan kita bahas. (alo kopinya abis, seduh lagi kopinya, kalo rokoknya abis, beli lagi di warung ya !.
%mplementas Widget 2.
&ekarang kita akan mempelajari bagaimana %ara membuat widget Radio"utton dan juga 4he%k"o/ yang definisinya sudah dijelaskan diatas beserta beberapa properties pendukung seperti &%roll7iew -nanti Anda akan tahu sendiri buat apa &%roll7iew itu, makanya ba%a terus ok!. (ali ini kita akan men%oba membuat sebuah aplikasi mengenai penghitungan gaji berdasarkan golongan dan juga status, jika golongan 1 maka gaji yang didapat adalah Rp. 1.000.000, jika golongan $ gaji yang didapat adalah Rp $.000.000 dan jika sudah menikah maka mendapatkan bonus sebesar Rp. #00.000. .angsung aja buat sebuah projek Android baru, lalu isikan datanya seperti dibawah ini Proje%t 6ame K Perhitungan 0aji "uild Target K Android $.$ Appli%ation 6ame K Perhitungan 0aji Pa%kage 6ame K %om.perhitungangaji 4reate A%ti8ity K my+ain +in &'( 7ersion K : .alu tekan =inish. 2k langkah pertama kita buka dulu file main./ml yang biasa digunakan untuk mengatur user interfa%e dari program yang akan kita buat, lalu masukan %oding /mlnya seperti %oding 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" > <1crollView android:layout_width = "fill_parent" android:layout_height= "wrap_content"
+ungkin Anda melihat sebuah properties baru diatas, yaitu <1crollView9 dengan menggunakan &%roll7iew memungkinkan kita untuk menggeser menu se%ara 8erti%al jika layar handphone yang digunakan tidak %ukup untuk menampilkan menu se%ara keseluruhan. Biraynara Copyright 2011
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Pada bagian Te/t7iew juga terdapat sebuah properties baru yang saya masukan, yaitu android:layout_marginTo& = "1)dp"9 maksud dari properties itu adalah membuat jarak atas dari Te/t7iew tersebut sehingga terdapat jarak dengan widget yang ada diatasnya. Anda juga dapat membuat jarak kanan, kiri dan bawah dengan menggunakan properties android:layout_margin ight9
android:layout_margin"ottom% android:layout_marginLe-t9
4oba kita lihat tampilan tampilan programnya pada panel 0raphi%al .ayout, maka tampilannya akan seperti pada gambar dibawah ini
&ekarang kita akan mengotak atik bagian kelas dari program penghitungan gaji tersebut, langsung saja buka file my+ain.ja8a lalu ketikan koding ja8anya seperti dibawah ini Terlebih dahulu import file-file yang dibutuhkan dalam pengembangan program
package com%&erhitunganga:i( import import import import android%a&&%)ctivity( android%os%"undle( android%view%View( android%widget%"utton(
.alu buat sebuah %lass publi% dan masukan juga 8ariabel 8ariabel sesuai dengan file main./ml yang dibuat
public class my*ain extends )ctivity + /,, #alled when the activity is -irst created% ,/ int ga:i1tatus9 ga:i7olongan( adio"utton gol'9 gol;( adio7rou& golongan( "utton hitung( #hec$"ox status(
28erride sebuah %lass on4reate, %lass ini merupakan %lass pertama yang akan dieksekusi pada saat program pertama kali dijalankan.
./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2( 3
&ekarang buat sebuah %lass baru dengan nama hitung, kelas ini merupakan %lass yang akan dieksekusi pada saat user mengklik tombol 3itung 0aji, nama %lass nya pun didasarkan pada nama properties dari widget button 3itung 0aji yaitu android:on#lic$ =
"hitun!"
.alu terakhir masukan 8ariabel dan juga proses perhitungan untuk melakukan perhitungan Total 0aji seperti di bawah ini
!ditText nama = 0!ditText2 -indView"yId 0 %id%nama2( TextView out&ut5ama = 0TextView2 -indView"yId 0 %id%output&ama2( 1tring name = nama%getText02%to1tring02( out&ut5ama%setText04Total 7a:i 46name2(
public class my*ain extends )ctivity + /,, #alled when the activity is -irst created% ,/ int ga:i1tatus9 ga:i7olongan( adio"utton gol'9 gol;( adio7rou& golongan( "utton hitung( #hec$"ox status( ./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2( 3
3 3(
Sekarang coba Anda jalankan aplikasi Penghitungan Gaji tersebut melalui mulator! maka akan tampak seperti gambar diba"ah ini :
Selanjutnya Masukan #ama! status dan juga golongan seperti diba"ah ini :
$erus tekan tombol hitung gaji! lalu scroll keba"ah untuk melihat total gaji yang akan ditampilkan %properties Scroll&ie" yang sebelumnya dibuatlah yang bikin tampilan aplikasi ini bisa di Scroll secara vertical' : Biraynara Copyright 2011
(agaimana) Mudah bukan membuat aplikasi perhitungan gaji dengan menggunakan "idget *adioGroup dan juga Check(o+) Praktekin ya! jangan cuma dibaca doank :'.
dan maksud dari "1020838" adalah merupakan kode "arna html yang
dapat digunakan untuk merubah "arna background pada Android. ,ntuk kode/ kode "arna html anda bisa tanya ke mbah google ya. Sekarang kita lihat hasilnya diba"ah ini :
karena kode "arna "1020838" merupakan kode "arna html untuk "arna biru! maka background program kita sekarang sudah berubah menjadi "arna biru. Mudah bukan untuk merubah "arna background.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. dengan nama dra"able seperti gambar diba"ah ini :
Setelah -older dibuat! selanjutnya adalah membuat sebuah -ile +ml baru yang nantinya digunakan untuk mempercantik tampilan background program. klik kanan -older dra"able tersebut lalu pilih ne"/other! lalu akan terbuka sebuah jendela baru! pilih -older Android/Android 0ML 1ile lalu klik ne+t. Pada -ile! isikan dengan nama manipulasi2background %tidak boleh ada spasi'! lalu pada klik layout pada type resourcenya lalu klik -inish. (iasanya -ile +ml yang baru dibuat tersebut tidak langsung berada di dalam -older dra"able! biasanya -ile tersebut ada didalam -older layout! jadi Anda tinggal pindahkan saja -ile +ml tersebut ke dalam -older dra"able dengan cara klik kanan -ile manipulasi2background.+ml pilih copy! lalu paste kedalam -older dra"able! -ile manipulasi2background yang ada didalam -older layout Anda hapus saja! maka sekarang -ile manipulasi2background tersebut sudah ada didalam -older dra"able.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Sekarang buka -ile manipulasi2background tersebut lalu isikan dengan coding seperti diba"ah ini :
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <sha&e> <solid android:color="1)1acf3" /> <stro$e android:width="/dip" android:color="1)1acf3" /> <corners android:radius="10dip" /> <&adding android:le-t="1)dip" android:right="10dip" android:to&="10dip" android:>ottom="10dip" /> </sha&e> </item> </selector>
3eterangan :
<solid android:color="1)1acf3" 45
stroke digunakan untuk membuat tepian pada layout! android:"idth merupakan lebar tepi dan android:color untuk "arna tepiannya! disini saya samakan saja "arnanya dengan "arna intinya.
<&adding android:le-t="1)dip" android:right="10dip" android:to&="10dip" android:>ottom="10dip"
45
Firdan Ardiansyah | Pengenalan Dasar Android Programming. padding digunakan untuk membatasi jarak atas! ba"ah! kiri dan kanan dengan layout pertama. Setelah selesai! selanjutnya buka -ile main.+ml pada program Perhitungan Gaji! lalu lakukan perubahan koding pada LinearLayout kedua! ingat ok LinearLayout yang kedua bukan yang pertama! karena yang pertama "arna backgroundnya sudah kita rubah menjadi "arna biru tua. ,ntuk lebih jelasnya lihat coding +ml pada LinearLayout kedua diba"ah ini :
<LinearLayout android:orientation="vertical" android:>ac$ground = "#drawa$le/manipulasi_$ack!round" android:layout_marginLe-t = ")dp" android:layout_margin ight= ")dp" android:layout_marginTo& = ")dp" android:layout_margin"ottom = ")dp" android:layout_width="fill_parent" android:layout_height="fill_parent" >
Lakukan juga perubahan "arna teks menjadi hitam pada masing/masing properties $e+t&ie" agar tidak bentrok dengan "arna yang digunakan pada background kedua dengan perintah android:text#olor = "1000000" ,ntuk lebih jelasnya! kita lihat saja listing kode main.+ml yang baru saja kita manipulasi :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:>ac$ground = "1020838" android:layout_width="fill_parent" android:layout_height="fill_parent" > <1crollView android:layout_width = "fill_parent" android:layout_height= "wrap_content"
Sudah agak enak dilihat bukan dibandingkan dengan yang sebelumnya :'. sekarang kita jajal jalankan Aplikasi tersebut di emulator.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Lebih enak dilihat bukan :'. sekarang aplikasi kita sudah memiliki 6 buah "arna! yaitu biru tua untuk background pertama dan juga biru muda untuk background kedua.
Manipulasi Button.
Sekarang kita akan membahas mengenai manipulasi (utton! jadi kita akan merubah (utton standar yang disediakan oleh Android menjadi button kreasi kita sendiri. ,ntuk memanipulasi (utton! kita membutuhkan dua buah gambar! yaitu gambar sebelum tombol ditekan dan gambar pada saat tombol ditekan! jadi biar ada transisi "arna saat tombol dieksekusi. Misalnya saja saya menggunakan tombol seperti diba"ah ini :
(uka kembali -ile Perhitungan gaji yang telah dibuat lalu copy kedua gambar dengan nama ok7 dan ok6 tersebut kedalam -older dra"able yang sebelumnya telah dibuat. Lalu buat sebuah -ile +ml baru dengan nama tombol2ok.+ml dan copy -ile +ml tersebut kedalam -older dra"able. Contohnya seperti gambar diba"ah ini :
Sekarang kita lakukan proses penulisan coding +ml pada -ile tombol2ok.+ml. (uka -ilenya lalu tuliskan seperti coding diba"ah ini :
/>
Setelah itu! buka kembali -ile main.+ml karena kita akan melakukan perubahan properties yang dimiliki oleh button hitung menjadi seperti diba"ah ini :
<"utton android:id = "#(id/hitun!" android:layout_gravity = "center" android:layout_marginTo& = "1)dp" android:layout_width = "wrap_content" android:layout_height= "wrap_content" android:>ac$ground = "#drawa$le/tom$ol_ok" android:on#lic$ = "hitun!" />
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Sekarang coba kita jalankan programnya melalui emulator. $ombol Perhitungan yang sebelumnya tampilannya standar yang diberikan oleh Android sekarang sudah berhasil kita ubah menjadi gambar! sebelum diklik "arna tombolnya hitam! pada saat diklik akan berubah menjadi merah dan setelah diklik akan kembali menjadi hitam.
Sebelum diklik
Saat diklik
Setelah diklik
8k mungkin sampai disini saja pembahasan kita di bab 9 ini mengenai user inter-ace! selanjutnya pada bab : kita akan membuat sebuah aplikasi/aplikasi Android yang lebih menarik lagi. 8ia! saya yakin rokok dan kopinya sudah abis lagi ya :'. (eli dan bikin lagi ok! hehehehe...
Selanjutnya buka -ile main.+ml lalu isikan coding +ml nya seperti diba"ah 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" android:gravity = "center" > <"utton android:id = "#(id/skfc" android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "4itus +56" /> <"utton android:id = "#(id/pkfc" android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "7esan +56" /> <"utton android:id = "#(id/smcd" android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "4itus %68onald9s" /> <"utton android:id = "#(id/pmcd" android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "7esan %c8onalds" /> </LinearLayout>
Selanjutnya buka -ile myMain.java. Lalu isikan seperti coding diba"ah ini : ?mport semua -ile yang dibutuhkan dalam pengembangan aplikasi ini :
package com%?ast?ood( import import import import import import import android%a&&%)ctivity( android%content%Intent( android%net%@ri( android%os%"undle( android%view%View( android%widget%"utton( android%widget%Toast(
Pemberian method pada masing/masing button dan juga pende-inisian masing/masing variabel.
"utton we>$-c = 0"utton2 -indView"yId 0 %id%skfc2( "utton &hone$-c = 0"utton2 -indView"yId 0 %id%pmcd2( "utton we>mcd = 0"utton2 -indView"yId 0 %id%smcd2( "utton &honemcd = 0"utton2 -indView"yId 0 %id%pmcd2( we>$-c%set/n#lic$Listener0new "utton%/n#lic$Listener02+
32(
&hone$-c%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$ 0View v2+ callintent0v2( 3 32( we>mcd%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$ 0View v2+ callintent0v2( 3 32( &honemcd%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$ 0View v2+ callintent0v2( 3 32(
(uat kelas baru dengan nama callintent dimana kelas ini yang nantinya akan dipanggil oleh setiap button untuk melakukan eksekusinya. .ikelas ini juga terdapat kondisional s"itch case agar method untuk mengatur variabel apa yang dieksekusi.
public void callintent0View view2 + Intent intent = null( switch 0view%getId022 + case %id%pkfc: intent = new Intent0Intent%'6:;*&_6'<<9 @ri%parse04tel:'A=;;422( start)ctivity0intent2( break( case %id%pmcd: intent = new Intent0Intent%'6:;*&_6'<<9 @ri%parse04tel:'A=A<422( start)ctivity0intent2( break( case %id%skfc: intent = new Intent0Intent%'6:;*&_=;>W9 @ri%parse04htt&://$-cgaul%com422( start)ctivity0intent2( break( case %id%smcd: intent = new Intent0Intent%'6:;*&_=;>W9 @ri%parse04htt&://www%mcdelivery;Ahrs%com422( start)ctivity0intent2(
public class my*ain extends )ctivity + /,, #alled when the activity is -irst created% ,/ ./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2( "utton "utton "utton "utton we>$-c = &hone$-c we>mcd = &honemcd 0"utton2 -indView"yId 0 = 0"utton2 -indView"yId 0"utton2 -indView"yId 0 = 0"utton2 -indView"yId %id%skfc2( 0 %id%pmcd2( %id%smcd2( 0 %id%pmcd2(
we>$-c%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$0View v2+ callintent0v2( 3 32( &hone$-c%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$ 0View v2+ callintent0v2( 3 32( we>mcd%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$ 0View v2+ callintent0v2( 3 32( &honemcd%set/n#lic$Listener0new "utton%/n#lic$Listener02+ public void on#lic$ 0View v2+ callintent0v2( 3 32(
Agar aplikasi ini dapat berjalan! Anda harus menambahkan uses/permission pada AndroidMani-est.+ml. (uka -ile AndroidMani-est.+ml yang terdapat di dalam project 1ast 1ood ini.
Anda tidak harus merubah keseluruhan coding +ml yang terdapat pada AndroidMani-est tersebut! cukup dengan menambahkan perintah +ml seperti diba"ah ini :
<usesD&ermission android:name="android.permission.6'<<_7?;=;<>.>8"></usesD &ermission> <usesD&ermission android:name="android.permission.6'<<_7H*&>"></usesD&ermission> <usesD&ermission android:name="android.permission.;&:>?&>:"></usesD&ermission>
,ntuk lebih jelasnya kita lihat perintah +ml di AndroidMani-est.+ml berikut ini :
<?xml version="1.0" encoding="utf-8"?> <mani-est xmlns:android="http://schemas.android.com/apk/res/android" &ac$age="com.5ast5ood" android:version#ode="1" android:version5ame="1.0"> <usesDsd$ android:min1d$Version="8" /> <a&&lication android:icon="#drawa$le/icon" android:la>el="#strin!/app_name"> <activity android:name=".m"%ain" android:la>el="#strin!/app_name"> <intentD-ilter> <action android:name="android.intent.action.%';&" /> <category android:name="android.intent.cate!or".<'@&6H>?" /> </intentD-ilter> </activity> <usesD&ermission android:name="android.permission.6'<<_7?;=;<>.>8"></usesD &ermission> <usesD&ermission android:name="android.permission.6'<<_7H*&>"></usesD&ermission> <usesD&ermission android:name="android.permission.;&:>?&>:"></usesD&ermission> </a&&lication> </mani-est>
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Sekarang coba kita jalankan aplikasi tersebut melalui emulator
3ita coba untuk melihat situs Mc .onald@s! langsung diklik saja tombolnya. Maka outputnya akan menjadi seperti berikut :
Firdan Ardiansyah | Pengenalan Dasar Android Programming. 8k aplikasinya berjalan dengan lancar! jadi sekarang kalo laper tinggal lihat "eb untuk mencari menu dari 31C atau Mc. terus tinggal di telepon :'.
Selanjutnya buat sebuah -ile +ml baru! dengan cara klik kanan -older layout/#e"/8ther! lalu akan keluar sebuah jendela baru pilih -older Android lalu pilih Android 0ML 1ile. (eri nama -ile +ml baru tersebut dengan nama Segitiga dan untuk type resourcenya pilih Layout. (uka -ile Segitiga.+ml yang sudah dibuat tersebut lalu isikan coding +ml seperti diba"ah ini :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "%asukan 'las" /> <!ditText android:id = "#(id/alas4e!iti!a" android:layout_width = "fill_parent" android:layout_height= "wrap_content" /> <TextView android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "%asukan :in!!i" />
(uat lagi sebuah -ile +ml baru dengan nama persegipanjang! lalu isikan coding +ml seperti diba"ah ini :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width = "fill_parent" android:layout_height= "wrap_content" android:text = "%asukan 7an-an!" /> <!ditText android:id = "#(id/pan-an!7erse!i" android:layout_width = "fill_parent" android:layout_height= "wrap_content" /> <TextView android:layout_width = "fill_parent" android:layout_height= "wrap_content"
Anda telah selesai membuat tiga buah layout +ml yang dibutuhkan untuk membuat aplikasi penghitung bangun datar! sekarang coba kita lihat output masing/masing layout tersebut diba"ah ini :
Menu ,tama
Menu Segitiga
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Sekarang kita bermain dengan javanya! buka -ile myMain.java lalu isikan coding java seperti berikut ini : Pertama import semua -ile yang dibutuhkan untuk membuat aplikasi penghitung bangun datar ini :
package com%>angundatar( import import import import import android%a&&%)ctivity( android%content%Intent( android%os%"undle( android%view%View( android%widget%"utton(
Selanjutnya buat sebuah public class yang meng/e+tends Activity dan juga sebuah class onCreate seperti diba"ah ini :
public class my*ain extends )ctivity + "utton &ersegi9 segitiga( /,, #alled when the activity is -irst created% ,/ ./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2(
Lalu pende-inisian variabel kepada masing/masing "idget yang ada pada layout main.+ml juga memberikan perintah ?ntent pada masing/masing "idget button! sehingga button/button tersebut dapat digunakan untuk memanggil -orm/-orm yang dibutuhkan.
&ersegi = 0"utton2 -indView"yId 0 %id%$tn7erse!i2( &ersegi%set/n#lic$Listener0new View%/n#lic$Listener02 + ./verride public void on#lic$0View arg=2 + // TODO )utoDgenerated method stu> start)ctivity 0new Intent04com%>angundatar%&ersegi422( 3
32(
32(
public class my*ain extends )ctivity + "utton &ersegi9 segitiga( /,, #alled when the activity is -irst created% ,/ ./verride public void on#reate0"undle savedInstance1tate2 + super%on#reate0savedInstance1tate2( set#ontentView0 %layout%main2( &ersegi = 0"utton2 -indView"yId 0 %id%$tn7erse!i2( &ersegi%set/n#lic$Listener0new View%/n#lic$Listener02 + ./verride public void on#lic$0View arg=2 + // TODO )utoDgenerated method stu> start)ctivity 0new Intent04com%>angundatar%&ersegi422( 3
32(
segitiga = 0"utton2 -indView"yId 0 %id%$tn4e!iti!a2( segitiga%set/n#lic$Listener0new View%/n#lic$Listener02 + ./verride public void on#lic$0View v2 + // TODO )utoDgenerated method stu> start)ctivity 0new Intent04com%>angundatar%segitiga422( 3
32( 3 3
Firdan Ardiansyah | Pengenalan Dasar Android Programming. Selanjutnya buat sebuah class baru dengan cara! klik kanan -older project (angun .atar lalu pilih ne"/class. Akan keluar sebuah jendela baru lalu berinama class baru tersebut dengan nama PersegiPanjang. (uka class PersegiPanjang tersebut lalu isikan dengan coding java seperti diba"ah ini : ?mport semua -ile yang dibutuhkan :
package com%>angundatar( import import import import import import android%a&&%)ctivity( android%os%"undle( android%view%View( android%widget%"utton( android%widget%!ditText( android%widget%TextView(
(uat sebuah public class dengan nama PersegiPanjang yang meng/e+tends Activity juga berikan nama pada masing/masing variabel "idgetB
public class EersegiEan:ang extends )ctivity+ !ditText &an:ang9 le>ar( TextView luas( "utton hitung(
(uat sebuah class baru dengan nama onCreate lalu de-inisikan masing/ masing variabel "idget yang akan digunakan :
./verride protected void on#reate0"undle savedInstance1tate2 + // TODO )utoDgenerated method stu> super%on#reate0savedInstance1tate2( set#ontentView0 %layout%perse!ipan-an!2( &an:ang = 0!ditText2 -indView"yId 0 %id%pan-an!7erse!i2( le>ar = 0!ditText2 -indView"yId 0 %id%le$ar7erse!i2( luas = 0TextView2 -indView"yId 0 %id%luas7erse!i7an-an!2( hitung = 0"utton2 -indView"yId 0 %id%hitun!<uas7erse!i2( 3
Firdan Ardiansyah | Pengenalan Dasar Android Programming. (uat sebuah class baru dengan nama hitung dimana class inilah yang akan melakukan proses perhitungan luas persegi panjang:
public void hitung0View v2+ int & = Integer%parse;nt0&an:ang%getText02%to1tring022( int l = Integer%parse;nt0le>ar%getText02%to1tring022( int luasEE = &,l( 3 luas%setText01tring%value*f0luasEE22(
public class EersegiEan:ang extends )ctivity+ !ditText &an:ang9 le>ar( TextView luas( "utton hitung( ./verride protected void on#reate0"undle savedInstance1tate2 + // TODO )utoDgenerated method stu> super%on#reate0savedInstance1tate2( set#ontentView0 %layout%perse!ipan-an!2( &an:ang = 0!ditText2 -indView"yId 0 %id%pan-an!7erse!i2( le>ar = 0!ditText2 -indView"yId 0 %id%le$ar7erse!i2( luas = 0TextView2 -indView"yId 0 %id%luas7erse!i7an-an!2( hitung = 0"utton2 -indView"yId 0 %id%hitun!<uas7erse!i2( 3 public void hitung0View v2+ int & = Integer%parse;nt0&an:ang%getText02%to1tring022( int l = Integer%parse;nt0le>ar%getText02%to1tring022( int luasEE = &,l( luas%setText01tring%value*f0luasEE22( 3 3
Firdan Ardiansyah | Pengenalan Dasar Android Programming. (uat sebuah -ile class baru! lalu beri nama Segitiga! lalu buka -ile Segitiga.java tersebut dan isikan dengan coding seperti diba"ah ini :
package com%>angundatar( import import import import import import android%a&&%)ctivity( android%os%"undle( android%view%View( android%widget%"utton( android%widget%!ditText( android%widget%TextView(
(uat sebuah public class baru dengan nama Segitiga yang meng/e+tends Activity dan juga berikan nama pada masing/masing variabel "idget seperti berikut :
public class 1egitiga extends )ctivity+ !ditText alas1egitiga9 tinggi1egitiga( TextView luas1egitiga( "utton hitung(
(uat sebuah class baru dengan nama onCreate! dimana pada class ini kita juga mende-inisikan variabel dari masing/masing "idget yang dibutuhkan :
./verride protected void on#reate0"undle savedInstance1tate2 + // TODO )utoDgenerated method stu> super%on#reate0savedInstance1tate2( set#ontentView 0 %layout%se!iti!a2( alas1egitiga = 0!ditText2 -indView"yId 0 %id%alas4e!iti!a2( tinggi1egitiga = 0!ditText2 -indView"yId 0 %id%tin!!i4e!iti!a2( hitung = 0"utton2 -indView"yId 0 %id%hitun!<uas4e!iti!a2( luas1egitiga = 0TextView2 -indView"yId 0 %id%luas4e!iti!a2( 3
Firdan Ardiansyah | Pengenalan Dasar Android Programming. (uat juga sebuah class dengan nama hitungSegitiga! dimana class ini yang akan melalukan perhitungan untuk mengetahui luas segitiga :
public void hitung1egitiga0View v2+ int alas = Integer%parse;nt0alas1egitiga%getText02%to1tring022( int tinggi = Integer%parse;nt0tinggi1egitiga%getText02%to1tring022( int luas = alas,tinggi( luas1egitiga%setText01tring%value*f0luas22( 3
public class 1egitiga extends )ctivity+ !ditText alas1egitiga9 tinggi1egitiga( TextView luas1egitiga( "utton hitung( ./verride protected void on#reate0"undle savedInstance1tate2 + // TODO )utoDgenerated method stu> super%on#reate0savedInstance1tate2( set#ontentView 0 %layout%se!iti!a2( alas1egitiga = 0!ditText2 -indView"yId 0 %id%alas4e!iti!a2( tinggi1egitiga = 0!ditText2 -indView"yId 0 %id%tin!!i4e!iti!a2( hitung = 0"utton2 -indView"yId 0 %id%hitun!<uas4e!iti!a2( luas1egitiga = 0TextView2 -indView"yId 0 %id%luas4e!iti!a2( 3 public void hitung1egitiga0View v2+ int alas = Integer%parse;nt0alas1egitiga%getText02%to1tring022( int tinggi = Integer%parse;nt0tinggi1egitiga%getText02%to1tring022( int luas = alas,tinggi( luas1egitiga%setText01tring%value*f0luas22( 3 3
Firdan Ardiansyah | Pengenalan Dasar Android Programming. $erakhir buka -ile AndroidMani-est.+ml! lalu tambahkan perintah seperti berikut ini agar "idget (utton yang ada pada menu utama dapat digunakan untuk memanggil -orm4layout yang sesuai :
<activity android:name=".7erse!i7an-an!" android:la>el="#strin!/app_name"> <intentD-ilter> <action android:name="com.$an!undatar.perse!i" /> <category android:name="android.intent.cate!or".8>5'@<:" /> </intentD-ilter> </activity> <activity android:name=".4e!iti!a" android:la>el="#strin!/app_name"> <intentD-ilter> <action android:name="com.$an!undatar.se!iti!a" /> <category android:name="android.intent.cate!or".8>5'@<:" /> </intentD-ilter> </activity>
Sekarang semuanya sudah selesai! tinggak coba Anda jalankan aplikasi penghitung luas bangun datar tersebut melalui emulator! hasilnya seperti gambar diba"ah ini : 8utput Menu ,tama :
.i menu utama ini terdapat dua buah tombol yang digunakan untuk memilih menu! menu pertama adalah untuk melakukan perhitungan luas persegi panjang dan menu kedua adalah menu untuk melakukan perhitungan luas segitiga.
Firdan Ardiansyah | Pengenalan Dasar Android Programming. 8utput -orm Persegi Panjang :
Pada menu Persegi panjang! Anda dapat memasukan nilai panjang dan lebar dari Persegi panjang yang anda ingin ketahui nilainya! selanjutnya setelah menekan tombol hitung! aplikasi ini akan melakukan perkalian nilai panjang dan lebar dan menampilkan hasil perhitungannya.
Sama seperti pada menu persegi panjang! menu menghitung luas segitiga ini juga akan melakukan perkalian nilai alas dan tinggi yang diinputkan oleh Anda! lalu setelah menekan tombol hitung akan keluar hasil perkaliannya.
Tentang Penulis
Penulis bernama 1irdan Ardiansyah! lahir di Aakarta pada tanggal CD mei 7EEC. Penulis memulai pendidikannya di S. MC$ 0& *angkasbitung lalu melanjutnya sekolahnya ke SMP #egeri 7 *angkasbitung dan melanjutkan pendidikan SMA di SM3 #egeri 7 *angkasbitung jurusan $ekhnik 3omputer dan Aaringan. Saat menulis buku ini! penulis masih terda-tar sebagai mahasis"a semester akhir di ,niversitas Gunadarma jurusan Sistem ?n-ormasi. Penulis juga akti- mengikuti -orum/-orum yang membahas Aava dan Android Programming. Penulis dapat dihubungi di : bimbim2rocknrollFyahoo.com virdane.ardiansyahFgmail.com