Modul Android

Pengantar Mobile Programming dengan Android Yudi Wibisono ([email protected] / [email protected] )Ilmu Komputer Universitas Pendidikan Indonesia (cs.upi.edu)versi (BETA): Oktober 2012

http://creativecommons.org/licenses/by-nc-sa/3.0/Modul ini bebas dicopy, didistribusikan, ditransmit dan diadaptasi/dimodifikasi/diremix dengan syarat tidak untuk komersial, pembuat asal tetap dicantumkan dan hasil modifikasi dishare dengan lisensi yang sama.

Pengantar Modul..................................................................................................................3Sekilas Android...................................................................................................................3Fitur-fitur.............................................................................................................................3Instalasi SDK.......................................................................................................................4Aplikasi Pertama: Hello World...........................................................................................6Aplikasi Kedua: Hello XXX..............................................................................................10Widget................................................................................................................................15

Text View......................................................................................................................15Button............................................................................................................................15ImageButton dan ImageView........................................................................................16EditText.........................................................................................................................18CheckBox......................................................................................................................19RadioButton...................................................................................................................21ListView........................................................................................................................23

List view adalah widget untuk menampilkan data dalam bentuk list. Karena ukuran layar pada smartphone terbatas, listview merupakan salah satu widget penting dan paling sering digunakan untuk menampilkan kelompok informasi..............................................23ListView dapat berbentuk sederhana sampai kompleks. Beberapa contoh.......................23Dialog................................................................................................................................30

Toast..............................................................................................................................30AlertDialog....................................................................................................................30

Layout Manager.................................................................................................................31RelativeLayout...............................................................................................................31LinearLayout..................................................................................................................34TableLayout...................................................................................................................34Frame Layout.................................................................................................................37Kombinasi Layout.........................................................................................................38

Debugging..........................................................................................................................39Sub Activity.......................................................................................................................40Menyimpan Data...............................................................................................................50

Shared Preferences.........................................................................................................50SQLite............................................................................................................................51RawQuery dan Cursor...................................................................................................55Akses multi record.........................................................................................................55File.................................................................................................................................56

versi 19 Okt 2012 (Ilkom UPI) 1

http://creativecommons.org/licenses/by-nc-sa/3.0/

mailto:[email protected]

mailto:[email protected]@gmail.com

Stream........................................................................................................................56Persiapan....................................................................................................................57File Teks....................................................................................................................57Objek Stream.............................................................................................................59

Grafik.................................................................................................................................62Menggambar di Canvas.................................................................................................62Menulis Teks di Canvas.................................................................................................63Event Touch...................................................................................................................64Load Image ke Canvas...................................................................................................66Animasi di Canvas.........................................................................................................66

Koneksi dengan Server......................................................................................................68Google Map.......................................................................................................................70

Zoom..............................................................................................................................72Ubah Posisi....................................................................................................................72Menambahkan Layer.....................................................................................................73

Import External Library.....................................................................................................75TBD PERBAIKAN MODUL:...........................................................................................75


Pengantar ModulModul praktikum ini dibuat untuk mendukung praktikum matakuliah Mobile Computing di Ilmu Komputer Universitas Pendidikan Indonesia (UPI) (cs.upi.edu). Diasumsikan pengguna modul ini telah mengenal dasar-dasar bahasa Java dan XML.

Sekilas AndroidAndroid adalah software platform yang open source untuk mobile device. Android berisi sistem operasi, middleware dan aplikasi-aplikasi dasar. Basis OS Android adalah kernel linux 2.6 yang telah dimodifikasi untuk mobile device.

Android versi 1.0 dikeluarkan tanggal 23 Sep 08, versi 1.1 pertama kali digunakan di mobile phone disusul Versi 1.5 (Cupcake), 1.6 (Donut). Versi-versi terakhir adalah:

2.2 (Froyo), mempercepat kinerja dengan Just In Time compiler dan Chrome V8 JavaScript engine, Wi-Fi hotspot tethering dan suppport Adobe Flash.

2.3 (Gingerbread), memperbaiki user interface, soft keyboard, copy/paste features dan support ke Near Field Communication (NFC).

3.0 (Honeycomb), diperuntukkan untuk tablet yang menggunakan layar lebih besar, multicore processors dan hardware acceleration untuk graphics.

4.0 (Ice-cream sandwich), kombinasi Gingerbread and 3.0 Honeycomb. Integrasi antara platform untuk tablet dan smartphone.

4.1 (Jelly-Bean), user interface yang lebih halus dan support NFC (Near Field Communication)

Untuk mengembangkan aplikasi di Android, bahasa utama yang digunakan adalah Java, tetapi bukan dalam platform J2ME yang memiliki banyak keterbatasan. Dapat dikatakan platform yang digunakan di Android setara dengan J2SE, dan ini merupakan kelebihan utama Android.

Fitur-fiturFitur-fitur utama Android yang dapat dimanfaatkan oleh pengembang app sebagai berikut:

Database dengan SQLite. Menulis file di SD card. Integrated browser berbasis WebKit engine Optimized graphics tersedia 2D graphics library; dan OpenGL ES 1.0 untuk 3D

graphics Media support untuk MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF GSM Telephony fasilitas telepon dan SMS. Bluetooth, 3G, NFC, LTE dan WiFi Kamera, GPS, compass, gyroscope, barometer, light sensor, accelerometer. Multitouch


Instalasi SDK Untuk membuat app Android, dibutuhkan Android SDK (Software Development Kit) yang diperoleh di http://developer.android.com/ sedangkan untuk IDE (Integrated Development Environment) dapat dipilih Eclipse, Neteans atau bahkan langsung dengan command line dan notepad (tidak direkomendasikan bagi pemula). Dalam tutorial ini hanya digunakan IDE Eclipse karena didukung oleh Google melalui plugin ADT (Android Development Tools).

Sayangnya setelah Android SDK didownload dan diinstall, SDK ini tidak dapat langsung digunakan. Komponen yang diperlukan harus didownload terlebih dulu melalui internet.

Catatan: untuk instalasi offline di lab, dapat menghubungi asisten ferdi untuk mendapatkan file yang dibutuhkan dan petunjuk instalasi.

Secara default setelah proses instalasi selesai SDK akan dijalankan, tetapi jika belum, panggil melalui Start Program SDK Manager, dan pastikan komputer dalam kondisi terkoneksi dengan internet.

