MODUL PERKULIAHAN
Mobile
Programming
Konsep Dasar Pemrograman Mobile
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Fakultas Ilmu
Komputer
Teknik Informatika
01
87036 Tim Dosen.Abstract Kompetensi
sederhana
Sistem Operasi Mobile
Sistem operasi perangkat mobile (bahasa Inggris: mobile operating system, disingkat Mobile OS) adalah suatu sistem operasi yang mengontrol sistem dan kinerja pada barang elektronik yang mobile, mirip dengan fungsi Windows,Mac OS X, dan Linux pada Desktop PC atau Laptop/Notebook tetapi lebih sederhana. Biasanya penggunaannya hadir di ponsel pintar, PDA, tablet komputer, dan PMP.
Pada tahun 1993 dirilis smartphone yang pertama, “IBM Simon” yang memiliki fitur layar sentuh, email serta PDA. Selang 3 tahun kemudian, tahun 1996 Palm Pilot 1000 memperkenalkan personal digital assistant (PDA) untuk pertama kalinya dengan sistem operasi Palm OS. Masih dalam tahun yang sama PC Handled untuk pertama kalinya diperkenalkan dengan sistemWindows CE. 4 tahun, kemudian, tahun 2000 Symbian menjadi sistem operasi mobile modern pertama pada smartphone yang diluncurkan oleh Ericsson R380.
Tahun 2002, Microsoft pertama Windows CE (Pocket PC) pada smartphone . Masih pada tahun 2002, Blackberry merilis smartphone pertamanya. 3 tahun kemudian, tahun 2005 Nokia memperkenalkan Maemo OS pada tablet internet pertama Nokia N770. Lalu tahun 2007, Apple iPhone dengan iOS diperkenalkan sebagai iPhone “mobile phone” dan “internet communicator”.
Setahun kemudian, tahun 2008 OHA yang dibentuk oleh Google merilis Android 1.0 dengan HTC Dream (T-Mobile G1) sebagai ponselAndroid yang pertama.
Sistem operasi yang umum saat ini:
Android dari Google Inc. (open source, Apache)
Sistem operasi yang berbasis linux dan banyak digunakan oleh para pembuat/pabrikan telepon genggam sekarang ini (Samsung, HTC, Motorola, Sony Ericsson, LG, Huawei, dll). Android OS adalah sebuah sistem operasi mobile yang diperuntukan bagi smartphone dan komputer tablet. Android OS yang bebasis linux kernel ini dikembangkan oleh Open Handset Alliance dibawah bendera Google. Pengembangkan aplikasi-aplikasi Android dan menguploadnya di Android Market, dengan
Donut, Eclair, Froyo, Gingerbread, Honeycomb , Ice Cream Sandwich, jelly beam dan yang terbaru adalah kitkat.
BlackBerry OS dari RIM (closed source, proprietary)
BlackBerry menggunakan BlackBerry OS sebagai sistem operasinya. BlackBerry OS, dikembangkan oleh Reseach in Motion (RIM), untuk BlackBerry, perusahaan telekomunikasi asal Kanada ini. Diawal kemunculannya BlackBerry booming dengan layanan push-email dan sebagai smartphone yang sukses dipasaran. Versi terakhir dari BlackBerry OS adalah BlackBerry OS 7.
iOS dari Apple Inc. (closed source, proprietary)
iOS adalah sistem operasi mobile milik Apple yang dikembangkan dan hanya diaplikasikan untuk perangkat Apple Inc seperti iPhone, iPod Touch, iPad dan Apple TV. iOS memiliki lebih dari 500.000 aplikasi di App Store dengan angka penjualan perangkat smartphone terbaik di dunia pada tahun 2011 disusul Google Android dan Nokia Symbian. iOS menjadi “leading” bagi sistem operasi mobile yang lain dengan mengusung interface multitouch yang bisa digeser (slider), ditekan (switch), dan tombol. Perangkat Apple masih menjadi nomor satu dalam hal teknologi dan angka penjualan di dunia. Produk smartphone Apple yang terbaru adalah iPhone 5 dan iOS7 adalah versi terbaru.
Symbian OS dari the Symbian Foundation (open public license)
Symbian terdiri dari beberapa mobile OS yang tidak saling mendukung secara penuh; S60 3rd edition, S60 5th edition, S80, UIQ, MOAP, dan Symbian^3/Anna. Symbian OS adalah sebuah Operating System yang digunakan untuk operasi standar ponsel dengan perangkat smartphone.
Symbian OS menetapkan persyaratan bahwa sistem operasi ini hanya dapat digunakan oleh ponsel dengan fitur 2.5G dan 3G.
Windows Phone dari Microsoft (closed source, proprietary)
Windows Mobile merupakan sistem operasi mobile yang dikembangkan oleh Microsoft, produk Mobile Windows seperti Sagem myS-7, O2 Xphone dll. Sistem operasi yang berhasil dikembangkan dan diaplikasikan mulai dari Pocket PC 2000 hingga Windows Mobile versi 6.5.5. Meskipun ada
menguntungkan bagi pasar Windows Mobile karena produk mereka yang minim developer berakibat pada minimnya aplikasi-aplikasi yang dapat dikembangkan. Sehingga Windows Mobile kalah bersaing dengan smartphone lain, terutama bagi vendor yang menerapkan sistem terbuka bagi developer manapun yang bersedia mengembangkan sebuah sistem operasi, seperti Andorid.
Mobile Computing
Mobile Computing adalah suatu istilah yang digunakan untuk menggambarkan aplikasi pada piranti berukuran kecil, portable, dan wireless serta mendukung komunikasi.
Yang termasuk mobile computing:
• laptop dengan wireless LAN
• mobile phone
• wearable computer
• Personal Digital Assistant (PDA) dengan Bluetooth atau IRDA
Pengenalan Android
Android adalah sistem operasi untuk telepon seluler yang berbasis Linux.Android menyediakan platform yang bersifat open source bagi para pengembang untuk menciptakan sebuah aplikasi.Awalnya, Google Inc. mengakuisi Android Inc. yang mengembangkan software untuk ponsel yang berada di Palo Alto, California Amerika Serikat. Kemudian untuk mengembangkan Android, dibentuklah Open Handset Alliance, yaitu konsorsium dari 34 perusahaan hardware, software, dan telekomunikasi, termasuk Google, HTC, Intel, Motorola, Qualcomm, T-Mobile, dan Nvidia.
Sebuah Activity biasanya ditampilkan dalam satu screen sebagai bagian komponen dari View (yang terdiri dari komponen UI, widget atau control), yang bertugas melakukan interaksi dengan user untuk melakukan sebuah task tunggal (misalnya, melihat informasi, mengedit data, atau memasukkan data).
membuat suatu activity, kita melakukan extend terhadap class android.app.Activity, dan melakukan override beberapa method, khususnya method OnCreate().
Kita bisa mengatur konten view dari activity secara bahasa pemrograman java atau juga bisa melalui kode layout file XML Daur hidup sebuah activity diatur melalui method call-back, yang di definisikan pada class dasar Activity pada gambar 1.1. tentang siklus hidup android.
Android versi 1.0 dikeluarkan tanggal 23 September 2008. Versi 1.1 adalah versi yang pertama kali digunakan di mobile phone disusul versi 1.5 (Cupcake), 1.6 (Donut) dst. Versi Android 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 Near Field Communication (NFC).
• 3.0 (Honeycomb), diperuntukkan untuk tablet yang menggunakan layar lebih besar, multicore processors dan hardware acceleration untuk grafis.
• 4.0 (Ice-cream sandwich), kombinasi Gingerbread and 3.0 Honeycomb. Integrasi antara platform untuk tablet dan smartphone.
• 4.1 & 4.2 (Jelly-Bean), user interface yang lebih halus (project butter).
• 4.4 (Kit-Kat),
• Lolipob
• Marshmallow
Untuk mengembangkan aplikasi di Android, bahasa utama yang digunakan adalah Java, tetapi bukan dalam platform J2ME yang memiliki banyak keterbatasan. Platform yang digunakan di Android setara dengan J2SE, dan ini merupakan kelebihan utama Android.
Fitur-fitur
Fitur-fitur utama Android yang dapat dimanfaatkan oleh pengembang app sebagai berikut:
• Database dengan SQLite.
• Menulis dan membaca file di SD card.
• Integrated browser berbasis WebKit engine
• 2D graphics library; dan OpenGL ES 2.0 untuk 3D graphics
• Lokasi dan sensor: GPS, compass, gyroscope, barometer, light sensor, accelerometer.
• Renderscript untuk pemrosesan paralel memanfaatakan CPU dan GPU
• Kamera, Audio capture, Jetplayer, Media support untuk MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF
• GSM Telephony: fasilitas telepon dan SMS.
• Connectivity: USB, Bluetooth, NFC, SIP (Session Initiation Protocol, internet telephony khusunya untuk video conference dan instant messaging) dan WiFi
• Multitouch
Perbedaan dengan Aplikasi Desktop
Walaupun Java yang digunakan untuk mengembangkan Android app setara dengan J2SE ada beberapa berbedaan app Android vs app Desktop yang perlu diperhatikan:
• Beragamnya ukuran layar dan resolusi.
• Karakteristik device yang memiliki banyak sensor (kamera, GPS, accelometer dsb), terhubung ke internet dan selalu dibawa pengguna membuat app Android punya potensi di bidang baru.
• Walaupun saat ini prosesor device sudah powerfull, tetapi kemampuan batere dan memori tetap menjadi masalah. Komputasi berat, terutama yang berjalan di background perlu memperhitungkan masalah penggunaan daya.
Alasan Membangun Aplikasi Android
Terdapat beberapa alasan mengapa Android berkembang dengan pesat dan kenapa developer sebaiknya membangun Aplikasi Android.
Market Share
Developer memiliki kesempatan untuk mengembangkan aplikasi untuk pasar yang relative baru dan sedang berkembang pesat. Keberadaan Android Market akan menempatkan aplikasi yang dibuat oleh developer langsung kepada pengguna. Pengguna tidak perlu mencari melalui internet untuk menemukan dan meng-install aplikasi yang dibuat oleh developer. Pengguna cukup membuka Android Market yang sudah ter-install di perangkat android pengguna dan mengakses aplikasi yang pengguna butuhkan dan menginstall kedalam perangkat android pengguna.
Time to Market
Terdapat Android APIs (Application Programming Interfaces) yang memudahkan developer untuk membangun aplikasi dengan mudah dan waktu yang singkat.
Open Platform
Sistem operasi Android merupakan platform terbuka.Sehingga tidak merujuk pada suatu perusahaan hardwareatau suatu provider. Platform terbuka android memungkinkan perkembangan marketdengan sangat cepat, karena semua perusahaan hardware dan providerdapat membuat dan menjual perangkat android.Source code android dapat di akses melalui at http://source.android.com, untuk digunakan dan dimodifikasi sesuai kebutuhan perusahaan hardware, provider atau developeraplikasi.
Cross Compatibility
Android dapat berjalan di berbagai perangkat dengan ukuran dan resolusi layar yang berbeda.Android memiliki fitur yang membantu developeruntuk mengembangkan aplikasi yang compatibleuntuk berbagai perangkat (cross-compatibleapplication). Google memiliki feature detectionyang mengatur agar aplikasi yang dikembangkan oleh developerhanya berjalan di perangkat yang compatible. Sebagai contoh, jika
Market untuk memastikan aplikasi dapat berjalan diatasnya, diantaranya keberadaan: (a) Kamera, (b) Kompas, (c) GPS (Global Positioning System), (d) Bluetooth Transceiver.
Mashup Capability
Mashup Capability merupakan kemampuan untuk mengkombinasikan dua atau lebih layanan untuk mengembangkan suatu aplikasi.Sebagai contoh, developerdapat membuat mashupdengan menggunakan kamera dan GPS, sehingga terbangun aplikasi pengambilan photo dengan dilengkapi secara tepat lokasi pengambilannya.
Arsitektur Mobile Programming
Google sebagai pencipta Android yang kemudian diasuh oleh Open Handset Alliance mengibaratkan Android sebagai sebuah tumpukan software. Setiap lapisan dari tumpukan ini menghimpun beberapa program yang mendukung fungsi-fungsi spesifik dari sistem operasi. Tumpukan paling bawah adalah kernel. Google menggunakan kernel Linux versi 2.6 untuk membangun Android, yang mencakup memory management, security setting, power management, dan beberapa driver hardware. Bertempat di level yang sama dengan library adalah lapisan runtime yang mencakup serangkaian inti library Java. Dengannya, para programmer dapat mengembangkan aplikasi untuk Android menggunakan bahasa pemrograman Java. Lapisan selanjutnya adalah application framework, yang mencakup program untuk mengatur fungs i- fungsi dasar smartphone.
Arsitektur Android
Linux Kernel
Android dibangun di atas kernel Linux 2.6. Namun secara keseluruhan android bukanlah linux, karena dalam android tidak terdapat paket standar yang dimiliki oleh linux lainnya. Linux merupakan sistem operasi terbuka yang handal dalam manajemen memori dan proses. Oleh karenanya pada android hanya terdapat beberapa servis yang diperlukan seperti keamanan, manajemen memori, manajemen proses, jaringan dan driver. Kernel linux menyediakan driver layar, kamera, keypad, WiFi, Flash Memory, audio, dan IPC (Interprocess Communication) untuk mengatur aplikasi dan lubang keamanan.
Android menggunakan beberapa paket pustaka yang terdapat pada C/C++ dengan standar Berkeley Software Distribution (BSD) hanya setengah dari yang aslinya untuk tertanam pada kernel Linux.
Beberapa pustaka diantaranya:
• Media Library untuk memutar dan merekam berbagai macam format audio dan video.
• Surface Manager untuk mengatur hak akses layer dari berbagai aplikasi.
• Graphic Library termasuk didalamnya SGL dan OpenGL, untuk tampilan 2D dan 3D.
• SQLite untuk mengatur relasi database yang digunakan pada aplikasi.
• SSl dan WebKit untuk browser dan keamanan internet.
Android Runtime
Pada android tertanam paket pustaka inti yang menyediakan sebagian besar fungsi android. Inilah yang membedakan Android dibandingkan dengan sistem operasi lain yang juga mengimplementasikan Linux. Android Runtime merupakan mesin virtual yang membuat aplikasi android menjadi lebih tangguh dengan paket pustaka yang telah ada. Dalam Android Runtime terdapat 2 bagian utama, diantaranya:
Application Framework
Kerangka aplikasi menyediakan kelas-kelas yang dapat digunakan untuk mengembangkan aplikasi android. Selain itu, juga menyediakan abstraksi generik untuk mengakses perangkat, serta mengatur tampilan user interface dan sumber daya aplikasi. Bagian terpenting dalam kerangka aplikasi android adalah sebagai berikut [Hello Android 2nd Edition]:
1. Activity Manager, berfungsi untuk mengontrol siklus hidup aplikasi dan menjaga keadaan
”Backstack“ untuk navigasi penggunaan.
2. Content Providers, berfungsi untuk merangkum data yang memungkinkan digunakan oleh aplikasi lainnya, seperti daftar nama.
3. Resuource Manager, untuk mengatur sumber daya yang ada dalam program. Serta menyediakan akses sumber daya diluar kode program, seperti karakter, grafik, dan file layout.
5. Notification Manager, mencakup berbagai macam peringatan seperti, pesan masuk, janji, dan lain sebagainya yang akan ditampilkan pada status bar
Application Layer
Puncak dari diagram arsitektur android adalah lapisan aplikasi dan widget. Lapisan aplikasi merupakan lapisan yang paling tampak pada pengguna ketika menjalankan program. Pengguna hanya akan melihat program ketika digunakan tanpa mengetahui proses yang terjadi dibalik lapisan aplikasi. Lapisan ini berjalan dalam Android runtime dengan menggunakan kelas dan service yang tersedia pada framework aplikasi. Lapisan aplikasi android sangat berbeda dibandingkan dengan sistem operasi lainnya. Pada android semua aplikasi, baik aplikasi inti (native) maupun aplikasi pihak ketiga berjalan diatas lapisan aplikasi dengan menggunakan pustaka API (Application Programming Interface) yang sama.
Daftar Pustaka
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
4. Modul Mobile Programming Susanto Hariyanto, S.Kom.
5. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 6. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
Petunjuk Instalasi dan Pengenalan Editor
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
02
87036 Tim DosenAbstract Kompetensi
Mahasiswa memahami konsep aplikasi dalam android, serta mampu membuat aplikasi sederhana.
XML (eXtensible Markup Language)
XML kependekan dari eXtensible Markup Language, dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C pada bulan Februari 1998. Teknologi yang digunakan pada XML sebenarnya bukan teknologi baru, tapi merupakan turunan dari SGML yang telah dikembangkan pada awal 80-an dan telah banyak digunakan pada dokumentasi teknis proyek-proyek berskala besar. Ketika HTML dikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian paling penting pada SGML dan dengan berpedoman pada pengembangan HTML menghasilkan markup language yang tidak kalah hebatnya dengan SGML.
Seperti halnya HTML, XML juga menggunakan elemen yang ditandai dengan tag pembuka (diawali dengan ‘<’ dan diakhiri dengan ‘>’), tag penutup(diawali dengan ‘</ ‘diakhiri ‘>’) dan atribut elemen(parameter yang dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut sesuai kehendak kita. Pada eclipse XML biasanya digunaka untuk mengatur layout pada layar gadget.
Instalasi Eclipse, dan Konfigurasi SDK
SDK merupakan kependekan dari Software Development Kit. Android SDK adalah perangkat lunak yang digunakan dalam pengembangan aplikasi pada android. Sebelum itu kita harus menginstall eclipse yaitu sebuah IDE (Intergratied Development Environment) untuk mengembangan perangkat lunak dan dapat dijalankan di semua platform. Berikut adalah sifat dari eclipse :
• Multi –platform : Target sisitem operasi Eclipse adalah Microsoft Windows,Linux,solaris,AIK,HP-UX dan Mac OS.
• Multi-language : Eclipse dikembangkan dengan bahasa pemrograman java, namun eclipse mendukung pengembangan aplikasi berbasis lainnya, seperti C/C++,Cobol,Python,Perl,PHP
• Multi-role : Selain sebagai IDE untuk pengembangan aplikasi , eclipse pun bisa digunakan untuk aktivitas dalam siklus pengembangan perangkat lunak,seperti dokumentasi,test perangkat lunak.
Eclipse selalu dilengkapi dengan JDT(Java Development Tools), yaitu sebuah plugin yang memebuat Eclipse dapat dipakai untuk mengembangkan program java,serta dilengkapi dengan PDE(Plugin Development Environment) yang bisa dipaki untuk membuat plugin baru. Ada beberapa versi eclipse yang sudah release , pada modul praktikum ini menggunakan versi dengan kode nama Juno.
File bisa didownload di http://www.mediafire.com/download/owef6j4gc35e3ig/adt-bundle- windows-x86-20130717.zip .format file Zip. Pastikan PC anda sudah terinstal JDK (Java development Kit). Setelah download selesai berikut adalah cara mengkonfigurasi eclipse. Jika di komputer belum terinstal java, maka lakukan intalasi terlebih dahulu.
Sebelum membangun aplikasi android, diperlukan tiga buah file yang harus diinstal. Ketiga buah file tersebut dapat diunduh di http://developer.android.com/sdk/index.html
1. Eclipse 2. ADT Plugin 3. SDK Manager
Ketiga file tersebut sudah include didalam satu folder. Saat mendownload silahkan sesuaikan dengan tipe sistem operasi komputer. Kemudian install JDK (Java Development Kit) minimal versi 7 dan install di komputer. Berikut ini adalah langkah-langkah instalasi :
1. Instal JDK, Awal Instalasi pada gambar 1.2. Silahkan Klik Next hingga proses instalasi selesai.
2. Selanjutnya kita akan membuat Android Virtual Device pada gambar 1.3. Masuk ke folder adt- bundle, kemudian klik SDK manager.exe. jika terdapat pemberitahuan error, abaikan saja.
Gambar 1.3 : Tampilan SDK Manager
3. Pilih Tools lalu Manage AVDs pada gambar 1.4
Gambar 1.4 : Proses Manajemen AVD
4. Selanjutnya adalah proses konfigurasi emulator android pada gambar 1.5, klik New
Gambar 1.5 : membuat Android Virtual Device
5. Isi sesuai dengan gambar 1.6. Untuk Internal Storage ubah nilainya menjadi 500MiB. Kemudian Klik OK
Gambar 1.6 : konfigurasi AVD
6. Setelah itu, klik start untuk menjalankan emulator yang telah dibuat. Android Device Virtual gambar 1.7 telah selesai dibuat
Aplikasi Pertama: Hello World
Untuk memulai, jalankan Eclipse, pilih File New Android Application Project.
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 API11 Android 3.0 (HoneyComb) karena versi ini telah mendukung ActionBar.
Selanjutnya pilih next sampai untuk activity 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).
Komponen user interface untuk app Android disimpan di direktori /res/layout dalam format XML. Dalam project ini secara otomatis dibuat activity_main.xml
Pertama yang kita lihat adalah graphical layout berisi rendering layout dan fasilitas untuk mengedit layout. Lihat ke tab bagian bawah, pilih activity_main.xml untuk melihat format XML-nya. Komponen user interface dalam Android didefinisikan didalam XML. Jadi anda dapat mengubah elemen tampilan dengan dua cara: melalui graphical layout atau langsung mengedit file xml-nya.
Sekarang coba buka source code. Lihat package explorer, buka src, package dan klik MainActivity.java
Dapat dilihat source code yang dibangkitkan ADT
Jalankan project dengan mengklik icon run (gambar bawah) 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.
Lihat emulator maka akan akan muncul aplikasi berikut
Selamat! Anda telah menjalankan app pertama anda. Jangan tutup emulator ini, Eclipse selanjutnya akan menggunakan emulator yang sudah terbuka ini sehingga 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 activity_main.xml yang berada di res/layout (gambar bawah).
Pilih tab “Graphical Layout”
Komponen-komponen user interface yang berada di bagian kiri, sering disebut “widget” atau “view”.
Pertama pilih widget TextField, pilih yang paling atas (plain text), lalu drag ke dalam form.
Terakhir, drag teks “hello world” dari tengah ke dekat button. Jika posisi menjadi ‘berantakan’ jangan khawatir, atur ulang sehingga posisinya seperti dibawah.
Coba 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 akan membuat code yang saat button di-klik menangkap apa yang diketikkan pengguna dan menuliskannya di TextView. Untuk itu setiap komponen perlu diberi nama.
Kembali ke activity_main.xml. Klik Button kemudian lihat window properties yang berada di sebelah kanan, ganti Text dengan “Sapa” dan id dengan “bSapa”
Saat id diganti maka ada pesan untuk mengupdate semua kemunculan id, jawab ini dengan “Yes”.
Kemudian muncul window “Rename Resource” dan jawab ini juga dengan OK. Cara ini akan membuat semua kemunculan id ini di activity_main akan otomatis diganti. Ini akan lebih mudah dibandingkan
Lakukan hal yang sama untuk textfield, ganti id dengan etNama
dan textview, ganti id dengan tvSalam.
Coba lihat XML-nya, maka semua Id telah diganti (gambar bawah). Ini kelebihan mengganti nama id menggunakan property.
Tip: untuk merapikan XML tekan ctrl-shift-F.
Penting: setelah update XML, tekan save (ctrl-s). Ini disebabkan file R.java (di direktori /gen) yang berisi semua Id dan digenerate secara otomatis dapat tidak terupdate jika file xml tidak di-save secara eksplisit.
Sekarang kita perlu menambahkan code agar saat tombol diklik app akan mengeluarkan respon.
Melalui package explorer, kembali ke activity utama (MainActivity.java).
Kemudian buat satu method baru bSapaClick. Pastikan nama method sama dengan yang dicantumkan di activity_main.XML. Nama yang tidak sama akan menyebakan error saat program dijalankan.
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).
Tip: Jika id tidak dikenali seperti R.id.etNama, R.id.tvSalam dan seterusnya, buka kembali activity_main.xml lalu tekan ctrl-S (save)
Jalankan program (ctrl-F11), perhatikan tab Console di bagian bawah untuk memonitor proses emulasi.
Isi teks dan tekan tombol.
Cara ini paling sederhana, tetapi programmer harus memastikan nama method pada XML sama dengan nama 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.
Mana yang lebih baik? menggunakan atribut onClik atau dengan listener? itu tergantung dari selera programmer dan standard code yang digunakan.
Buatlah program untuk menghitung luas sebuah persegi panjang. Input adalah panjang dan lebar (dua edit text). Output adalah luasnya (panjang kali lebar). Gunakan method berikut untuk mengubah tipe string ke double.
Catatan: input dari method setText bertipe teks, sehingga nilai luas yang bertipe double harus dikonversi terlebih dulu menjadi teks. Gunakan String.valueOf(dblLuas) untuk mengkoversi double menjadi teks.
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
4. Modul Mobile Programming Susanto Hariyanto, S.Kom.
5. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 6. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
Widget dalam Android
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
03
87036 Tim Dosen.Abstract Kompetensi
Widget
Komponen user interface pada eclipe 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, property editor atau melalui program. Beberapa widget memiliki beberapa event yang ter-trigger berdasarkan aksi dari pengguna, misalnya event click pada button.
Berikut adalah contoh pengaplikasian widget. Untuk menampilkan cukup drag icon ke layar kerja.
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.
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 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.
Image View
Image View widget yang digunakan untuk menampilkan image. Image yang akan ditampilkan dalam button diletakkan di direktori /res sesuai dengan resolusinya. Jadi untuk hasil yang maksimal, untuk setiap image yang akan anda gunakan harus disediakan 4 image untuk setiap resolusi (mdpi sampai dengan xxhdpi). Hal ini untuk mencegah gambar yang digunakan terlihat pecah atau terlalu kecil pada device dengan resolusi berbeda. Pada folder res sudah terdapat image android. Sebagai contoh kita tampilkan gambar tersebut. Drag image view kelayar kerja.
Contoh:
dan hasilnya
EditText
EditText digunakan untuk menerima input dari pengguna. Pada palette telah 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 lalu set atribut id dan text melalui window property:
Sehingga hasilnya
Sedangkan contoh 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.
Tambahkan di activity code method klikHasil sebagai berikut, perhatikan penggunaan isChecked untuk mengambil nilai apakah user meng-check pilihan:
Latihan CheckBox:
Buat soal berikut yang penggunanya dapat memilih lebih dari satu:
--- 1. Manakah kota dibawah ini yang merupakan ibu kota propinsi?
Bandung Bogor Banjarmasin Bontang
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.
Catatan: input dari method setText adalah teks, sehingga nilai integer harus dikonversi terlebih dulu menjadi teks. Gunakan Integer.toString(intNilai).
Periksa Nilai
ini button
RadioButton
Pada radioButton, hanya satu pilihan yang boleh aktif (mutual exclusive) di dalam satu group yang disebut radioGroup. Modifikasi program checkbox diatas, tambahkan radio group (bukan radiobutton) yang ada di Form Widget
Hasilnya:
Tambahkan button dan textview, lalu gunakan property untuk mengedit sehingga hasilnya seperti berikut. Ganti id RadioGroup dengan rgJenisKel, radiobutton dengan rbLaki dan rbPerempuan dan id TextView dengan tvHasilRadio. Tambahkan property onClick pada button dengan nama klikHasilRadio
Catatan: Anda dapat mengeset atribut android:orientation pada RadioGroup menjadi horizontal agar radio button tersusun secara mendatar.
Sedangkan code saat tombol diklik adalah sebagai berikut.Perhatikan pengunaan getCheckRadioButtonId yang mengambil idRadio yang dipilih oleh pengguna:
Latihan:
Buat soal berikut yang penggunanya hanya dapat memilih tepat satu:
--- 1. Sebutkan ibu kota propinsi Sulawesi Tenggara?
Samarinda Kendari Palu Makasar
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 salah maka akan mendapat nilai -2
Periksa Nilai
ini button
Daftar Pustaka
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
4. Modul Mobile Programming Susanto Hariyanto, S.Kom.
5. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 6. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
ListView dalam Android
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
04
87036 Tim Dosen.Abstract Kompetensi
ListView
List view adalah widget untuk menampilkan data dalam bentuk list yang dapat di-scroll. Karena ukuran layar smartphone terbatas, listview merupakan salah satu widget terpenting dan paling sering digunakan untuk menampilkan kelompok informasi.
ListView dapat berbentuk sederhana sampai kompleks. Beberapa contoh
Kita akan mulai dengan membuat list sederhana seperti gambar di bawah:
1. Pertama, buat project baru lalu pilih Composite dan tambahkan ListView di activity_main.xml
2. Ganti id list view dengan “listAngka”
3. Di activity utama, tambahkan code sebagai berikut:
4. 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. Sebagai contoh, kita akan membuat button yang saat diklik akan mengubah item pertama:
Tambahkan button diatas listview
Tambahkan event onClick bernama klikButton dan kode seperti berikut:
Composite ListView
Listview juga dapat digunakan untuk menampilkan struktur yang lebih rumit. Contoh berikut memperlihatkan listview dengan isi yang kita tentukan sendiri.
Untuk membuatnya, pertama buat project baru. Tambahkan ListView seperti pada contoh sebelumnya.
Ganti id dengan listJudul.
Kemudian kita akan buat layout untuk setiap baris pada ListView yang berisi judul dan keterangan. Pilih project pada project explorer, lalu klik kanan Android Tools New Resources File (gambar bawah)
Catatan: alternatif lain membuat layout XML, klik kanan project new Android XML File.
Pilih resource type “Layout”. Beri nama file row.xml, pilih root element LinearLayout, XML akan dibuat di dalam direktori /res/layout. File row.xml ini akan menentukan layout dari setiap baris pada listview.
Pada row.xml yang baru digenerate tambahkan widget LargeText dan TextView (gambar bawah). Ganti Id kedua komponen itu. LargeText dengan tvJudul dan TextView dengan tvKeterangan.
Pada contoh di atas hanya digunakan dua widget (LargeText dan TextView), tapi sebenarnya apapun dapat dimasukkan di dalam layout ini. Misalnya Button, ImageView dan lainnya. Ini memungkinkan kita membuat ListView dengan isi yang kompleks.
Sekarang buat class untuk yang menampung data judul dan keterangan. Pada project explorer, pilih /src/[package], klik kanan new Class
Beri nama DataList
Berikut isi dari DataList. Class ini akan berisi data yang akan muncul di setiap baris.
Selanjutnya kita akan buat adapter untuk list. Fungsinya untuk “mengisi” setiap row dengan isi objek DataList.
Buat class dengan cara yang sama dengan sebelumnya (klik /src/[package], klik kanan, new class), beri nama DataAdapter, jadikan class ini turunan dari kelas ArrayAdapter.
Klik browse di dialog saat membuat class di bagian superclass (gambar bawahh)
Ketik Array…, maka akan muncul ArrayAdapter, pilih item tersebut (gambar bawah)
Terakhir, di activity utama (MainActivity.java) tambahkan kode berikut:
Jika dijalankan, hasilnya akan seperti ini:
Penanganan Click pada ListView
Latihan:
Buat program dengan tampilan seperti berikut, saat tombol diklik, maka isi list akan bertambah sesuai dengan nim dan nama. Tip: gunakan
adapter.notifyDataSetChanged() untuk merefresh data.
Untuk menangani tap pada listview, gunakan method setOnItemClickListener
Contoh berikut akan menampilkan dialog singkat jika baris ditekan, judul pada baris juga akan berubah menjadi warna merah. Berdasarkan kode pada contoh listview sebelumnya, tambahkan kode berikut (bagian yang dilingkari). Penjelasan tentang Toast ada di sub bab berikutnya.
Ada empat parameter untuk onItemClick:
Parent AdapterView (view parent yang menampung semua row) View View baris yang ditap
Position Posisi (indeks) dari view pada adapter id Id dari row.
Praktekkan kode pada program anda!
Daftar Pustaka
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
4. Modul Mobile Programming Susanto Hariyanto, S.Kom.
5. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 6. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
Toast, Dialog, Log, dan Intent
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
05
87036 Tim Dosen.Abstract Kompetensi
Menggunakan Toast, Dialog, Log, dan Intent untuk membuka aplikasi.
Mahasiswa memahami dan mampu menggunakan Toast atau Dialog.
Mahasiswa mampu menerapkan proses
Toast, List Dialog dan Alert Dialog
Pada pertemuan kelima kita akan membuat kotak dialog sebagai sarana interaktif antara aplikasi dengan pengguna. Pada aplikasi ini kita akan mengimplementasikan 3 macam dialog, antara lain :
• Toast
• List dialog
• Alert dialog
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:
AlertDialog
Jika 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.
Hasilnya akan seperti ini:
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
Praktikum
1. Membuat project dengan nama alertlist
2. Modifikasi layout di activitymain.xml menjadi seperti dibawah ini :
3. Modifikasi file AlertListActivity.java seperti dibawah ini
4. Jalankan aplikasi dan lihat hasilnya.
Daftar Pustaka
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
4. Modul Mobile Programming Susanto Hariyanto, S.Kom.
5. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 6. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
Activity Dan Intent
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
06
87036 Tim Dosen.Abstract Kompetensi
Activity dan Intent
Dalam materi sebelumnya, selalu digunakan satu activity. Tentu saja sebuah applikasi sering membutuhkan lebih dari satu activity. Activity adalah komponen terkecil penyusun Android App yang berisi satu kegiatan yang dapat dilakukan oleh pengguna.
Untuk menghubungkan antar activity dapat digunakan intent. Intent adalah fasilitas untuk menghubungkan satu activity ke activity yang lain, baik untuk app yang sama maupun app yang berbeda. Intent juga digunakan untuk notifikasi event misalnya SD card dimasukkan, SMS masuk dan lain-lain.
Untuk lebih memahami activity dan intent, sekarang coba buka salah satu app android yang telah dibuat sebelumnya, lalu pada project explorer pilih AndroidManifest.xml. File XML ini berisi property aplikasi, termasuk di dalamnya activity dan intent.
Klik xml-nya dibagian bawah
Lihat tag activity, dapat dilihat ada satu activity dengan property nama dan label.
Selain itu ada tag intent-filter yang digunakan untuk memfilter intent yang dapat dihandle activity.
android.intent.categori.LAUNCHER menyatakan activity ini adalah initial activity yang dapat dipanggil
Sekarang kita akan membuat contoh app yang memiliki dua activity.
Pertama buat project baru. Kemudian langsung buat activity kedua, caranya buat class baru: di project explorer klik package, klik kanan New Class. Beri nama class ini ActivityDua dan pastikan superclass kelas ini adalah android.app.Activity (gambar bawah)
Sekarang kita perlu menambahkan activity ini di AndroidManifest.xml. Isi atribut name dengan nama class lengkap dengan nama package dan label.
Penting: Tanpa menambahkan activity ke dalam AndroidManifest.xml, akan terjadi force close saat program dijalankan.
Sekarang kembali ke activity utama (MainActivity), tambahkan button di activity_main.xml, isi atribut onClick dengan clickButton. Buat implementasi method clickButton sebagai berikut, perhatikan pengunaan class Intent:
Dari kode diatas dapat dilihat bahwa intent merupakan struktur data (objek) yang ‘dilempar’ sebagai paramater ke method startActivity.
Jika program dijalankan hasilnya akan seperti ini. Terlihat label pada ActivityDua yang disimpan di dalam AndroidManifest.xml akan menjadi title.
Terlihat ActivityDua masih polos tanpa layout. Sekarang kita akan membuat layout untuk activity tersebut. Ini mirip saat membuat layout baris pada ListView.
Untuk membuat file layout, pilih project di project explorer, klik kanan, AndroidTools New Resources File. Pilih resource type “Layout”. Beri nama file activity_dua.xml, pilih root element LinearLayout (gambar bawah)
Tambahkan widget Large Text ke dalam layout, beri nama tvDua dan save.
Sekarang kita perlu meload layout ini saat activity kedua dijalankan. Buka class ActivityDua dan tambahkan kode dibawah dan coba jalankan.
Pertukaran Data antar Activity
Pada contoh sebelumnya, activity kedua dipanggil tanpa ada data yang dikirimkan dari activity utama ke maupun data kembali. Sekarang kita akan belajar bagaimana cara mengirim dan menerima data antar activity.
Mengirimkan data ke activity
Kita akan memodifikasi contoh pada app sebelumnya (app dengan dua activity).
Pada MainActivity, ubah kode sebagai berikut, perhatikan method putExtra untuk menambahkan data yang akan dikirim.
Sedangakan di ActivityDua tambah kode sebagai berikut untuk menerima data. Method onStart ini akan otomatis dipanggil saat activity mulai dijalankan setelah onCreate. Coba jalankan kembali app ini.
Menerima data dari actvity yang dipanggil
Untuk mengirimkan dan menerima data dari activity, dapat digunakan method startActivityForResult.
Sebagai contoh, kita akan membuat activity yang memanggil activity lain, pengguna mengisi data pada activity tersebut dan mengirimkannya kembali ke activity utama. Kita akan memodifikasi program sebelumnya.
Catatan: jika anda mau program sebelumnya tidak hilang anda dapat menduplikasi project dengan mencopy-paste project tersebut pada package explorer.
Sekarang kita kembali ke activity utama MainActivity, gunakan method putExtra untuk menambahkan data ke intent. Pada startActivityForResult terdapat parameter angka 99 (silahkan ganti dengan angka atau konstanta apapun). Paremeter ini diperlukan 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.
Selanjutnya kita akan menambahkan widget editText pada activity dua yang dapat diedit oleh pengguna dan hasilnya akan dikirimkan kembali ke activity utama. Buka res/layout/activity_dua.xml. Tambakan satu editText dan satu button. Beri nama etNama dan tambahkan android:onClick="clickButtonActDua"
di button.
Sekarang kita akan membuat kode di activitydua yang akan mengisi editText dengan data yang dikirim dari activity utama dan setelah button ditekan mengirimkan hasil update ke activity utama. Buka file ActivityDua.java dan tambahkan kode berikut:
Jika dijalankan hasilnya sebagai berikut
Praktikum
Latihan Activity-Intent
Menggunakan listview (layar1), tampilkan daftar nama mahasiswa. Pengguna dapat men-tap nama (baris), dan kemudian app akan menampilkan informasi yang lebih detil berisi NIM, NAMA, ALAMAT dan NOHP (layar2). Pada layar informasi detil (layar2) tersebut ada button “EDIT” yang jika diklik akan membawa ke layar ketiga yang berisi editText untuk mengupdate data. Hasil update akan muncul baik di layar1 dan layar2.
Daftar Pustaka
1. (2013). Retrieved 03 28, 2014, from http://developer.android.com/training/basics/activity- lifecycle/stopping.html.
2. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
3. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
4. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
5. Modul Mobile Programming Susanto Hariyanto, S.Kom.
6. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 7. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
Layout di Android
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
07
87036 Tim Dosen.Abstract Kompetensi
Memahami layout untuk penempatan objek dalam aplikasi android
Mahasiswa memahami dan mampu menggunakan layout untuk
Layout
Kategori komponen pertama adalah layout. Komponen - komponen di kategori ini menentukan struktur visual untuk antarmuka pengguna, seperti Ul untuk activity atau widget. Mendeklarasikan layout di XML juga memudahkan anda memvisualisaikan struktur dari antar muka.
Untuk meletakan komponen (view) pada layar, android menggunakan layout manager. Karena ukuran layar device Android sangat beragam, tidak ada peletakan posisi widget secara eksak per pixel.
Terdapat empat jenis layout manager yang memiliki fungsi masing-masing. LinearLayout, TableLayout, RelativeLayout dan FrameLayout. Berikut akan dibahas lebih rinci untuk setiap layout.
RelativeLayout
RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya.
Sebagai contoh, dua widget pada gambar di bawah. EditText posisinya relatif terhadap textView nama.
Contoh deklarasinya adalah sebagai berikut:
Untuk layout_width dan layout_height ada dua pilihan: match_parent (view berusaha sebesar parent) dan wrap_content (view hanya berusaha sebesar content yang berada di dalamnya). Sedangkan padding menyatakan jarak antara pinggir layar dengan komponen.
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_toRightOf.
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.
Widget juga dapat diatur berdasarkan gravity android:layout_gravity ada beberapa pilihan untuk gravity ini: left, right, center_horizontal, center_vertical, bottom, top. Gravity ini juga berlaku untuk layout manager yang lain. Berikut adalah contohnya:
Hasilnya:
Silahkan bereksperimen dengan berbagai setting atribut layout.
TableLayout
Untuk memilih layout manager, selain dengan cara manual dapat juga ditentukan membuat layout (File
New Other Android XML Layout File). Saat muncul dialog berikut, pilih Root Element sebagai TableLayout.
TableLayout 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
Hasilnya:
Untuk menambahkan widget di kolom terntentu, gunakan aandroid:layout_column. Misalnya kita akan menambahkan 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
Hasilnya sebagai berikut:
Frame Layout
Framelayout digunakan untuk menampilkan satu komponen dalam satu layar. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk, walaupun posisi widget dapat diatur dengan gravity.
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.
Catatan: layout_weight adalah 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
LinearLayout
Sesuai dengan namanya, linear layout menyimpan widget dalam satu baris atau satu kolom (tergantung orientasinya).
Jika orientasinya vertical (android:orientation="vertical") maka hasilnya akan seperti ini
Sedangkan jika orientasinya horizontal (android:orientation="horizontal"), maka hasilnya akan seperti ini.
Berikut adalah contoh linear layout dengan satu textview dan satu button.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
ScrollView
Dengan scrollview, layout seolah-olah memiliki layar yang lebih luas. Pengguna dapat melakukan scroll.
Scrollview hanya mempunyai satu child dan umumnya adalah LinearLayout. Scrollview hanya dapat melakukan vertical scrolling, gunakan HorizontalScrollView untuk layout yang dapat discroll secara horizontal.
Jangan gunakan Listview bersama layout ini karena listview telah memiliki mekanisme scrolling tersendiri.
Berikut adalah contoh scrollview yang menghasilkan layout seperti ini yang dapat discroll. Dua button teratas menggunakan RelativeLayout yang disisipkan dalam ScrollView. Ini adalah contoh penggabungan antara dua layout.
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/linearlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
RelativeLayout didalam LinearLayout. Didalamnya ada dua button.
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/button1"
android:text="Button" />
</RelativeLayout>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</ScrollView>
Kombinasi Layout
Kita bisa mengkombinasikan beberapa layout dalam satu activity. Contoh berikut menggunakan
Relative layout dengan dua TextView
TableLayout dengan tiga kolom dan tiga baris
Praktikum
Latihan Layout
Berdasarkan hasil latihan activity-intent, pada layar2 dan layar3, tambahkan layout yang tepat agar tampilan widget rapi.
Daftar Pustaka
1. (2013). Retrieved 03 28, 2014, from http://developer.android.com/training/basics/activity- lifecycle/stopping.html.
2. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
3. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
4. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
5. Modul Mobile Programming Universitas Mercubuana, Susanto Hariyanto, S.Kom.
6. Modul Mobile Programming, Sekolah Tinggi Manajemen Informatika & Komputer Indonesia, 7. Modul Praktikum Pemrograman Mobile, Teknik Informatika, Fakultas teknik Industri, Institut
Sains Dan Teknologi AKPRIND, Yogyakarta, 2014
MODUL PERKULIAHAN
Mobile
Programming
Aplikasi Map
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh Ilmu Komputer
penerbit Modul
Teknik Informatika
08
[kode] Tim Dosen.Abstract Kompetensi
Membuat Aplikasi Map
1.
Buatlah project android dengan nama DemoMap dengan Build Targetnya adalah Google APIs2.
Karena kita akan menggunakan library Google Maps yang bukan library standar Android, maka kita harus mendeklarasikan library tersebut dalam AndroidManifest.xml sebagai child element dari elemen <application>.3.
Kita juga butuh untuk mengakses internet terkait dengan retrieving data google, maka kita perlu menambahkan permission untuk mengakses internet, yang akan diatur didalam AndroidManifest4. Pada main.xml, ubah sintaks program menjadi seperti di bawah ini:
5.
Pada activitynya, ubah sintaks program menjadi seperti di bawah ini:6.
Jalankan project, maka hasilnya akan menjadi seperti ini:Daftar Pustaka
1. (2013). Retrieved 03 28, 2014, from http://developer.android.com/training/basics/activity- lifecycle/stopping.html.
2. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
3. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
4. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.
5. 24 Jam Pintar Pemrograman Android, Arif Akbarul Huda 6. Modul Kuliah Program Aplikasi Mobile, Emha Taufiq Luthfi 7. CRUD Android PHP MySQL dengan ActionBar, Agus Haryanto