Andry - Membuat Aplikasi Android.pdf

Membuat Aplikasi Android – Andry<[email protected]>

MEMBUAT APLIKASI ANDROID

Disusun oleh :

Andry <[email protected]>


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)

c. Minimal tersedia 500 MB free space storage

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 .

3. 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 meng-

extract SDK Starter Package pada langkah 2 di atas

4. Tambahkan platform Android dan komponen SDK lainnya


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 komponen-

komponen 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


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…


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. Dari Eclipse pilih menu File > New > Android Project yang akan memunculkan jendela dialog New Android

Project

2. Isikan Project name dengan HelloAndroid

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

4. 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 Level API Android 3.0 11 Android 2.3.3 10 Android 2.3 9 Android 2.2 8 Android 2.1 7 Android 2.0.1 6 Android 2.0 5 Android 1.6 4 Android 1.5 3 Android 1.1 2 Android 1.0 1

Contoh hasil pengisian data tersebut bisa dilihat pada gambar di bawah ini. Selesai mengisikan data yang

diperlukan, tekan tombol Finish.


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 :

6. Selanjutnya kita lakukan modifikasi pada kode di atas menjadi seperti di bawah ini. Perhatikan bagian yang

dicetak tebal adalah perubahan yang dilakukan.

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); } }


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.

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); } }


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


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. 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…

2. Selanjutnya akan muncul jendela Export Android Application. Pastikan isian field Project adalah nama

project yang akan di Build kemudian tekan tombol Next

3. Pilih radio button Create new keystore lalu tekan tombol Browse…

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

5. Kembali ke jendela Export Android Application isikan Password dan Confirm dengan password pilihan

kita, isi keduanya harus sama, selesai tekan tombol Next


6. Selanjutnya akan muncul jendela Key Creation. Isikan Alias, Password, dan Confirm dengan nilai yang kita

inginkan, untuk Validity isikan angka minimal 30

7. 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


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 : Folder yang berisi source code aplikasi Android.

gen : 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.

assets : 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.

res : 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.

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


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 Jenis Resource anim/ Berisi file XML untuk animasi (alpha, translate, rotate, dll) color/ Berisi file XML untuk resource warna drawable/ 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

layout/ Berisi file XML yang mendefinisikan UI layout menu/ Berisi file XML yang mendefinisikan item menu aplikasi (Options Menu, Context Menu atau

Sub Menu) raw/ 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/

values/ 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

xml/ File xml lain, seperti file konfigurasi 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)


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


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.

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


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. } }


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. KOMPONEN TAMPILAN DAN LAYOUT 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.


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>


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. 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

5. 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,


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.


<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.


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.


<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"/>


<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"


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>



android:id="@+id/imageView2" android:src="@drawable/icon"

android:layout_gravity="center"></ImageView>



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


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.


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.

7. Silakan coba jalankan aplikasi yang kita buat di atas di emulator. Hasilnya akan seperti gambar di bawah

ini.

B. ME NGAKSES KOMPONEN TAMPILAN DARI KODE

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;


import android.widget.RadioGroup;

import android.widget.Spinner;

public class HelloAndroid extends Activity implements OnClickListener {

/** Called when the activity is first created. */

private EditText editName;

private RadioGroup radioSexSelector;

private Spinner spinnerEducation;

private CheckBox checkAgree;

private Button btnSubmit;

private Button btnExit;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

editName = (EditText) findViewById(R.id.editName);

radioSexSelector = (RadioGroup) findViewById(R.id.radioGroupSex);

spinnerEducation = (Spinner) findViewById(R.id.spinnerEducation);

checkAgree = (CheckBox) findViewById(R.id.checkBoxAgree);

btnSubmit = (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.


C. TOAST 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.



Toast t = null;


t = Toast.makeText(this, "This is Toast :\nButton Submit Pressed",

Toast.LENGTH_LONG);


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;


D. DIALOG 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.




Toast t = Toast.makeText(this, "This is Toast :\nButton Submit Pressed",

Toast.LENGTH_LONG);

t.show();


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.


E. ME MBA CA NILAI MASUKAN DARI PENGGUNA 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.




// 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();

// 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();




builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {



finish();

}

});



dialog.show();

}

}

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

F. ME MAN GGIL ACTIVITY LAIN DAN PASSING VARIABLE ANT AR ACTIVITY


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 = "name";

public static final String SEX_INPUT_KEY = "sex";

public static final String EDUCATION_INPUT_KEY = "education";

public static final String AGREE_INPUT_KEY = "agree";

...

3. Kembali kita modifikasi isi method onClick dari kelas HelloAndroid pada bagian penanganan tombol

Submit sehingga menjadi seperti berikut.





// 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);




builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {



finish();

}

});



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


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


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

berikut

7. Penyebab error tersebut adalah karena kelas ResultActivity belum didaftarkan di file

AndroidManifest.xml, sehingga aplikasi tidak mengenali pemanggilan Activity tersebut.

8. Untuk memperbaiki kesalahan ini kita buka file AndroidManifest.xml, kemudian pada tab Application

kita lihat bagian Application Nodes di bawah.


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.


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.

Andry - Membuat Aplikasi Android.pdf

Documents

Transcript of Andry - Membuat Aplikasi Android.pdf