Tersedia beberapa platform SDK yang dapat dipilih. Dalam modul ini yang digunakan adalah SDK Platform 4.1 API 16 (JellyBean) dan 2.2 API 8 (Froyo). Mengapa masih menggunakan 2.2 API 8? Alasannya Android versi 2.2 masih banyak beredar dipasaran bahkan masih dijual, terutama untuk Android kelas low-end.

Untuk menginstall, centang API 8 dan 16, lalu klik “Install x Packages”, biarkan SDK mendownload dan menginstallnya.

Setelah platform selesai di-install, selanjutnya perlu dibuat Android Virtual Devices (AVD), yaitu emulator device Android yang dijalankan di komputer.

Pilih ToolsManage AVDs. Akan muncul dialog berisi daftar AVD kemudian klik “New”


http://developer.android.com/sdk

Kita akan buat AVD versi 2.2 terlebih dulu. Isi nama, target dan ukuran SD card, lalu klik “Create AVD” (gambar bawah)

Pilih AVD yang baru Anda buat lalu klik Start dan kemudian Launch. Tunggu 1-5 menit (tergantung kemampuan komputer yang Anda miliki).

Emulator ini membutuhkan waktu cukup lama dan memori yang besar. Ambil secangkir kopi dan silahkan tunggu sampai layar berikut muncul (jika yang muncul masih tulisan Android berkelap-kelip, tunggu). Setelah emulator dijalankan, sebaiknya jangan ditutup lagi untuk menghemat waktu.


Terutama bagi yang belum memiliki Android, Anda dapat gunakan emulator ini untuk mengeksplorasi fitur-fitur Android.

langkah selanjutnya adalah mengistall JDK, versi terakhir yang dapat diperoleh di (oracle.com/technetwork/java/javase/downloads) dilanjutkan Eclipse (eclipse.org/downloads/). Instalasi Eclipse sangat mudah, extract file zip ke tempat yang diinginkan dan selesai.

Selanjutnya perlu diinstall plugin ADT (Android Development Tools) untuk Eclipse. Untuk menginstall ADT secara online (membutuhkan koneksi internet), masuk ke Eclipse, kemudian pilih menu Help Install New Software, klik tombol “ADD” akan muncul dialog berikut dan isi seperti berikut:

Kemudian ikuti petunjuk selanjutnya dan restart Eclipse.

Aplikasi Pertama: Hello WorldSesuai tradisi programmer, langkah pertama saat mencoba suatu platform adalah membuat aplikasi hello world.

Untuk memulai, jalankan Eclipse, pilih File New Other (ctrl–N), pilihlah Android Application Project.

versi 19 Okt 2012 (Ilkom UPI)

Latihan: install AVD untuk versi 4.1 dan bandingkan fiturnya dengan versi 2.2

6

Isi seperti gambar dibawah, jangan lupa ganti nama package. Package name harus unik, aturan yang biasa digunakan adalah menggunakan nama website organisasi anda (dalam urutan yang dibalik), ditambah dengan nama applikasi. Misalkan nama website organisasi anda adalah yuliadi.com, maka nama package adalah: com.yuliadi.namapp. Jika nama web organisasinya cs.upi.edu, maka nama packagenya: edu.upi.cs.yudiwbs.namaapp.

Dapat dilihat pada gambar di bawah bahwa minimum required SDK diset dengan Froyo. Sebaiknya pilih versi serendah mungkin sehingga semakin banyak device yang dapat menginstall aplikasi kita (pasar semakin luas).

Selanjutnya tekan Next.

Lalu pilih Launcher icon, gunakan dulu default, klik Next.

Kemudian pilih “BlankActiviy” dan Next.

Terakhir, klik “Finish” dan tunggu beberapa saat.


Terlihat ADT telah menyiapkan komponen user interface activity utama (untuk sekarang, anggap activity adalah semacam Form).

Pertama yang kita lihat adalah graphical layout, yang didefinisikan dalam file XML. Lihat ke tab bagian bawah, pilih activity_main.xml untuk melihat format XML-nya. Ini adalah salah satu kelebihan Android dibandingkan J2ME, dengan memisahkan konfigurasi user interface dengan logika program, app akan lebih mudah dimaintenance.

Sekarang coba buka source code untuk me-launch form ini. Lihat package explorer, buka src, package dan klik MainActivity.java


Dapat dilihat source code yang dibangkitkan ADT

Jalankan project dengan mengklik icon run atau ctrl-F11 dan pilih Android Application. Tunggu emulator dilaunch jika emulator telah ditutup sebelumnya .

Perhatikan tab console dibagian bawah, tab ini penting untuk melihat apa yang terjadi.

Jika hanya halaman depan yang muncul di emulator, unlock dengan drag slide lock ke sebelah kanan.

Selamat! Anda telah menjalankan app pertama anda. Jangan tutup emulator ini, Eclipse selanjutnya akan menggunakan emulator yang sudah terbuka ini dan tidak perlu menjalankan yang baru.


Aplikasi Kedua: Hello XXX

Selanjutnya kita akan memodifikasi program ini dan menambahkan masukan nama dari user, lalu setelah user menekan tombol, akan keluar “Hello, [nama]. Terimakasih”

Pertama, melalui project explorer kembali pilih main.xml. Pilih tab “Graphical Layout”

Komponen-komponen yang berada di bagian kiri, sering disebut “widget” atau “view”.

Pertama pilih TextField, pilih yang paling atas (plain text), lalu drag ke dalam form.

Lalu drag button di Form Widget, dan letakkan disebelah kanan text field.

Terakhir, drag teks “hello world” dari tengah ke dekat button.

Coba anda run (ctrl-F11) untuk melihat hasil tampilan dari program ini. Jangan lupa, jangan tutup emulatornya, supaya tidak menunggu lama saat run berikutnya. Sekarang kita akan menambahkan aksi yang akan dijalankan saat button diklik.


Sekarang karena kita perlu membuat code yang saat button di-klik menangkap apa yang diketikkan pengguna dan menuliskannya di TextView. Untuk itu kita perlu memberi nama kepada setiap komponen.

Kembali ke activity_main.xml.

Tip: untuk merapikan XML tekan ctrl-shift-F.

