Anda di halaman 1dari 35

MEMBUAT APLIKASI ANDROID

Disusun oleh : Andry <andrymail@gmail.com>

Membuat Aplikasi Android Andry<andrymail@gmail.com>

1. INSTALASI TOOLS PENGEMBANGAN APLIKASI ANDROID


Sebelum memulai membuat aplikasi Android, pertama-tama kita harus melakukan instalasi tools yang diperlukan. Langkah-langkah instalasi tools untuk pengembangan aplikasi Android adalah sebagai berikut : 1. Siapkan komputer yang akan digunakan untuk mengembangkan aplikasi Android. Tools untuk pengembangan Android dapat berjalan di platform Windows, Linux, dan MacOS X. Adapun kebutuhan sistem untuk menjalankan tools ini adalah : a. Sistem operasi : Windows XP (32-bit), Vista (32- or 64-bit), or Windows 7 (32- or 64-bit) Mac OS X 10.5.8 atau yang lebih baru (Hanya di platform x86, dan bukan di PowerPC) Linux yang mendukung aplikasi 32 bit (sudah dicoba di Linux Ubuntu Hardy Heron) b. Software : JDK 5 atau JDK 6 (bukan hanya JRE) Eclipse 3.4 (Ganymede) atau yang lebih baru, paket yang disarankan adalah : Eclipse IDE for Java EE Developers Eclipse IDE for Java Developers Eclipse for RCP/Plug-in Developers Eclipse Classic (versions 3.5.1 atau yang lebih baru) Eclipse JDT (http://www.eclipse.org/jdt) plugin (umumnya sudah ada di paket-paket Eclipse IDE) Minimal tersedia 500 MB free space storage

c. 2.

Install SDK Starter Package (android-sdk_r10-windows.zip atau installer_r10-windows.exe). Untuk yang versi .zip caranya dengan meng-extract file tersebut ke salah satu folder di komputer, misal kita extract ke folder C:\Program Files\. Sedangkan yang versi .exe proses instalasi cukup dengan menjalankan file tersebut. Untuk mendapatkan versi terbaru dari Starter Package ini, bisa diunduh di http://developer.android.com/intl/fr/sdk/index.html . Install ADT plugin for Eclipse Untuk melakukan instalasi plugin ini secara online lakukan langkah-langkah berikut : Jalankan Eclipse 3.5/3.6 kemudian pilih menu Help > Install New Software (untuk Eclipse 3.4 gunakan menu Help > Software Updates) Pada bagian Available Software pilih tombol Add (atau Add Site untuk Eclipse 3.4) Pilih tombol Archive dan browse file ADT-10.0.0.zip Kembali ke jendela Available Software akan terlihat item Developer Tools. Centang checkbox yang ada di bagian tersebut kemudian pilih Next (atau Install untuk Eclipse 3.4) Lanjutkan dengan mengklik tombol Next pada jendela-jendela yang ada berikutnya dan diakhiri dengan tombol Finish Restart Eclipse Pilih menu Window > Preferences pada Eclipse, kemudian pilih Android pada tree di panel sebelah kiri Isikan SDK Location dengan menekan tombol Browse kemudian pilih direktori tempat kita mengextract SDK Starter Package pada langkah 2 di atas Tambahkan platform Android dan komponen SDK lainnya

3.

4.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Gunakan aplikasi Android SDK and AVD Manager yang disertakan dalam SDK Starter Package untuk menambahkan satu atau lebih platform Android (contohnya Android 1.6 atau Android 2.3) serta komponenkomponen lain ke dalam SDK. Untuk menjalankan Android SDK and AVD Manager di Windows, jalankan SDK Setup.exe yang ada di root direktori SDK Starter Package. Aplikasi ini juga bisa dijalankan dari Eclipse dengan menekan tombol yang ada di bawah baris menu atau melalui menu Window > Android SDK and AVD Manager. Kemudian check item yang ingin diinstall dan tekan tombol Install Selected. Dari situ akan muncul jendela untuk memulai instalasi, silakan pilih radio button Accept All yang ada di bagian kanan bawah lalu tekan tombol Install. Untuk mengawalinya kita harus menginstall Android SDK Platform-tools dan salah satu SDK Platform Android, silakan pilih versi platform Android yang dibutuhkan untuk pengembangan. Sedangkan untuk package yang lain silakan dipilih sesuai dengan kebutuhan pengembangan aplikasi, seperti USB Driver Package, Google APIs by Google Inc, dan Documentation for Android SDK.

5. Membuat Android Virtual Device (AVD) Untuk dapat menjalankan emulator dari platform yang sudah kita install, kita harus membuat sebuah AVD terlebih dahulu. AVD berisi image sistem operasi dan setting device yang akan digunakan oleh emulator. Cara membuat AVD adalah sebagai berikut : Jalankan Android SDK and AVD Manager seperti yang ada di langkah nomor 4 Pilih Virtual Devices yang ada di panel sebelah kiri, lalu tekan tombol New Isikan Name sesuai pilihan (tidak boleh menggunakan spasi, huruf yang diperbolehkan hanya a-zA-Z.-_ ), kemudian pilih drop down Target untuk memilih versi sistem operasi platform yang diinginkan

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Bagian SDCard bisa dikosongkan bisa juga diisi nilai tertentu sehingga pada emulator yang akan tersedia storage external Bagian Skin kita bisa menentukan resolusi layar dari emulator Setelah selesai tekan tombol Create AVD

6. Coba jalankan emulator yang baru dibuat dengan menekan tombol Start

Membuat Aplikasi Android Andry<andrymail@gmail.com>

2. HELLO WORLD
Setelah selesai melakukan instalasi tools yang diperlukan untuk mengembangkan aplikasi Android, sekarang kita bisa memulai membuat aplikasi Android. Seperti kebiasaan belajar suatu bahasa pemrograman pada umumnya, kita mulai dengan membuat aplikasi Hello World. Semua pengerjaan pembuatan aplikasi ini akan kita lakukan dengan menggunakan Eclipse. Berikut langkah-langkah pembuatannya : 1. 2. 3. Dari Eclipse pilih menu File > New > Android Project yang akan memunculkan jendela dialog New Android Project Isikan Project name dengan HelloAndroid Pilih salah satu platform di Build Target sesuai yang telah diinstall dan target versi sistem operasi Android di mana aplikasi akan dijalankan. Nilai field ini juga akan menentukan library Android mana yang akan dipakai untuk kompilasi Pada bagian Properties isikan nilai berikut : Application name, adalah nama aplikasi yang terlihat oleh pengguna dan akan muncul di daftar aplikasi Package name, nama package seperti pada pemrograman menggunakan bahasa Java yang lainnya. Nama package ini harus dibuat unik untuk semua package yang terinstall dalam sistem Android, tidak boleh ada dua aplikasi berbeda yang menggunakan package yang sama karena akan menyebabkan satu aplikasi menimpa aplikasi yang lain. Disarankan untuk menggunakan standard domain-style package untuk aplikasi yang kita buat. Contohnya : com.example.android.hello Create activity, adalah nama kelas yang akan dibuat oleh plugin. Kelas ini akan merupakan subclass dari kelas Activity dari Android. Secara sederhana, sebuah Activity adalah kelas yang bisa menampilkan User Interface dari aplikasi. Jika field ini diisi, maka kelas tersebut akan menjadi kelas yang pertama kali dipanggil saat aplikasi dijalankan. Min SDK Version, adalah level API (platform Android) yang diperlukan oleh aplikasi agar dapat dijalankan. Isian ini nilainya adalah sebuah angka dengan aturan berikut. Versi Platform Android 3.0 Android 2.3.3 Android 2.3 Android 2.2 Android 2.1 Android 2.0.1 Android 2.0 Android 1.6 Android 1.5 Android 1.1 Android 1.0 Level API 11 10 9 8 7 6 5 4 3 2 1

4.

Contoh hasil pengisian data tersebut bisa dilihat pada gambar di bawah ini. Selesai mengisikan data yang diperlukan, tekan tombol Finish.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

5. Jika kita lihat dalam tree project HelloAndroid akan ada sejumlah file dan direktori. Lihat ke dalam folder src akan terdapat file HelloActivity.java yang isinya seperti berikut :
package com.tester.android; import android.app.Activity; import android.os.Bundle; public class HelloActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

6. Selanjutnya kita lakukan modifikasi pada kode di atas menjadi seperti di bawah ini. Perhatikan bagian yang dicetak tebal adalah perubahan yang dilakukan.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

package com.tester.android; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class HelloActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // setContentView(R.layout.main); TextView tv = new TextView(this); tv.setText("Hello World"); setContentView(tv); } }

7. Coba jalankan aplikasi yang baru dibuat dengan klik kanan nama project HelloWorld yang ada di panel Package Explorer di panel sebelah kiri, kemudian pilih menu Run As > Android Application. 8. Tunggu sampai proses start up emulator selesai, jika sudah muncul tampilan Android Lock Screen, buka key lock dan akan terlihat tampilan seperti gambar di bawah ini.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Pada contoh Hello World di atas kita menggunakan kode untuk menaruh teks pada layar, yang berdasarkan pada pengalaman apabila aplikasi bertambah kompleks, maka kode juga akan semakin rumit karena bagian tampilan dan pemrosesnya menjadi satu. Masalah lain yang dapat timbul adalah apabila ada perubahan pada tampilan. Untuk menghindarkan masalah tersebut, maka Android menyediakan cara lain yaitu dengan menggunakan file layout XML. Contoh file layout tersebut untuk membuat Hello World adalah seperti berikut.
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id+/textview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/hello"/>

File tersebut ditaruh di folder res\layout\ dalam project Android. Berikut ini akan dijelaskan langkah-langkah untuk mengubah kode Hello World di atas sehingga menggunakan model XML Layout. 1. Pada Eclipse Package Explorer, lihat isi folder res\layout\ dan buka file main.xml (begitu terbuka coba klik tab main.xml di bagian bawah jendela kode untuk melihat isi kode XML). Ganti isinya dengan XML berikut ini lalu simpan.

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id+/textview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/hello"/>

2.

Dalam folder res\values buka file strings.xml. Ganti isi file tersebut menjadi seperti berikut

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello Android</string> <string name="app_name">Hello Android</string> </resources>

3.

Sekarang buka dan ganti isi kelas HelloAndroid di folder src\ agar menggunakan file XML Layout menjadi seperti berikut

package com.example.helloandroid; import android.app.Activity; import android.os.Bundle; public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

4.

Coba jalankan kembali hasil kode di atas agar muncul di emulator

Membuat Aplikasi Android Andry<andrymail@gmail.com>

3. BUILD APLIKASI ANDROID


Setelah aplikasi kita menyelesaikan pembuatan kode untuk aplikasi yang kita buat, langkah selanjutnya yang diperlukan agar installer aplikasi tersebut bisa didownload dan diinstall di perangkat Android adalah melakukan proses Build. Adapun cara melakukan Build adalah sebagai berikut : 1. 2. Klik-kanan nama project yang akan di Build, misalkan HelloWorld yang ada di panel Package Explorer di sebelah kiri, kemudian pilih Android Tools > Export Signed Application Package Selanjutnya akan muncul jendela Export Android Application. Pastikan isian field Project adalah nama project yang akan di Build kemudian tekan tombol Next

3. 4. 5.

Pilih radio button Create new keystore lalu tekan tombol Browse Browse ke direktori workspace dari Eclipse lalu masuk ke folder project yang akan di Build, kemudian isikan File name dengan keystore.key lalu akhiri dengan menekan tombol Save Kembali ke jendela Export Android Application isikan Password dan Confirm dengan password pilihan kita, isi keduanya harus sama, selesai tekan tombol Next

Membuat Aplikasi Android Andry<andrymail@gmail.com>

6. 7.

Selanjutnya akan muncul jendela Key Creation. Isikan Alias, Password, dan Confirm dengan nilai yang kita inginkan, untuk Validity isikan angka minimal 30 Selanjutnya untuk isian lainnya yang ada di bawahnya diperlukan ada salah satu field yang terisi. Nilainya sesuai data diri pembuat aplikasi. Selesai tekan tombol Next

8.

Terakhir akan muncul jendela Destination and key/certificate checks. Di sini kita akan menentukan di mana file APK hasil Build project kita akan ditaruh. Tekan Browse dan pilih direktori yang diinginkan dan diakhiri dengan menekan tombol Save. 9. Kembali ke jendela sebelumnya kita tekan Finish untuk memulai pembuatan file APK dari project kita. 10. Selesai, kita bisa mencoba menginstall APK hasil build tadi ke perangkat Android yang kita miliki atau untuk di-upload ke Android Market

Membuat Aplikasi Android Andry<andrymail@gmail.com>

4. STRUKTUR PROJECT APLIKASI ANDROID

Gambar di atas menunjukkan contoh sebuah struktur project aplikasi Android. Pada struktur tersebut kita temui ada folder-folder dan file berikut : src gen assets : Folder yang berisi source code aplikasi Android. : Isi folder ini otomatis di-generate oleh ADT, yang berisi ID untuk mengakses resources aplikasi yang ada di folder res. Sebaiknya isi folder ini tidak diubah secara manual. : Kita dapat menaruh file apapun di sini. Berbeda dengan isi folder res, file yang ada di folder assets tidak akan dibuatkan ID untuk mengaksesnya dan akan dimasukkan dalam file APK hasil build tanpa dimodifikasi/dikompilasi. Untuk mengakses file yang disimpan di sini digunakan kelas AssetManager dan diacu menggunakan nama filenya. : Di folder ini kita menaruh resource aplikasi yang berupa gambar, string, layout tampilan, dan sebagainya. File resource yang ditaruh di sini akan dikompilasi oleh ADT kemudian dibuatkan sebuah ID yang unik untuk mengaksesnya. Kita akan bahas lebih lanjut mengenai resource aplikasi pada bagian selanjutnya.

res

AndroidManifest.xml : Berisi informasi mengenai aplikasi, isinya antara lain Nama package Java dari aplikasi tersebut Daftar komponen dari aplikasi Permission yang diperlukan oleh aplikasi untuk mengakses protected API dan berkomunikasi dengan aplikasi lain Permission untuk aplikasi lain yang diperlukan untuk berinteraksi dengan aplikasi ini Minimum level Android API yang diperlukan aplikasi Daftar libraries yang diperlukan

5. RESOURCE APLIKASI
Objek konstanta string dan gambar yang digunakan oleh aplikasi sebaiknya dipisahkan dengan bagian source code. Tujuannya adalah untuk memudahkan pengelolaan dan apabila diperlukan perubahan isinya cukup mengganti di satu bagian saja. Selain itu menggunakan resource, aplikasi bisa secara otomatis memilih resource mana yang harus digunakan berdasarkan konfigurasi perangkat saat aplikasi dijalankan. Untuk resource yang sifatnya bukan

Membuat Aplikasi Android Andry<andrymail@gmail.com>

file biner, biasa resource disimpan dalam struktur file XML. Di dalam folder res, file resource dipisahkan berdasarkan jenisnya. Adapun struktur direktori di dalam folder res adalah sebagai berikut : Nama Direktori anim/ color/ drawable/ Jenis Resource Berisi file XML untuk animasi (alpha, translate, rotate, dll) Berisi file XML untuk resource warna File bitmap (PNG, JPG, GIF) atau file XML yang dikompilasi menjadi subtipe resource drawable berikut : File bitmap Nine-Patches (resizable bitmap) State lists Shapes Animation drawables, etc Berisi file XML yang mendefinisikan UI layout Berisi file XML yang mendefinisikan item menu aplikasi (Options Menu, Context Menu atau Sub Menu) File tipe lain yang disimpan secara mentah. Untuk membaca isi file ini digunakan InputStream. Kita menaruh file di sini apabila kita tidak memerlukan nama file asli dan struktur direktorinya. Jika kita membutuhkan salah satu dari kedua hal tersebut, kita taruh file tersebut di folder assets/ Berisi file XML untuk nilai string, integer, dan warna. Ada sebuah konvensi penamaan file di direktori values berdasarkan tipenya, kita gunakan nama-nama berikut : arrays.xml untuk resource arrays colors.xml untuk color values dimens.xml untuk dimension values strings.xml untuk string values styles.xml untuk styles File xml lain, seperti file konfigurasi XML

layout/ menu/ raw/

values/

xml/

Untuk mengakses resource di folder res, kita menggunakan kelas R yang dibuat secara otomatis oleh Android Asset Packaging Tool (aapt) dari ADT Android setiap kali kita mengubah isi folder res. Ada dua cara untuk mengakses sebuah resource : Dari kode : menggunakan bilangan integer static dari sub-class kelas R, misalnya : R.string.app_name
string adalah jenis resourcenya, dan app_name adalah nama resource yang diacu

Struktur sintaks untuk mengakses resource dari kode adalah sebagai berikut : [<package_name>.]R.<resource_type>.<resource_name> <package_name> merupakan nama package tempat resource berada (elemen ini tidak diperlukan apabila kita
mengakses resource di package yang sama dengan package aplikasimu).

<resource_type> merupakan sub class R untuk resource type. <resource_name> bisa merupakan nama file resource tanpa ekstensi file atau nilai atribut android:name di elemen XML-mu (untuk string, warna, dan sebagainya)

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Dari XML : menggunakan sintaks XML khusus misalkan : @string/app_name


string adalah jenis resourcenya, dan app_name adalah nama resource yang diacu

Struktur sintaks untuk mengakses resource dari XML adalah sebagai berikut : @[<package_name>:]<resource_type>/<resource_name> <package_name> merupakan nama package tempat resource berada (elemen ini tidak diperlukan apabila kita
mengakses resource di package yang sama dengan package aplikasimu).

<resource_type> merupakan sub class R untuk resource type. <resource_name> bisa merupakan nama file resource tanpa ekstensi file atau nilai atribut android:name di elemen XML-mu (untuk string, warna, dan sebagainya)

Jika kita perhatikan pada gambar struktur project aplikasi Android di atas, kita lihat bahwa folder resource drawable, terdapat folder drawable-hdpi, drawable-ldpi, dan drawable-mdpi. Hal tersebut gunanya adalah untuk mendukung berbagai macam konfigurasi perangkat yang berbeda. Jadi apabila aplikasi Android digunakan di perangkat yang resolusinya adalah High DPI, maka resource drawable di folder drawable-hdpi yang akan digunakan oleh aplikasi, dan seterusnya untuk resolusi Low DPI dan Medium DPI. Sistem Operasi Android akan secara otomatis memilih resource yang tepat untuk menjalankan aplikasi tanpa perlu kita atur secara manual dari dalam aplikasi. Adapun format nama direktori untuk resource alternatif ini adalah sebagai berikut : <resources_name>-<config_qualifier>. di mana <resources_name> nama default folder resource seperti yang sudah dijelaskan sebelumnya, dan <config_qualifier> adalah nama yang menspesifikasikan konfigurasi yang akan menggunakan resource di dalamnya. Ada banyak config_qualifier untuk konfigurasi yang bisa digunakan dalam Android, antara lain kepadatan resolusi layar (ldip, mdpi, hdpi), bahasa dan regional (en, fr, es, id, in), ukuran layar (small, normal, large, xlarge), orientasi layar (port dan land), dan sebagainya. Dalam satu folder, kita bisa menspesifikasikan lebih dari satu config_qualifier dalam satu folder resource untuk konfigurasi perangkat yang lebih spesifik, misalkan drawable-port-hdpi/.

6. KOMPONEN APLIKASI
Ada 4 macam komponen aplikasi yang merupakan titik masuk di mana aplikasi Android bisa berjalan. Keempat komponen tersebut memiliki fungsi dan daur hidup yang berbeda yang menentukan bagaimana masing-masing komponen dibuat dan dihancurkan. Keempat tipe komponen aplikasi tersebut adalah : 1. Activity Activity adalah komponen aplikasi yang menyediakan layar/jendela di mana pengguna bisa berinteraksi untuk menjalankan fungsi tertentu. 2. Service Service adalah komponen aplikasi yang berjalan background untuk menjalankan proses yang memakan waktu cukup lama. Service tidak memiliki tampilan. 3. Content Provider Content Provider mengelola sekumpulan data yang sifatnya shared. Datanya sendiri dapat disimpan di file system, database SQLite, di penyimpanan online atau lokasi penyimpanan persisten lainnya. Dengan

Membuat Aplikasi Android Andry<andrymail@gmail.com>

4.

adanya Content Provider ini, aplikasi lain dapat mengakses data yang diperlukan tanpa perlu mengetahui bagaimana data tersebut disimpan. Sistem operasi Android sendiri secara default menyediakan sejumlah content provider yang datanya dapat diakses oleh aplikasi lain, misalkan content provider log panggilan telepon, data kontak, SMS, dan sebagainya. Untuk mengakses suatu content provider digunakan string URI sesuai dengan yang dispesifikasikan oleh Content Provider penyedia data. Broadcast Receiver Broadcast Receiver adalah komponen aplikasi yang menanggapi system-wide broadcast announcements. Contoh broadcast yang dikirimkan oleh sistem operasi Android misalkan notifikasi ada aplikasi baru terinstall/terupdate, layar mati, booting sistem operasi selesai, ada SMS atau telepon masuk, dan sebagainya. Broadcast Receiver juga tidak memiliki tampilan, tapi dia dapat menjalankan suatu Activity atau menampilkan notifikasi di Notification Bar.

Kita akan bahas lebih lanjut mengenai Activity karena ini merupakan komponen aplikasi yang paling umum dan yang memiliki tampilan di mana pengguna bisa berinteraksi dengan aplikasi kita.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Gambar di atas merupakan skema lifecycle dari sebuah Activity. Apabila sebuah Activity dipanggil, maka kode yang berada di dalam method onCreate akan dieksekusi. Di sini biasa kita menaruh kode untuk menginisialisasi tampilan dan variabel lain yang diperlukan oleh activity tersebut. Selanjutnya ada satu method lain yang cukup penting untuk diimplementasikan, yaitu onPause, yang akan dipanggil apabila ada Activity lain yang dijalankan menggantikan Activity tersebut. Di sini kita harus menyimpan data-data persistent yang mungkin diperlukan saat Activity tersebut dijalankan lagi, misalkan untuk aplikasi email kita perlu menyimpan data email yang sedang diketikkan sebagai Draft email. Activity yang di-pause ini tidak langsung di-destroy, karena ada kemungkinan pengguna akan kembali lagi ke Activity ini misalkan dengan menekan tombol BACK dari Activity yang baru dijalankan atau karena event lain. Namun jika pengguna tidak pernah kembali lagi ke Activity tersebut, sistem operasi Android bisa sewaktu-waktu men-destroy Activity tersebut misal apabila ada aplikasi lain yang membutuhkan memori tambahan atau membutuhkan resource lain untuk digunakan. Karena itulah, kita perlu menyimpan data-data yang diperlukan saat method onPause ini dipanggil. Secara lengkap apabila kita akan mengimplementasikan kode untuk setiap perubahan state Activity maka struktur kerangka kode untuk Activity tersebut adalah seperti di bawah ini. public class ExampleActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // The activity is being created. } @Override protected void onStart() { super.onStart(); // The activity is about to become visible. } @Override protected void onResume() { super.onResume(); // The activity has become visible (it is now "resumed"). } @Override protected void onPause() { super.onPause(); // Another activity is taking focus (this activity is about to be "paused"). } @Override protected void onStop() { super.onStop(); // The activity is no longer visible (it is now "stopped") } @Override protected void onDestroy() { super.onDestroy(); // The activity is about to be destroyed. } }

Membuat Aplikasi Android Andry<andrymail@gmail.com>

7. MEMBUAT KOMPONEN TAMPILAN APLIKASI ANDROID


Sekarang kita akan mempelajari bagaimana membuat tampilan untuk aplikasi Android kita. Untuk membuat tampilan kita bisa membuatnya dengan menggunakan kode di file Java yang kita buat, atau menggunakan file XML layout. Sangat disarankan untuk menggunakan metode file XML layout agar kode Java kita lebih bersih dan rapi, serta kita memisahkan antara bagian tampilan dengan bagian pemrosesan dari aplikasi. File XML layout ini disimpan di folder res/layout/ pada project Android kita. Untuk membuat dan memodifikasi resource XML layout, pada ADT terdapat tool bernama Visual Layout Editor yang memudahkan kita melihat dan membuat tampilan secara WYSIWYG (What You See Is What You Get) tanpa secara manual mengetikkan dokumen XML. Gambar di bawah ini adalah tampilan Visual Layout Editor di Eclipse yang akan muncul saat kita membuka file XML layout.

Dengan menggunakan tools ini kita bisa menggunakan mekanisme Drag-and-Drop untuk menambahkan komponen tampilan yang kita butuhkan.

A. K OM P ON EN T AMP IL AN D AN L AYOUT
Kita akan mempelajari penggunaan berbagai macam komponen tampilan dan layout dengan membuat sebuah project aplikasi Android. Langkah-langkahnya adalah sebagai berikut : 1. Buat sebuah project Android di Eclipse bernama Training, silakan pilih versi Build Target sesuai dengan platform Android yang tersedia di komputer Anda. Isikan form New Android Project seperti gambar di bawah ini, lalu klik Finish.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

2.

Buka file res/values/strings.xml kemudian tambahkan nilai string berikut


<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, HelloAndroid!</string> <string name="app_name">Training</string> <string name="submit_label">Submit</string> <string name="exit_label">Exit</string> <string name="edit_text_hint">Input your name here</string> <string name="agree_label">I Agree the Terms and Conditions</string> <string name="male_label">Male</string> <string name="female_label">Female</string> <string name="sex_title">Pick Your Sex</string> <string name="education_label">Last education</string> </resources>

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Cara menambahkannya Anda dapat mengetikkannya secara manual dengan mengaktifkan tab strings.xml yang ada di bawah jendela editor Eclipse, atau pada mode tab Resource di bawah jendela editor Eclipse kita tekan tombol Add kemudian kita pilih String dari jendela daftar tipe resource yang muncul, baru kita isikan nama resource dan nilainya seperti pada gambar di bawah ini.

3.

Buat file colors.xml di dalam folder res/values, caranya klik kanan item folder tersebut kemudian pilih menu New>Android XML File dan isikan nama file seperti gambar di bawah ini

4. 5.

Buka file res/values/colors.xml kemudian tambahkan satu value bertipe Color seperti cara menambahkan string resource di atas, beri nama itemnya blue, dan values-nya adalah #0000FF Buat file res/values/arrays.xml seperti pembuatan file colors.xml di atas, kemudian tambahkan item bertipe String Array bernama education_options, kemudian tekan lagi tombol Add saat item education_options tersorot. Tambahkan beberapa Item Elementary School, High School, Bachelor,

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Master, dan Doctor sebagai sub-item dari education_options sehingga tampilan editor seperti gambar di bawah ini.

Apabila kita lihat tab arrays.xml, maka isi file tersebut adalah sebagai berikut.
<?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="education_options"> <item>Elementary School</item> <item>High School</item> <item>Bachelor</item> <item>Master</item> <item>Doctoral</item> </string-array> </resources>

6.

Buka file res/layout/main.xml yang dibuat oleh Eclipse dari proses pembuatan project aplikasi Android. Sekarang kita akan membuat tampilan aplikasi kita. Adapun hasil akhir dari tampilan aplikasi yang akan kita buat adalah seperti gambar berikut.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Untuk membuat tampilan tersebut akan digunakan komponen TextView, EditText, RadioGroup, RadioButton, Spinner, CheckBox, dan ImageView. Di situ juga akan ditunjukkan penggunaan LinearLayout dan FrameLayout untuk mengatur posisi komponen. Adapun isi file main.xml adalah sebagai berikut.
<?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" android:textStyle="bold" android:textSize="18dp" android:textColor="@android:color/white" android:background="@color/blue"/>

Membuat Aplikasi Android Andry<andrymail@gmail.com>

<EditText android:id="@+id/editName" android:layout_height="wrap_content" android:layout_width="match_parent" android:hint="@string/edit_text_hint"></EditText> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/sex_title" android:textSize="17dp"></TextView> <RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/radioGroupSex"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:id="@+id/radioMale" android:text="@string/male_label"></RadioButton> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/radioFemale" android:text="@string/female_label"></RadioButton> </RadioGroup> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="17dp" android:text="@string/education_label"></TextView> <Spinner android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/spinnerEducation" android:entries="@array/education_options"></Spinner> <CheckBox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/checkBoxAgree" android:text="@string/agree_label"></CheckBox> <LinearLayout android:layout_height="wrap_content" android:layout_width="fill_parent" android:orientation="horizontal" android:gravity="center_horizontal">

<Button android:layout_height="wrap_content"
android:text="@string/submit_label"

Membuat Aplikasi Android Andry<andrymail@gmail.com>

android:layout_width="100dp" android:id="@+id/buttonSubmit"></Button> <Button android:layout_height="wrap_content" android:text="@string/exit_label" android:layout_width="100dp" android:id="@+id/buttonExit"></Button> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:id="@+id/frameLayout1" android:layout_height="fill_parent"> <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/imageView1" android:src="@drawable/icon"></ImageView> <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/imageView2" android:src="@drawable/icon" android:layout_gravity="center"></ImageView> <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/imageView3" android:src="@drawable/icon" android:layout_gravity="bottom|right"></ImageView> </FrameLayout> </LinearLayout>

Atau jika kita lihat di jendela Outline di sebelah kanan jendela Visual Layout Editor kita akan melihat struktur tree seperti gambar di bawah ini

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Adapun penjelasan dari masing-masing komponen di atas adalah sebagai berikut : Pada elemen paling atas terdapat sebuah LinearLayout yang kita set orientasinya adalah vertical, artinya elemen anak ke-n+1 akan berada di bawah elemen ke-n Elemen anak pertama dari LinearLayout itu adalah sebuah TextView, dengan label kita mengacu resource string bernama hello. Untuk styling teksnya, digunakan style bold, dengan ukuran font 18dp (density-independent pixel), dan latar belakang TextView tersebut diberi warna biru dengan mengakses nilai resource color bernama blue Elemen selanjutnya adalah sebuah EditText yang kita beri nama editName, dan kita gunakan atribut Hint untuk memberikan penjelasan kepada pengguna mengenai apa yang harus dimasukkan untuk isian ini. Hint ini akan tampil apabila isian EditText ini masih kosong. Apabila kita ingin memberikan nilai awal untuk isian EditText, maka kita isikan nilai teks awal tersebut di atribut Text dari EditText. Selanjutnya ada elemen RadioGroup dan RadioButton, kedua elemen ini saling berkaitan di mana sebuah RadioGroup itu akan memiliki satu atau lebih RadioButton yang hanya ada satu elemen RadioButton tersebut yang nilai Checked nya adalah true dalam suatu waktu. Elemen Spinner biasa juga dikenal sebagai komponen Combo Box pada platform lain. Untuk data pilihan yang bisa dipilih oleh pengguna, kita gunakan resource array bernama education_options yang sudah kita buat pada langkah ke-5 di atas. Kita supply ID array tersebut pada nilai atribut Entries dari elemen ini. Elemen CheckBox, ada dua atribut yang perlu diketahui, yaitu Text untuk mengatur teks di sebelah tanda centang dan Checked untuk mengatur nilai checkbox apakah tercentang atau tidak LinearLayout dengan orientasi horizontal, yang artinya elemen anak ke-n+1 akan berada di kanan elemen ke-n. Agar posisi elemen anaknya terletak di tengah kita set atribut Gravity bernilai center_horizontal dan Layout width bernilai fill_parent atau match_parent. Sebagai anak dari LinearLayout dengan orientasi horizontal di atas kita tambahkan dua buah Button. Untuk mengatur label dari Button ini kita set nilai atribut Text. Di sini ditunjukkan pula alternatif nilai Layout width selain wrap_content, fill_parent, atau match_parent yaitu menggunakan nilai ukuran yang fix.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

7.

Layout terakhir yang digunakan adalah FrameLayout. Untuk FrameLayout, pengaturan posisi komponennya dikendalikan oleh masing-masing komponen anaknya, yaitu dengan mengatur nilai atribut Layout gravity. Di situ kita bisa lihat ada tiga komponen yang menjadi anak dari FrameLayout yang berupa komponen ImageView, yang kita set nilai Layout gravity nya bernilai left, center, dan bottom|right. Silakan coba jalankan aplikasi yang kita buat di atas di emulator. Hasilnya akan seperti gambar di bawah ini.

B. M E N GAKSES K OM P ON EN T AM P ILAN D ARI K ODE


Untuk dapat memproses ataupun memodifikasi isi tampilan saat runtime, maka kita perlu cara untuk mengakses komponen tersebut dari kode Java di aplikasi kita. Untuk itu kita pergunakan method findViewById() yang ada dimiliki oleh kelas Activity atau kelas View. Buka file HelloAndroid.java di folder src dan ubah isinya seperti kode di bawah ini.
package com.training.android;

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

Membuat Aplikasi Android Andry<andrymail@gmail.com>

import android.widget.RadioGroup; import android.widget.Spinner;

public class HelloAndroid extends Activity implements OnClickListener { /** Called when the activity is first created. */ private EditText private RadioGroup private Spinner editName; radioSexSelector; spinnerEducation;

private CheckBox checkAgree; private Button private Button btnSubmit; btnExit;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); editName radioSexSelector spinnerEducation checkAgree btnSubmit = (EditText) findViewById(R.id.editName); = (RadioGroup) findViewById(R.id.radioGroupSex); = (Spinner) findViewById(R.id.spinnerEducation); = (CheckBox) findViewById(R.id.checkBoxAgree); = (Button) findViewById(R.id.buttonSubmit);

btnSubmit.setOnClickListener(this); btnExit = (Button) findViewById(R.id.buttonExit);

btnSubmit.setOnClickListener(this); } public void onClick(View v) { int viewId = v.getId(); if (viewId == R.id.buttonSubmit) {

} else if (viewId == R.id.buttonExit) {

} } }