Ganti isi atribut android:text dan android:id untuk EditText dan Button. Atribut android:text adalah label yang akan ditampilkan, sedangkan android:id adalah id yang dapat digunakan program untuk berhubungan dengan widget ini. Beri nama ID “etNama” untuk edit text dan “bSapa” untuk button. Jangan lupa pada button ganti “android:layout_toRightof dengan id EditText yang baru.


Kemudian lihat gambar bawah, ganti id untuk TextView, tambahkan atribut “android:id”. Beri nama tvSalam. Ganti juga android:text dengan petunjuk untuk memasukkan nama. Jangan lupa update “android:layout_below” dengan bSapa.

Sekarang kita akan mengeset agar saat button diklik, method yang diinginkan akan dipanggil. Set atribut android.onClik pada button dengan nama method yang akan menangani event tersebut (bSapaClick).

Sekarang kita perlu menambahkan code agar saat tombol diklik app akan mengeluarkan respon.

Melalui package explorer, kembali ke activity utama.

Kemudian buat satu method baru bSapaClick. Pastikan nama method sama dengan yang dicantumkan di XML . Nama yang tidak sama akan menyebakan error saat program dijalankan. Method ini memiliki parameter View


Tambahkan impor class yang dibutuhkan. Salah satu cara yang paling mudah adalah dengan mengklik gambar x merah di sebelah kiri, lalu pilih impor (gambar bawah).

Jalankan program (ctrl-F11). Isi teks dan tekan tombol.

Cara ini paling sederhana, tetapi programmer harus memastikan nama method pada XML cocok dengan method di program. Jika nama method tidak sama, tidak akan muncul kesalahan pada saat program dicompile, tapi akan menyebabkan kesalahan pada saat runtime (saat button diklik). Alternatif lain adalah dengan menggunakan listener seperti code dibawah.


WidgetPada modul sebelumnya kita telah menggunakan input box, button dan label. Komponen user interface ini disebut widget. Beberapa widget dasar adalah: TextView, Button, Image, EditText, CheckBox, RadioButton, ListView.

Setiap widget memiliki property atau atribut yang mengatur bagaimana widget itu ditampilkan, seperti tinggi dan lebar widget. Property ini dapat diset melalui xml layout atau melalui program. Beberapa widget memiliki beberapa event yang ter-trigger berdasarkan aksi dari pengguna, misalnya event click pada button.

Detil property dan event untuk setiap widget dapat dilihat di: http://developer.android.com/reference/android/widget/package-summary.html (scroll sedikit ke bawah, di bagian classes)

Berikut akan kita bahas beberapa widget yang terpenting. Silahkan buat project baru.

Text View

TextView digunakan untuk menampilkan label teks. View ini sudah kita gunakan Beberapa contoh property dari TextView adalah android:textSize, android:textStyle, android:textColor. Coba tambahkan textview standard dengan atribut dibawah

Hasilnya:

Catatan: pada atribut textSize, direkomendasikan menggunakan ukuran sp. sp merupakan singkatan dari scaled-pixel yang memperhitungkan kepadatan resolusi dan juga preferensi ukuran font dari pengguna.


http://developer.android.com/reference/android/widget/package-summary.html

Button

Button merupakan turunan dari TextView sehingga yang berlaku di textView juga berlaku di button. Tambahan property yang penting adalah onClick

Hasilnya (perhatikan penggunan fill_parent untuk atribut layout_width):

Catatan: dp yang digunakan sebagai satuan panjang merupakan singkatan dari density-independen pixel. Nilai real pixel untuk 1 dp berubah-ubah sesuai dengan resolusi. 1 dp pada resolusi 160 pixel berarti 1 pixel. Jika resolusinya 320 pixel, maka 1 dp = 2 pixel demikian seterusnya.

ImageButton dan ImageView

ImageButton adalah turunan dari button, gunakan widget ini jika Anda ingin menggunakan image sebagai pengganti tulisan pada button. Sedangkan ImageView dapat digunakan untuk menampilkan image.

Image yang akan ditampilkan dalam button diletakkan di direktori sesuai dengan resolusinya/[project]/res/drawable-ldpi /[project]/res/drawable-mdpi/[project]/res/drawable-hdpi /[project]/res/drawable-xhdpi

res merupakan singkatan dari “resource”, file-file yang berada di dalam direktori /res disebut dengan project resources.


ldpi digunakan untuk untuk device dengan layar low density (resolusi rendah), mdpi untuk medium, hdpi untuk high density dan xhdpi untuk ekstra high density.

Coba buka direktori tersebut, terdapat icon launcher untuk masing-masing resolusi (ic-launcher.png), dapat dilihat ukuran yang berbeda untuk setiap resolusi. Jadi untuk hasil yang maksimal, untuk setiap image yang akan anda gunakan harus disediakan 4 image untuk setiap resolusi.

Misalnya kita akan menambah button dan image view. Sebagai sumber gambar kita akan menggunakan icon standard yang sudah ada direktori drawable. Pilih images & media lalu “Image View” (paling kiri).

Pilih ic_launcher

Coba lakukan yang sama untuk widget “Image Button” sehingga tampilannya akan seperti ini


Coba jalankan dan klik terutama untuk button-nya.

Untuk menambahkan image bersama-sama dengan button, dapat digunakakan komponen button (bukan ImageButton) lalu set atribut drawableLeft dengan image yang diinginkan.

Coba tambah button, dan isi drawableLeft.

dan hasilnya

Coba ganti drawableLeft dengan drawableRight, drawableTop atau drawableButtom.

EditText

EditText digunakan untuk menerima input dari pengguna. Di pallete sudah disediakan berbagai jenis EditText, silahkan dicoba satu persatu dan perhatikan XML yang dihasilkan.


CheckBox

User dapat memilih lebih dari satu pilihan dengan checkbox. Pada palette, Checkbox ada di bagian FormWidgets. Coba tambahkan dua checkboxs

dan ubah XML-nya seperti berikut (jangan lupa set atribut id):

Hasilnya


Sedangkan program untuk mendapatkan nilai suatu checkbox di check atau tidak adalah sebagai berikut.

Tambahkan Button dan TextView di form untuk menampilkan hasil pilihan user. Sehingga tampilannya akan seperti ini.

Sedangkan XML-nya akan seperti ini, jangan lupa atribut onClick:

Tambahkan di activity code method klikHasil sebagai berikut, perhatikan penggunaan isChecked untuk mengambil nilai apakah user meng-check pilihan:


RadioButton

Pada radioButton, hanya satu yang boleh aktif (mutual exclusive) di dalam satu group yang disebut radioGroup. Modifikasi program checkbox diatas, hapus checkbox dan ganti dengan radio button yang ada di Form Widget


Latihan:

Buat soal berikut yang penggunanya dapat memilih lebih dari satu:--------------------------------------------------------------------------------1. Manakah kota dibawah ini yang merupakan ibu kota propinsi?

BandungBogorBanjarmasinBontang

Nilai anda: [ditampilkan setelah tombol periksa nilai diklik]

--------------------------------------------------------------------------------Jawaban yang benar adalah “Bandung” dan “Banjarmasin”. Setiap jawaban benar bernilai 10, tetapi setiap jawaban yang salah akan dikurangi 5. Jadi jika pengguna menjawab “Bandung”, “Bogor” dan “Banjarmasin” dan maka pengguna mendapat nilai 20 – 5 = 15. Tampilkan nilai ini.

Periksa Nilai

ini button

21

Hasilnya:

Catatan: jika layout menjadi berantakan atau error, periksa atribut android:layout_below atau android:layout_above, apakah telah berisi id yang benar

Radiobutton harus diletakkan dalam RadioGroup, dan jangan lupa set ID.

Catatan: Anda dapat mengeset atribut android:orientation pada RadioGroup menjadi horizontal agar radio button tersusun secara horizontal.


Sedangkan code saat tombol diklik adalah sebagai berikut.Perhatikan pengunaan getCheckRadioButtonId yang mengambil idRadio yang dipilih oleh pengguna:


ListView

List view adalah widget untuk menampilkan data dalam bentuk list. Karena ukuran layar pada smartphone terbatas, listview merupakan salah satu widget penting dan paling sering digunakan untuk menampilkan kelompok informasi.

ListView dapat berbentuk sederhana sampai kompleks. Beberapa contoh


Latihan:

Buat soal berikut yang penggunanya hanya dapat memilih tepat satu:

--------------------------------------------------------------------------------1. Sebutkan ibu kota propinsi Sulawesi Tenggara?

SamarindaKendariPaluMakasar

Nilai anda: [ditampilkan setelah tombol periksa nilai diklik]

--------------------------------------------------------------------------------

Jawaban yang benar adalah “Kendari”. Jika pengguna memilih pilihan yang benar akan mendapat nilai 10, sedangkan jika menjawab nilai salah akan mendapat nilai -2

Periksa Nilai

ini button

24

Kita akan mulai dengan membuat list sederhana seperti gambar di bawah:

Pertama, tambahkan ListView di main.xml

Ganti id list view dengan “listangka”

Di activity utama, tambahkan code sebagai berikut:


Coba jalankan.

Pada code di atas, dibuat adapter berisi string untuk mengisi list. Sedangkan R.layout.simple_expandable_list_item1 adalah layout standard yang disediakan Android.

Bagaimana mengupdate isi listview saat program sedang berjalan?

Untuk mengupdate data pada contoh diatas, nilai array dapat langsung diubah lalu panggil method adapter.notifyDataSetChanged()untuk merefresh tampilan. Contoh:

Listview juga dapat digunakan untuk menampilkan struktur yang lebih rumit (composite). Contoh berikut memperlihatkan listview dengan isi yang kita tentukan sendiri.


Untuk membuatnya, pertama buat project baru. Tambahkan ListView seperti pada contoh sebelumnya. Kemudian kita akan buat layout untuk setiap baris pada ListView. Pilih project pada project explorer, lalu klik kanan Android Tools New Resources File (gambar bawah)

Beri nama filenya row.xml

Pada row.xml yang baru digenerate tambahkan Large text dan TextView. Layout ini yang nanti akan muncul pada setiap baris.

Ganti Id kedua komponen itu.


Sekarang buat class untuk data judul dan keterangan. Pada project explorer, pilih package, klik kanan new Class

Beri nama DataList


Berikut isi dari DataList. Class ini hanya menampung data yang akan muncul di setiap baris.

Selanjutnya kita akan buat adapter untuk list. Buat class dengan cara yang sama dengan sebelumnya, beri nama DataAdapter, tapi class ini merupakan turunan dari kelas ArrayAdapter. Klik browse di dialog saat membuat class (gambar bawah)

Ketik Array…, maka akan muncul ArrayAdapter, pilih item tersebut (gambar bawah)


Isi class DataAdapter adalah sebagai berikut:

Inti dari class DataAdapter adalah untuk “mengisi” setiap row saat akan ditampilkan. Perhatikan pengisian tvJudul dan tvKeterangan dengan data.

Terakhir, di activity utama tambahkan kode berikut:


DialogSeringkali app perlu menyampaikan pesan sementara kepada pengguna, misalnya jika menampilkan informasi, melaporkan kesalahan atau memperlihatkan proses yang memakan waktu lama. Beberapa alternatif dialog yang dapat digunakan adalah sebagai berikut:

Toast Toast digunakan untuk menampilkan pesan yang kemudian akan menghilang dengan sendirinya tanpa interaksi dengan pengguna. Fokus juga tetap pada aplikasi dan tidak berpindah ke Toast. Kelebihan Toast adalah mudah untuk dibuat, sedangkan kelemahannya adalah pengguna dapat saja tidak melihat pesan yang dikandung Toast.

Untuk mencobanya, buat project baru, tambahkan satu button, beri label “Toast” dan kode berikut adalah event saat button diklik:

AlertDialogJika yang diinginkan adalah dialog yang muncul dan harus ditutup secara manual oleh pengguna maka dapat digunakan AlertDialog. AlertDialog dapat menampilkan tiga button.

Tambahkan button pada program sebelumnya, beri label “AlertDialog”. Tambahkan code berikut untuk event onClick.


Selain setMessage dan setPositiveButton, dapat digunakan method setTitle, setIcon untuk mengeset judul dan icon message dan SetNeutralButton (button tengah) dan SetNegativeButton (button kanan). Berikut contohnya

Layout ManagerUntuk meletakan komponen (view) pada layar, android menggunakan layout manager. Ada empat jenis layout manager. LinearLayout, TableLayout, RelativeLayout dan FrameLayout. Sebelumnya kita telah menggunakan LinearLayout yang meletakan view secara berurutan. Coba lihat main.xml di direktori resource