Pada kode di atas juga ditunjukkan cara untuk menangani event penekanan tombol.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

C. T OAST
Untuk menampilkan pesan informasi singkat kepada pengguna di Android dapat digunakan Toast, yang bentuknya menyerupai sebuah baloon text seperti gambar berikut.

Cara membuat Toast bisa dilihat pada kode di bawah. Kita akan ubah isi file HelloAndroid.java pada bagian method onClick sehingga isinya menjadi seperti di bawah ini.
public void onClick(View v) { int viewId = v.getId(); Toast t = null; if (viewId == R.id.buttonSubmit) { t = Toast.makeText(this, "This is Toast :\nButton Submit Pressed", Toast.LENGTH_LONG); } else if (viewId == R.id.buttonExit) { t = Toast.makeText(this, "This is Toast :\nButton Exit Pressed", Toast.LENGTH_LONG); } if (t != null) t.show(); }

Tambahkan pula baris di bawah ini di bagian import lalu coba jalankan lagi kode kita di emulator dan tekan tombol Submit atau Exit untuk melihat hasil Toast yang dibuat.
import android.widget.Toast;

Membuat Aplikasi Android Andry<andrymail@gmail.com>

D. D IAL OG
Selain Toast, di Android kita juga bisa menampilkan jendela Dialog terutama apabila untuk keperluan konfirmasi aksi yang akan dilakukan atau menampilkan pesan kesalahan yang sifatnya fatal. Contohnya, kita akan membuat dialog konfirmasi keluar dari aplikasi saat pengguna menekan tombol Exit. Kita kembali akan memodifikasi method onClick sehingga menjadi seperti kode di bawah ini.
public void onClick(View v) { int viewId = v.getId(); if (viewId == R.id.buttonSubmit) { Toast t = Toast.makeText(this, "This is Toast :\nButton Submit Pressed", Toast.LENGTH_LONG); t.show(); } else if (viewId == R.id.buttonExit) { Builder builder = new Builder(this); builder.setMessage("Exit from application?"); builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // User give exit confirmation, destroy this activity now finish(); } }); builder.setNegativeButton("No", null); AlertDialog dialog = builder.create(); dialog.show(); } }

Tambahkan pula import kelas-kelas berikut di bagian import kelas HelloActivity.


import android.app.AlertDialog; import android.app.AlertDialog.Builder; import android.content.DialogInterface;

Selanjutkan jalankan lagi aplikasi kita, dan coba tekan tombol Exit, maka akan muncul Dialog konfirmasi seperti gambar di bawah ini. Silakan coba memilih menekan tombol Yes atau No dari jendela dialog tersebut.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

E. M E MB A CA N ILAI M ASUK AN D ARI P EN GGUN A


Kita telah membuat sebuah form yang menerima masukan dari pengguna, pada aplikasi yang menerima masukan dari pengguna tentu kita perlu untuk membaca data hasil masukan tersebut. Berikut akan ditunjukkan bagaimana hal tersebut dapat dilakukan. Kembali kita modifikasi method onClick sehingga isinya menjadi seperti berikut. Kita akan membaca data masukan saat pengguna menekan tombol Submit kemudian kita akan tampilkan hasil bacaan tersebut dalam Toast.
public void onClick(View v) { int viewId = v.getId(); if (viewId == R.id.buttonSubmit) { // EditText Name value String name = editName.getText().toString();

// Selected RadioButton value int selectedSexRadioButtonId = radioSexSelector.getCheckedRadioButtonId(); String sex = "Unknown"; if (selectedSexRadioButtonId == R.id.radioMale) { sex = "Male"; } else if (selectedSexRadioButtonId == R.id.radioFemale) { sex = "Female"; }

// Selected Spinner value String lastEducation = spinnerEducation.getSelectedItem().toString();

// CheckBox checked value

Membuat Aplikasi Android Andry<andrymail@gmail.com>

boolean isAgreeChecked = checkAgree.isChecked();

// Show input data using Toast String toastMessage = "Input values :\n" + "Name = " + name + "\n" + "Sex = " + sex+ "\n" + "Last education = " + lastEducation + "\n" + "Is Agree = " + isAgreeChecked;

Toast t = Toast.makeText(this, toastMessage, Toast.LENGTH_LONG); t.show(); } else if (viewId == R.id.buttonExit) { Builder builder = new Builder(this); builder.setMessage("Exit from application?"); builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // User give exit confirmation, destroy this activity now finish(); } }); builder.setNegativeButton("No", null); AlertDialog dialog = builder.create(); dialog.show(); } }

Contoh hasil pengisian data dan hasilnya saat kita menekan tombol Submit adalah seperti gambar berikut.

F. M E MAN GGIL A CTIVITY L AIN

DAN

P ASSING V ARIAB LE A N T AR A C TIVITY

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Sebuah aplikasi Android biasa terdiri dari beberapa Activity yang dipanggil berdasarkan aksi yang akan dilakukan pengguna. Untuk menjalankan suatu Activity digunakan method startActivity dari kelas Context. Untuk menunjukkan proses ini, maka kita akan mengirimkan data hasil bacaan masukan pengguna untuk ditampilkan nilainya pada Activity kedua. Langkah-langkahnya adalah sebagai berikut : 1. Di folder src kita buat sebuah kelas Activity baru yang kita namakan ResultActivity. Caranya adalah dari nama package com.training.android kita klik kanan kemudian pilih New>Class. Pada jendela New Java Class isikan data seperti pada gambar di bawah ini dan setelah selesai tekan tombol Finish.

2.

Kita kembali lagi ke kelas HelloAndroid kemudian tambahkan konstanta berikut di bawah baris deklarasi nama kelas HelloAndroid

public class HelloAndroid extends Activity implements OnClickListener { public static final String NAME_INPUT_KEY public static final String SEX_INPUT_KEY public static final String EDUCATION_INPUT_KEY public static final String AGREE_INPUT_KEY = "name"; = "sex"; = "education"; = "agree";

...

3.

Kembali kita modifikasi isi method onClick dari kelas HelloAndroid pada bagian penanganan tombol Submit sehingga menjadi seperti berikut.

public void onClick(View v) {

Membuat Aplikasi Android Andry<andrymail@gmail.com>

int viewId = v.getId(); if (viewId == R.id.buttonSubmit) { // EditText Name value String name = editName.getText().toString(); // Selected RadioButton value int selectedSexRadioButtonId = radioSexSelector.getCheckedRadioButtonId(); String sex = "Unknown"; if (selectedSexRadioButtonId == R.id.radioMale) { sex = "Male"; } else if (selectedSexRadioButtonId == R.id.radioFemale) { sex = "Female"; } // Selected Spinner value String lastEducation = spinnerEducation.getSelectedItem().toString(); // CheckBox checked value boolean isAgreeChecked = checkAgree.isChecked();

// Start new activity to display input data Intent i = new Intent(this, ResultActivity.class); i.putExtra(NAME_INPUT_KEY, name); i.putExtra(SEX_INPUT_KEY, sex); i.putExtra(EDUCATION_INPUT_KEY, lastEducation); i.putExtra(AGREE_INPUT_KEY, isAgreeChecked); startActivity(i); } else if (viewId == R.id.buttonExit) { Builder builder = new Builder(this); builder.setMessage("Exit from application?"); builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) { // User give exit confirmation, destroy this activity now finish(); } }); builder.setNegativeButton("No", null); AlertDialog dialog = builder.create(); dialog.show(); } }

Bagian yang berubah adalah kita menghapus bagian yang menginisialisasi String toastMessage dan membuat Toast, kemudian diganti dengan membentuk objek Intent, menaruh variabel yang akan

Membuat Aplikasi Android Andry<andrymail@gmail.com>

dikirimkan dan memanggil method startActivity. Pada bagian import juga perlu kita tambahkan baris berikut.
import android.app.AlertDialog;

4.

Kita buka kelas ResultActivity yang tadi sudah kita persiapkan, kemudian tambahkan method onCreate beserta isinya seperti kode di bawah ini.

package com.training.android;

import android.app.Activity; import android.os.Bundle; import android.widget.TextView;

public class ResultActivity extends Activity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Bundle extras = getIntent().getExtras();

String name = extras.getString(HelloAndroid.NAME_INPUT_KEY); String sex = extras.getString(HelloAndroid.SEX_INPUT_KEY);

String education = extras.getString(HelloAndroid.EDUCATION_INPUT_KEY); boolean isAgree = extras.getBoolean(HelloAndroid.AGREE_INPUT_KEY);

String textviewLabel = "Input values :\n" + "Name = " + name + "\n" + "Sex = " + sex+ "\n" + "Last education = " + education + "\n" + "Is Agree = " + isAgree;

TextView tv = new TextView(this); tv.setText(textviewLabel);

setContentView(tv); } }

5.

Coba jalankan lagi aplikasi tersebut di emulator, isikan field-field masukan dan tekan tombol Submit

Membuat Aplikasi Android Andry<andrymail@gmail.com>

6.

Hasilnya akan aplikasi kita akan langsung keluar dan menampilkan pesan Force Close seperti gambar berikut

7. 8.

Penyebab error tersebut adalah karena kelas ResultActivity belum didaftarkan di file AndroidManifest.xml, sehingga aplikasi tidak mengenali pemanggilan Activity tersebut. Untuk memperbaiki kesalahan ini kita buka file AndroidManifest.xml, kemudian pada tab Application kita lihat bagian Application Nodes di bawah.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

9.

Tekan tombol Add, kemudian pilih Activity. Akan muncul field-field baru di bagian kanan bawah seperti gambar berikut.

Kemudian kita isikan field Name dengan nama activity kedua kita, yaitu ResultActivity. Kita bisa mengetikkan manual nama kelas activity kita pada EditText yang tersedia atau dengan menekan tombol Browse di sebelah kanan EditText Name lalu mengetikkan beberapa huruf awal dari nama activity yang akan kita tambahkan lalu kita pilih dari hasil filtering yang muncul. Selesai ketikkan Ctrl+S untuk menyimpan perubahan pada file AndroidManifest.xml.

10. Coba jalankan lagi aplikasi ini di emulator, kemudian ulangi pengisian nilai field-field yang ada dan diakhiri dengan menekan tombol Submit. Kali ini aplikasi kita tidak mengalami Force Close, dan akan tampil halaman seperti gambar berikut.

Membuat Aplikasi Android Andry<andrymail@gmail.com>

Demikianlah dasar pembuatan aplikasi Android, untuk belajar lebih lanjut dapat digunakan file dokumentasi yang bisa diunduh dari http://developer.android.com. Di situ terdapat lebih banyak resource pembelajaran mengenai macam-macam komponen tampilan, tips dan trik pembuatan aplikasi, serta dokumentasi API library Android. Semoga dengan training singkat ini semakin banyak karya-karya dari developer di Indonesia yang meramaikan Android Market.

Membuat Aplikasi Android Andry<andrymail@gmail.com>