layout_weight: rasio antara view. Misalnya ada dua widget, widget pertama ukurannya harus ¾ layar dan sisanya ¼ layar. Maka set layout_weight widget pertama dengan 3 dan widget kedua dengan 1. Height atau widht perlu diset 0px. TBD contohnya

RelativeLayoutRelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya. Contoh dua widget dibawah. EditText posisinya relatif terhadap textView nama.


Deklarasinya adalah sebagai berikut:

Perhatikan penggunaan atribut layout_toRightOf yang menyatakan bahwa EditText berada disebelah kanan label. Sedangkan atribut layout_baseLine digunakan agar TextView dan EditText aligned. Jika layout_baseLine dihapus efeknya akan sebagai berikut (Text View terlalu tinggi posisinya):

Beberapa atribut lain yang mengatur posisi widget dibandingkan dengan widget lain adalah:

android:layout_above android:layout_below android:layout_toLeftOf android:layout_toRightOf.


Tanpa tanda plus

33

Untuk mengatur posisi ada tambahan lima atribut: android: layout_alignTop, android:layout_alignBottom, android:layout_alignLeft, android:layout_alignBaseline

Contoh jika kita ingin menambahkan button sehingga posisinya sebagai berikut:

Maka deklarasi buttonnya adalah sebagai berikut:

Artinya button tersebut dibawah dan disebelah kanan EditText.

Dengan RelativeLayout, widget juga dapat diatur berdasarkan parent.

android:layout_alignParentTop android:layout_alignParentBottom android:layout_alignParentLeft android:layout_alignParentRight android:layout_centerHorizontal android:layout_centerVertical android:layout_centerInParent

Contoh:


Hasilnya:

Silahkan bereksperimen dengan berbagai setting atribut layout.

LinearLayoutTBD

TableLayoutTableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip seperti Table yang digunakan di HTML. Pengguna mendefinisikan baris dengan tag


<TableRow> dan sistem secara otomatis mendefinisikan kolomnya. Contoh deklarasi berikut:

Hasilnya adalah sebagai berikut. Bayangkan sebagai sebuah tabel dengan dua kolom dan dua baris.

Misalnya kita ingin agar EditText sampai ke bagian belakang, maka tambahkan android:stretchColumns="1" pada TableLayout. Maka kolom 1 akan terisi penuh.


Kolom 0

Kolom 1

36

Hasilnya:

Misalnya kita ingin menambahkan button. Button ini mengisi dua kolom, mulai dari kolom 0 sampai dengan 1, untuk mengekspresikan hal tersebut, gunakan atribut android:layout_span

Lalu tambahkan TextView di kolom 1 (ingat kolom dimulai dari 0). Ini bisa dilakukan dengan menggunakan atribut android:layout_column. Tanpa atribut ini, TextView akan muncul di kolom 0


Frame LayoutFramelayout digunakan untuk menampilkan satu komponen. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk. Kita bisa menambahkan layout lain sebagai child di dalam frame layout.

Contoh untuk deklarasi berikut menampilkan dua ImageView (pastikan file image telah disimpan di direktori [project]/res/drawable-hdpi, [project]/res/drawable-ldpi dan [project]/res/drawable-mdpi )

Hasilnya gambar akan bertumpuk seperti ini.


Kombinasi LayoutKita bisa mengkombinasikan beberapa layout dalam satu form. Contoh berikut menggunakan linearlayout yang memiliki dua anak yaitu relativelayout dan tablelayout.


Relative layout dengan dua TextView

TableLayout dengan tiga kolom dan tiga baris

39

Latihan Layout

DebuggingTBD

Debug umum Eclpise: Breakpoint, step over dst.Logcat log.d(….)Filter


Hitung Luas Segitiga

Hitung Luas Segiempat

Hitung Luas Segitiga

Alas:Tinggi:

Luas: xxxxx

Hitung Luas

Hitung Luas Segiempat

Alas:Tinggi:

Luas: xxxxx

Hitung Luas

Sub ActivityDalam materi sebelumnya, selalu digunakan satu activity (satu form). Tentu saja sebuah applikasi sering membutuhkan multi acitivity. Sebagai contoh, misalnya kita akan membuat sebuah aplikasi matematika sederhana. Applikasi ini menyediakan menu yang berisi pilihan untuk menghitung luas segiempat dan luas segitiga.

Rancangan layarnya sebagai berikut.

Pertama kita akan membuat form utama terlebih dulu yang memiliki dua menu. Berikut deklarasi XML form main.

Dengan hasil sebagai berikut:


Selanjutnya kita akan membuat form kedua untuk menghitung luas segitiga. Klik layout di package Explorer lalu klik kanan New atau File New Other (Ctrln-N). Pilih Android XML File.

Beri nama file segitiga

dengan root TableLayout

Buat form untuk menerima input dari user dan menampilkan keluaran


Deklarasi XML-nya adalah sebagai berikut (perhatikan penggunaan atribut android:numeric=integer|decimal agar teks hanya menerima nilai integer atau desimal):

Selanjutnya, kita akan membuat program untuk menghitung luas segitiga. Klik package, lalu klik kanan New Class


Beri nama Segitiga, dan merupakan turunan dari android.app.Activity

Set layout yang digunakan (R.layout.segitiga) dan implementasi saat button diklik.


Selanjutnya adalah menghubungkan menu utama dengan modul menghitung segitiga ini.

Intent dapat digunakan untuk memanggil activiy lain. Intent adalah request dari satu activity ke activity atau intent listener lain. Agar dapat dipanggil, kita harus menambahkan intent ke AndroidManifest.xml.

Intent dapat digunakan untuk memanggil activiy lain. Intent adalah request dari satu activity ke activity atau intent listener lain. Intent juga digunakan untuk notifikasi event misalnya SD card dimasukkan, SMS masuk, activiy dijalankan dst

Penting: agar activity hitung luas segitiga dapat dipanggil, kita harus menambahkan activity ini ke AndroidManifest.xml.


Sekarang kembali ke Main.Java, tambahkan pada method segitigaClick intent berisi permintaan untuk menjalankan activity segitiga dan jalankan dengan startActivity.

Latihan:

Lengkap program diatas dengan hitung segiempat. Buat form agar pengguna dapat memasukan panjang dan lebar, tambahkan tombol yang jika diklik menampilkan luas segiempat. Hubungkan menu utama dengan form tersebut dengan intent.

Pada contoh diatas digunakan startActivity untuk memanggil sub activity. Tidak ada notifikasi apakah subactivity sudah selesai atau belum dan terkadang kita juga membutuhkan data dari subactivity. Untuk hal tersebut, dapat digunakan startActivityForResult.

Perlu penjelasan yang agak panjang untuk mencoba startActivityForResult. Buatlah sebuah project baru. Pada form Main, tambah satu button yang jika diklik akan memanggil sub activity dan mengirimkan data.


Kemudian kita buat form sub activity-nya. Klik kanan di layout New Other Android XML File, beri nama sub.xml

Form-nya seperti berikut, TextView akan menampilkan kiriman data dari form utama,

Potongan XML-nya adalah sebagai berikut:

Sekarang kita membuat Sub.java. Klik kanan dibagian package (misal edu.upi.cs) New Class. Beri nama Sub, dan isi superclass dengan android.app.Activity.

Jangan lupa ganti parameter setContentView dengan .sub.

onStart adalah method yang dipanggil setelah onCreate dan activity telah ditampilkan. Isi method ini dengan menampilkan isi data yang dikirimkan program utama.


Sekarang kita kembali ke main.java, gunakan method putExtra untuk menambahkan data ke intent. Pada startActivityForResult terdapat parameter angka 99 (silahkan ganti dengan angka atau konstanta apapun). Ini karena satu activity bisa mengirimkan banyak intent dan diperlukan cara untuk membedakan antara satu intent dengan intent yang lain.

Method onActivityResult akan dipanggil saat activity yang dipanggil telah selesai.

Jangan lupa mendaftarkan sub activity di AndroidManifest.xml


Test program, maka subactivty akan menampilkan data yang dikirim dari form utama.

Catatan: Jika terjadi force close, ada kemungkinan activity belum ditambahkan di AndroidManifest.xml

Pada program diatas, anda telah berhasil mengirimkan data ke sub activity. Sekarang kita akan membuat sebaliknya, data dari sub activy akan dikirim ke form utama. Kita akan memodifikasi program diatas sbb:

Pada main.xml, tambahkan TextView untuk menampilkan hasil dari sub activity, beri id tvHasilSub.

Lalu pada main.java, lengkapi method onActivityResult. Pada method ini, diterima dan diproses hasil dari sub activity.


Kemudian untuk subactivitynya sendiri, tambahkan Button yang diklik saat pengguna telah selesai dengan subactivity. Edit sub.xml sebagai berikut

Implementasikan method saat Button selesai diklik di sub.java

Jalankan program, setelah subactiviy ditutup, maka di program utama akan muncul kiriman data dari sub activity


Menyimpan DataAndroid menyediakan beberapa cara untuk menyimpan data: file, relasional database dengan SQLlite dan pasangan key/value yang disebut sistem preferences. Untuk sharing antar aplikasi disediakan mekanisme yang disebut ContentProvider.

Shared PreferencesShared Preferences (SP) adalah mekanisme untuk menyimpan pasangan key-value untuk tipe data primitif (integer, double, string, booelan). SP cocok untuk penggunaan ringan seperti menyimpan setting aplikasi dan kondisi user interface (misalnya saat activity masuk ke state sleep karena device menerima telepon).

Data dalam shared preferences disimpan dalam device android dalam bentuk XML.

Shared Preference objek untuk activity diperoleh melalui getPreferences().

Ada tiga mode untuk shared preferences (SP)

MODE_PRIVATE: hanya aplikasi yang membuat SP yang dapat mengakses dataMODE_WORLD_READABLE: aplikasi yang lain boleh membacaMODE_WORLD_WRITEABLE: aplikasi yang lain boleh membaca sekaligus menulis.

Code berikut memperlihatkan cara penggunaan SP. Jangan lupa memanggil commit!


Jalankan. Kemudian coba komentari bagian isi data, dan jalankan kembali aplikasi.

Dapat dilihat data nama dan umur tersimpan walaupun aplikasi sudah ditutup,

Latihan:

Buat applikasi yang menyimpan berapa kali aplikasi telah dijalankan. Tampilkan jumlah tersebut.

SQLiteSQLite menyediakan fasilitas relational DBMS dengan perintah SQL. Referensi lengkap SQL yang digunakan dapat dilihat di http://www.sqlite.org/lang.html

Setiap aplikasi memiliki instance database tersendiri, dan berbeda dengan shared preference, tidak disediakan fasilitas agar aplikasi dapat membaca database aplikasi lain.

Untuk menggunakan SQLite, sangat dianjurkan menggunakan class helper untuk membuka dan menutup database, menginisiasi tabel dst. Helper juga digunakan saat melakukan upgrade struktur database jika suatu saat aplikasi diupdate. Class helper ini diturunkan dari class SQLiteOpenHelper.

Untuk latihan kita akan membuat aplikasi sederhana yang menyimpan data relasi berupa nama dan nomor telpon. Pertama kita buat class helper terlebih dulu. Buatlah project Android, tambahkan ke dalam project tersebut satu class (file New class). Beri class ini RelasiOpenHelper.


http://www.sqlite.org/lang.html

Buatlah code berikut


Selanjutnya kita akan membuat class yang melakukan manipulasi terhadap data (insert, ambil data), beri nama DbRelasi.

Source code DbRelasi adalah sebagai berikut:


Setelah kita membuat class helper dan class dbRelasi, sekarang kita akan memanfaatkan dua kelas tersebut. Kembali ke activity utama yaitu class Main. Tambahkan code sebagai berikut:


RawQuery dan CursorTBD

Akses multi recordTBD

Latihan:

Buat applikasi untuk menyimpan datamahasiswa (NIM, NAMA, ALAMAT). Buatlah menu untuk menambahkan data dan mencari berdasarkan NIM (NIM diinput oleh user).


FileFile dapat disimpan baik di dalam device maupun di media penyimpanan (SD card). Secara default, aplikasi tidak dapat mengakses file milik aplikasi lain. Bagi anda yang telah mengenal stream dan file di Java, anda dapat membaca secara cepat bagian ini, karena tidak ada perbedaan antara Java dan Android. Class yang mensupport operasi file disediakan di package java.io.*

StreamPemrosesan file dalam jumlah besar, yang membutuhkan kinerja yang tinggi masih dibutuhkan berbagai bidang. Misalnya aplikasi backend yang mengelola dokumen di perusahaan, aplikasi pengolahan teks, aplikasi pemroses XML, HTML, aplikasi simulasi-simulasi dan sebagainya. Penguasaan stream dan file akan membantu anda untuk memecahkan berbagai masalah

Stream adalah aliran data. Bayangkan stream sebagai sungai yang mengalirkan air. Seperti sungai, stream mengalirkan byte-byte data. Pemrosesan input dan output di Java pada prinsipnya menggunakan konsep stream ini.

Gambar 1: Input Stream (diambil dari http://download.oracle.com/javase/tutorial)

Gambar 1: Output Stream (diambil dari http://download.oracle.com/javase/tutorial)


Untuk membantu programmer, tersedia banyak class-class untuk memproses stream, bahkan lebih dari 60 kelas! (lihat gambar 3 dan gambar 4). Tentu saja tidak semua kelas tersebut harus digunakan, programmer bisa memilih kelas mana yang dibutuhkan untuk menyelesaikan masalahnya.

PersiapanSebelum memulai, pastikan emulator sudah memiliki SD-Card (Start All Program Android SDK Tools)

Lalu untuk setiap project yang akan mengakses ke SD Card, tambahkan ijin untuk menulis ke media penyimpanan external di AndroidManifest.xml

File Teks Sebelum mulai, pastikan virtual device telah diset SD-Card dan AndroidManifest telah ditambahkan ijin untuk menulis (baca bagian persiapan)


File teks penting untuk menulis data, XML, HTML dan sebagainya. File teks dianggap sebagai stream dari karakter. Untuk menulis ke file teks, cara yang paling mudah adalah dengan menggunakan class PrintWriter. Berikut adalah contoh program yang menulis dua baris ke file teks.

Sedangkan untuk membaca, dapat digunakan class Scanner yang dapat membaca baris demi baris. Berikut contoh codenya, letakkan di bawah code atas.


Latihan: buat file teks berisi<html><body> Halo </body></html>

Objek StreamJava telah menyediakan fasilitas agar objek dapat disimpan ke dalam stream secara otomatis dengan mudah. Class yang digunakan adalah ObjectOutputStream dan ObjectInputStream.

Setelah membuat project baru (pastikan AndroidManifest.xml-nya telah ditambahkan ijin menulis ke external!) Sekarang coba kita buat class Mahasiswa sebagai berikut.

Tambah class baru (Filenewclass). Perhatikan penggunaan interface java.io.Serializable yang menandakan bahwa class ini dalam disimpan ke dalam stream

Codenya sebagai berikut. Perhatikan variabel serialVersionUID untuk menyatakan versi class. Jangan lupa class Mahasiswa ini mengimplementas interface Serializable.


Selanjutnya, buat program untuk menulis dua objek mahasiswa ke dalam class. Penulisan objek ke stream sangat mudah, hanya dengan class ObjectOutputStream dan method writeObject. Buatlah code ini di activity Main.


Catatan:Perhatikan penggunaan code

ObjectOutputStream out = new ObjectOutputStream (new FileOutputStream(namaFileOutput));

Pada code diatas Objek FileOuputStream ‘dibungkus’ dengan ObjekOutputStream. Ini yang disebut dengan stream layering, yaitu penggunaan kombinasi beberapa class yang memproses stream. Contoh yang lain:

pbin = new PushbackInputStream( new BufferedInputStream(new FileInputStream("pegawai.dat"))));

Walaupun pada awalnya teknik layering stream ini terlihat sulit, tapi teknik ini sangat powerfull untuk mengkombinasikan berbagai fitur yang dibutuhkan.

Latihan:Buatlah class User dengan atribut username dan password. Simpan data objek user (minimal 3 user) ke dalam Android menggunakan file teks dan file objek.

Sekarang kita lanjutkan ke pembacaan objek yang telah dituliskan. Untuk membaca file berisi objek digunakan class FileInputStream dan ObjectInputStream;


Grafik

Menggambar di Canvas

Dalam contoh pertama kita akan menggunakan Canvas, Paint, Path dan Color untuk menggambar kotak. Perlu diingat koordinat Canvas adalah 0,0 berada di kiri atas. Makin ke kanan nilai x semakin besar dan makin kebawah nilai y semakin besar.

Buatlah class yang bernama GraphicsView yang mengextend kelas View.

Lalu di-activity utama, tambahkan kode berikut yang men-set contentview dengan class GraphicView.

Canvas, sesuai namanya adalah tempat untuk menggambar bentuk 2D. Dengan canvas, kita dapat menggambar bentuk (lingkaran, kotak, garis, titik), menggambar text, translate, scale, rotate.

Paint digunakan untuk menyimpan style, warna dan informasi lainnya yang dibutuhkan untuk menggambar.


Class Color digunakan untuk merepresentasikan warna. Android menggunakan 4 angka untuk alpha, red, green dan blue (RGB) dengan masing-masing rentang nilai 0 sd 255. Alpha digunakan menyatakan transparansi, alpha 0 artinya transparan 100% . Pada code diatas, kita menggunakan color constant (Color.GREEN). Coba ganti baris tersebut menjadi, silahkan berkesperimen dengan alpha yang lebih kecil.

Sekarang kita coba fungsi-fungsi lain pada canvas, tambahkan code berikut dalam class Graphicsview

Menulis Teks di CanvasMethod drawText dapat digunakan untuk menambahkan teks di canvas, sedangkan Path dan drawTextOnPath dapat digunakan untuk menggambar teks yang mengikuti jalur tertentu. Untuk jelasnya, silahkan coba code dibawah.


Catatan penting: Perhatikan bahwa layar Android memiliki resolusi berbeda-beda. Sebagai contoh, 100 point di layar dengan resolusi tinggi akan memiliki panjang berbeda dengan layar resolusi rendah. Gunakan Canvas.getWidth() dan Canvas.getHeight untuk menghitung panjang objek yang diinginkan. Misalnya jika kita ingin membuat garis sepanjang setengah layar, gunakan ukuran getWidth() / 2 sehingga pada resolusi apapun, garis akan selalu sepanjang setengah layar.

Event TouchSelenjutnya kita akan membuat program yang akan menggambarkan kotak ditempat pengguna menyentuh layar. Berikut adalah isi dari class Graphics view yang membersihkan layar dan menggambar kotak pada koordinat sentuhan jari.


Sedangkan code untuk Activity adalah sebagai berikut:


Load Image ke CanvasTBD

Animasi di CanvasAnimasi di Canvas cocok digunakan untuk game sederhana seperti game berjenis puzzle yang melibatkan sedikit objek dan tidak memperlukan animasi berat. Canvas juga lebih sederhana dibandingkan dengan OpenGL

Animasi dapat dilakukan dengan membersihkan layar dan menggambar objek di tempat yang baru. Class Asyntask digunakan untuk mengatur posisi objek dan jeda antar frame.

Berikut adalah contoh codenya. Buat project baru, tambahkan class GraphicsView yang merupakan turunan View seperti pada contoh sebelumnya. Class ini akan membersihkan layar dan menggambar bola sesuai posisi (satu frame).

Selanjutnya buat class AnimasiTask yang merupakan turunan dari Asynctask. Kelas ini berperan untuk mengatur posisi bola dan memerintahkan agar canvas didraw ulang setiap posisi berubah.


Latihan:Buatlah game sederhana memukul serangga di layar. Program menampilkan kotak di layar, jika pengguna ‘memukulnya’ dengan jari, maka pengguna mendapat skor. Tampilkan animasi jika kotak terkena pukulan (misal kotak berubah warna).

Terakhir, di-activity utama tambahkan code berikut:


Koneksi dengan ServerAda beberapa alasan diperlukan koneksi dengan server diantaranya:

1. Device memiliki beberapa keterbatasan (komputasi, space). Server dapat digunakan untuk memproses data dan hasilnya saja yang akan digunakan di device.

2. Sinkronisasi data. Pengguna dapat mengambil data terkini atau mengupload data tambahan.

Sebelum memulai, pastikan emulator telah terhubung dengan internet, jalankan browser dan coba buka salah satu website.

Jika tidak terhubung dengan internet, dapat digunakan server local seperti Apache atau PhpMyAdmin.

PENTING: Tambahkan di AndroidManifest permission untuk koneksi internet. Tanpa menambahkan ini, program anda tidak akan berjalan!

Letakkan permission ini di atas application (gambar bawah)

Buat project baru dan tulis code berikut:


Tambahkan class GetDataTask yang merupakan turunan dari Asynctask sebagai berikut. Ganti isi variabel url jika Anda menggunakan localhost:


Google MapGoogle Map adalah fitur yang disediakan oleh Google, dan bukan standard Android. Sebelum memulai, pastikan Google API sudah terinstall untuk platform target dan AVD untuk Google API juga sudah ada. Jika belum, silahkan update terlebih dulu.

Catatan:Baca ini http://stackoverflow.com/questions/7841494/cannot-find-google-apis-for-android-sdk jika Google API tidak ditemukan di Android SDK.

Diperlukan key yang didapat dari Google untuk menggunakan fasilitas ini.

Baca terlebih dulu https://developers.google.com/maps/documentation/android/mapkey

Kita akan membuat mapkey sementara yang dapat digunakan selama pengembangan. Pertama-tama cari lokasi keystore untuk debug.

Dalam Eclipse, pilih Window Preferences klik Android, klik Build. Catat nilai “default debug keystore”.

Sebagai contoh, dari gambar diatas lokasi keystore adalah di c:\Users\user\.android\debug.keystore

Kemudian cari posisi keytool di JDK Java. Biasanya terdapat di:c:\Program Files\Java\jdk1.7.0\bin

Lalu gunakan Start cmd, jalankan keytool dengan sintaks sebagai berikut. Sesuaikan lokasi debug.keystore dengan yang ada di komputer anda. Ingat, saat ditanya password ketikkan ‘android’ (tanpa tandapetik).

keytool -v -list -keystore C:\Users\user\.android\debug.keystoreEnter keystore password: [ketik android]


https://developers.google.com/maps/documentation/android/mapkey

http://stackoverflow.com/questions/7841494/cannot-find-google-apis-for-android-sdk

Hasilnya akan seperti berikut, ambil hanya nilai MD5 saja.

Dengan nilai certificate fingerprint MD5, kita dapat memperoleh mapkey melalui: (anda harus memiliki account Google terlebih dulu)

https://developers.google.com/android/maps-api-signup

Masukan fingerprint, klik generate API Key, maka didapatlah API key untuk mengakses peta.

Selanjutnya buat project baru Android. Saat menentukan target, pilih Google API. Artinya selain splatform standard, ditambahkan Google API

Langkah pertama adalah merubah manifest.xml, tambahkan ijin untuk mengakses internet dan lokasi dan menggunakan library google maps. Pastikan <uses-library ..> ada di dalam <application> .

Selanjutnya isi main.xml dengan code sebagai berikut, ganti isi apiKey dengan key yang telah diperoleh dari google sebelumnya:


https://developers.google.com/android/maps-api-signup

Di activity utama, tambahkan kode berikut, perhatikan bahwa activity diturunkan dari MapActivity.

Saat program dijalankan, seharusnya akan tampil peta dunia.

ZoomMenambahkan zoom sangat mudah, tambahkan dua baris berikut ke dalam onCreate.

Ubah PosisiUntuk mengganti posisi peta, dapat digunakan method setCenter() dengan parameter GeoPoint. GeoPoint menyimpan posisi latitude dan longitude dalam integer untuk menghemat memori dan mempercepat proses. Oleh karena itu koordinat perlu dikali 1E6 terlebih dulu. Sedangkan untuk mengatur zoom, dapat digunakan method setZoom. Tambahkan code berikut pada onCreate:


Menambahkan LayerUntuk menambahkan layer berupa point di peta, dapat digunakan class ItemizedOverlay. Class ini berisi informasi objek yang akan ditambahkan dipeta dan aksi jika objek tersebut ditap.

Tambahkan class baru di project peta kita, beri nama PointsOverlay yang merupakan turunan dari ItemizedOverlay.

Tambahkan kode berikut


Kemudian di oncreate activity utama, tambahkan kode berikut, set zoom level ke 16.


Import External Library TBD

TBD PERBAIKAN MODUL: Komponen:

o SeekBaro ScrollViewo TabHost , TabWidgeto ViewFlipper, SlidingDrawer

Menu Intent Activity life cycle


Modul Android

Documents

Transcript of Modul Android