Anda di halaman 1dari 69

Daftar isi

Modul 1.............................................................................................................2

Modul 2.............................................................................................................12

Modul 3.............................................................................................................21

Modul 4.............................................................................................................30

Modul 5.............................................................................................................39

Modul 6.............................................................................................................50

Modul 7.............................................................................................................56
MODUL 1
Mobile Application Development
Abstract Kompetensi
Pengenalan pembuatan aplikasi Mahasiswa memahami konsep aplikasi
mobile mobile, serta mampu menggunakan
Eclipse untuk membangun aplikasi
mobile Android

Daftar Istilah
Istilah Pengertian
Mobile Programming Proses pembuatan aplikasi untuk
peralatan computer mobile
SDK Software Development Kit merupakan
perangkat yang disiapkan untuk
merancang aplikasi
IDE Integrated Development Environtment
merupakan satu kesatuan perangkat
lunak yang digunakan untuk
membangun aplikasi mulai dari tahapan
kode, testing sampai publish.
ADT Android Development Toolkit
merupakan tambahan plugin yang
digunakan untuk merancang aplikasi
android
AVD Android Virtual Device merupakan
perangkat virtual yang dibuat didalam
ADT untuk keperluan testing

Mobile Computing
Mobile Computing adalah suatu istilah yang digunakan untuk menggambarkan aplikasi pada piranti
berukuran kecil, portable, dan wireless serta mendukung komunikasi.

2|Page
Mobile Computing : A technology that allows transmission of data, via a computer, without having to
be connected to a fixed physical link.

Yang termasuk mobile computing:

 laptop dengan wireless LAN


 mobile phone
 wearable computer
 Personal Digital Assistant (PDA) dengan Bluetooth atau IRDA

Mobile Phone

Mobile phone = cell phone: adalah perangkat elektronik portabel yang berfungsi sebagaimana
pesawat telepon normal, yang dapat bergerak pada suatu area yang luas. (bandingkan dengan
cordless phone).

Kebanyakan mobile phone saat ini menggunakan kombinasi transmisi radio dan telephone circuit
switching (PSTN) konvensional, walaupun packet switching sudah digunakan untuk beberapa bagian
jaringan mobile phone, khususnya untuk layanan akses Internet dan WAP.

Sekilas Android
Android 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 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), perbaikan kinerja

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

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

Instalasi SDK (Windows)


Sebelumnya pastikan JDK telah diinstall. Jika belum, Anda dapat mendownloadnya di:
http://www.oracle.com/technetwork/java/javase/downloads/

Untuk membuat app Android, diperlukan Android SDK (Software Development Kit) yang diperoleh di
http://developer.android.com/sdk sedangkan untuk IDE (Integrated Development Environment)
dapat dipilih Eclipse, Netbeans atau bahkan langsung dengan command line dan notepad. Tapi saat
ini telah tersedia instalasi untuk Windows yang telah menyediakan semua komponen yang
dibutuhkan (ADT Bundle for Windows). Download ADT Bundle ini, dan setelah selesai ekstrak ke
tempat yang anda inginkan dan langsung dapat dijalankan karena tidak ada proses instalasi.

Salah satu file hasil ekstrak dari ADT Bundle adalah “SDK Manager.exe”, jalankan file ini. Dapat
dilihat bahwa versi default API yang terinstall adalah 4.2.2 (API17). Jika anda terkoneksi dengan
internet, anda dapat download API versi lain yang dibutuhkan.

Selanjutnya kita perlu membuat emulator smartphone android (AVD: Android Virtual Device).
Program yang akan kita buat dikomputer akan dijalankan di emulator ini.

Masih pada SDK Manager, Pilih ToolsManage AVDs. Akan muncul dialog berisi daftar AVD
kemudian klik “New”

5|Page
Kita akan buat AVD versi 4.2. (JellyBean) Isi nama, device dan target

Lalu isi RAM dengan ukuran kecil terlebih dulu, dan centang “Use Host GPU” (jika komputer anda
memiliki GPU). Lalu tekan OK.

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.

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

Selanjutnya kembali ke file bundle yang telah diekstrak, terdapat direktori Eclipse. Masuk ke
direktori ini dan jalankan eclipse.exe. Akan muncul dialog untuk memilih direktori tempat source
akan diletakkan, lalu akan tampil window welcome seperti gambar dibawah. Close window ini
selanjutnya anda siap membuat program pertama.

7|Page
Aplikasi Pertama: Hello World
Sesuai tradisi programmer, langkah pertama saat mencoba suatu platform adalah membuat aplikasi
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.

8|Page
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).

Sekarang coba kita lihat apa yang dihasilkan secara otomatis.

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.

9|Page
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

10 | P a g e
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.

11 | P a g e
MODUL 2
Android Application Architecture
Abstract Kompetensi
Pengenalan konsep aplikasi android. Mahasiswa memahami konsep aplikasi
dalam android, serta mampu membuat
aplikasi sederhana.

Arsitektur Aplikasi Android


Activities dan Intent

Semua tampilan yang memungkinkan interaksi dengan user disebut activity. Sabuah aplikasi dapat
terdiri dari satu atau beberapa activity. Biasanya setiap aktifity dirancang untuk satu proses kerja.

Saat sebuah aplikasi hendak menampilkan activity, proses pemanggilan activity dinamakan intent.
Dengan intent, sebuah activity dapat memanggil activity lainnya. Setiap activity yang dipanggil akan
disimpan dalam memory android, sehingga dapat diakses kembali dengan tombol back.

Activity dirancang agar user dapat berinteraksi dengan aplikasi, activity tidak aktif yang tersimpan
dalam memory akan dibersihkan oleh android dalam waktu tertentu untuk membebaskan memory
yang terpakai. Karena itu activity tidak cocok jika digunakan untuk proses yang memakan waktu
lama seperti proses download, sebagai gantinya untuk proses yang membutuhkan waktu lama
disediakan komponen service.

Services

Service adalah serangkaian proses yang tidak memiliki tampilan, tidak dapat berinteraksi dengan
user, dan berjalan di-background. Karena dirancang untuk melakukan proses jangka panjang,
android tidak akan mematikan service yang berjalan. Perilaku service biasanya dikendalikan dari
activity yang diberikan oleh aplikasi. Walaupun masa hidup sebuah service tidak dibatasi, service
tetap akan dihentikan jika android memerlukan memori untuk menjalankan aplikasi.

Salah satu penerapan service adalah music player, pengguna dapat tetap mendengarkan lagu
setelah menutup activity music, lalu membuka activity lainnya, namun music akan tetap diputar oleh
service. Biasanya service memberikan status atau informasi proses yagn dikerjakan melalui
notifikasi.

Activity Life Cycles

Siklus hidup aplikasi ditangani oleh android dalam tujuh tahapan:

12 | P a g e
public class Activity {
protected void onCreate(Bundle savedInstanceState);
protected void onStart();
protected void onRestart();
protected void onResume();
protected void onPause();
protected void onStop();
protected void onDestroy();
}

 onCreate: fungsi ini dipanggil saat aplikasi pertama kali dibuat. Fungsi oncreate biasanya
langsung berisi kode untuk membangun view(tatap muka) activity. Fungsi onStart langsung
dijalankan setelah fungsi onCreate selesai dijalankan
 onStart: fungsi ini dijalankan saat sebuah activity menjadi terlihat/ ditampilkan.

13 | P a g e
 onRestart: fungsi ini dijalankan jika perlu menampilkan activity kembali kepada user, fungsi
onStart akan langsung dijalankan setelahnya
 onResume: fungsi ini dijalankan saat activity muncul dan dapat berinteraksi dengan
pengguna
 onPause: fungsi ini dijalankan tepat saat activity dihilangkan, dan masuk kedalam
background. Secara otomatis android akan menjalankan fungsi ini saat aplikasi selesai
digunakan sehingga proses restart tidak memakan waktu lama.
 onStop: fungsi ini dijalankan saat system operasi ingin menghentikan activity, untuk kembali
membuka activity, perlu dipanggil onRestart
 onDestroy: fungsi ini dijalankan saat ingin mematikan aplikasi, sehingga penggunaan
memory dibersihkan dan activity selesai dijalankan.

Service Life Cycle

public abstract class Service {


public void onCreate();
public int onStartCommand(Intent intent, int flags, int startId);
public void onDestroy();
}

 onCreate: fungsi ini dijalankan saat service dibentuk


 onStartCommant: fungsi ini dijalankan secara otomatis setelah fungsi on create. Fungsi ini
juga dapat langsung dipanggil dari aplikasi sehingga dapat menjalankan kembali prosedur
yang sama setelah selesai.
 onDestroy: fungsi ini dijalankan saat sebuah service hendak dimatikan oleh android

14 | P a g e
15 | P a g e
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.

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

16 | P a g e
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 harus mengganti secara manual file xml.

Lakukan hal yang sama untuk textfield, ganti id dengan etNama

dan textview, ganti id dengan tvSalam.

17 | P a g e
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.

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

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

18 | P a g e
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.

19 | P a g e
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.

20 | P a g e
MODUL 3
Android Application Architecture
Abstract Kompetensi
Pengenalan konsep aplikasi android. Mahasiswa memahami konsep aplikasi
dalam android, serta mampu membuat
aplikasi sederhana.

Widget
Pada 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, property editor 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.

21 | P a g e
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.

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 /res sesuai dengan resolusinya

22 | P a g e
/[project]/res/drawable-ldpi

/[project]/res/drawable-mdpi

/[project]/res/drawable-hdpi

/[project]/res/drawable-xhdpi

/[project]/res/drawable-xxhdpi

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 atau resolusi rendah 120dpi (dot per
inch), mdpi untuk medium (160dpi) , hdpi untuk high density (240dpi) dan xhdpi untuk ekstra high
density (320dpi). Sedangkan xxhdpi untuk resolusi 480dpi. Saat ini sudah jarang device dengan
resolusi ldpi.

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 (mdpi sampai dengan xxhdpi). Hal ini untuk mencegah gambar yang digunakan terlihat
pecah atau terlalu kecil pada device dengan resolusi berbeda.

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

Pilih ic_launcher

23 | P a g e
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 teks pada button, dapat digunakan 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. Pada palette telah disediakan berbagai
jenis EditText, silahkan dicoba satu persatu dan perhatikan XML yang dihasilkan.

24 | P a g e
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.

Sedangkan XML-nya akan seperti ini, anda dapat langsung mengedit file XML ataupun melalui
window property. Jangan lupa atribut onClick:

25 | P a g e
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 ini button
Bogor
Banjarmasin
Bontang

Periksa Nilai

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
26 |menjawab
P a g e “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
27 | P a g e
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:

28 | P a g e
Latihan:
Buat soal berikut yang penggunanya hanya dapat memilih tepat satu:
--------------------------------------------------------------------------------
1. Sebutkan ibu kota propinsi Sulawesi Tenggara?
Samarinda
Kendari
Palu
Makasar ini button

Periksa Nilai
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

29 | P a g e
MODUL 4
Object dalam Android
Abstract Kompetensi
Pengenalan objek dalam android. Mahasiswa memahami dan mampu
menggunakan objek objek dalam
android.

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:

30 | P a g e
1. Pertama, buat project baru lalu pilih Composite dan tambahkan ListView di
activity_main.xml

2. Ganti id list view dengan “listAngka”

31 | P a g e
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:

32 | P a g e
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.

33 | P a g e
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

34 | P a g e
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)

Isi class DataAdapter adalah sebagai berikut. Pada method getView, parameter pos adalah indeks
baris. Perhatikan pengisian tvJudul dan tvKeterangan dengan data sesuai indeks.

35 | P a g e
Terakhir, di activity utama (MainActivity.java) tambahkan kode berikut:

Jika dijalankan, hasilnya akan seperti ini:

36 | P a g e
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.

Penanganan Click pada ListView


Listview sering digunakan untuk menampilkan data master-detail yang jika di tap barisnya akan
menampilkan detil pada layar terpisah. Listview juga dapat digunakan untuk menampilkan menu.

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.

37 | P a g e
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!

38 | P a g e
MODUL 5
Toast, Dialog, Log, dan Intent
Abstract Kompetensi
Menggunakan Toast, Dialog, Log, dan Mahasiswa memahami dan mampu
Intent untuk membuka aplikasi. menggunakan Toast atau Dialog.
Mahasiswa mampu menerapkan proses
logging untuk mencatat perilaku
aplikasi.
Mahasiswa mampu memanggil activity
baru dengan Intent.

Dialog
Seringkali app perlu menyampaikan pesan sementara kepada pengguna, misalnya jika menampilkan
informasi, melaporkan kesalahan atau memperlihatkan proses yang memakan waktu lama.

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.

39 | P a g e
40 | P a g e
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

Logging
Fitur logging digunakan untuk memberikan keterangan apa yang sedang terjadi pada app. Manfaat
utama fitur ini adalah untuk mendebug app.

Sebagai contoh, buka project yang pernah anda buat sebelumnya. Lalu pada bagian MainActivity
onCreate tambahkan log sebagai berikut. “yw” adalah tag dan dapat diganti dengan string apapun.

41 | P a g e
Buka tab logcat dan jalankan program

Terlihat banyak message di dalam logcat, untuk memfilternya sesuai dengan tag yang kita tentukan
sebelumnya, tambahkan filter (gambar bawah). Nama filter dapat diisi bebas.

Fitur filter yang lain adalah memfilter berdasarkan jenis lognya (verbose sampai dengan error),
terutama untuk jenis error.

42 | P a g e
Pada contoh diatas kita menggunakan Log.i (info), selain itu dapat digunakan method Log.v(),
Log.d(), log.w() dan Log.e() untuk verbose, debug, warn dan error.

Tips: untuk tag, dianjurkan menggunakan variabel yang ditempelkan di class activity (code dibawah)

public class MainActivity extends Activity {

private static final String TAG = "MainActivity";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Log.i(TAG,"program dimulai");

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.

43 | P a g e
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
langsung oleh launcher sedangkan intent.action.MAIN menyatakan activity ini adalah initial activity
tanpa data input dan tidak menghasilkan output.

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.

44 | P a g e
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)

45 | P a g e
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.

46 | P a g e
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.

47 | P a g e
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:

48 | P a g e
Jika dijalankan hasilnya sebagai berikut

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

49 | P a g e
MODUL 6
Activity Life Cycle
Abstract Kompetensi
Memahami penerapan activity life Mahasiswa memahami dan mampu
cycle. memanfaatkan activity life cycle dalam
membuat aplikasi android.

Activity Life Cycle


Pada contoh sebelumnya, kita telah menggunakan lebih dari satu activity. Setiap activity memiliki
siklus seperti gambar dibawah. Saat pertama kali dijalankan activty akan berada dalam status active.
Ketika user pindah app atau menjalankan activity lain maka status dapat berubah menjadi paused
atau stopped. Setelah itu app bisa kembali active (user membuka kembali) atau di-destroy oleh
Android (memori habis).

Kita dapat menangani setiap fase dari activity. Ini berguna misalnya untuk app game, pada saat
activity berubah dari active menjadi paused, maka game juga harus otomatis dipaused dan jika
activity di-kill oleh Android, maka state game perlu disimpan dan dikembalikan. Demikian juga untuk
app yang menggunakan sensor, koneksi dengan sensor perlu dilepaskan saat app di-pause atau
distop.

hilang fokus tapi masih visible


Active/Running Paused

sistem kekurangan memori

tidak visible

Destroyed sistem kekurangan memori Stopped

Saat activity di-pause, maka akan dipanggil onPause(). Ini artinya activity masih terlihat walaupun
cuma sebagian. Isi dari onPause tidak boleh terlalu berat, seperti menulis ke database karena akan
memperlambat proses transisi ke activity lain. Umumnya onPause digunakan untuk tiga hal:

50 | P a g e
menstop animasi atau aktivitas yang menggunakan banyak CPU; commit input dari user (misalnya
draft email); melepaskan system resources seperti sensor atau kamera.

Saat activity berubah dari pause menjadi stop, maka akan dipanggil onStop(). Pada method ini dapat
dilakukan komputasi yang kompleks untuk menyimpan state. Pada saat kondisi stop, activity sama
sekali tidak muncul di layar dan fokus sudah berada di app lain.

51 | P a g e
Jika app kembali aktif, maka akan dipanggil onResume(). Pada method ini lakukan proses untuk
mengembalikan kondisi app seperti semula (kebalikan dari onStop). Selain onResume, untuk state
stop ada event lain yang terlibat yaitu onRestart. Hubungan keduanya dapat dilihat pada gambar
bawah

diambil dari: http://developer.android.com/training/basics/activity-lifecycle/stopping.html

Dari gambar diatas, dapat dilihat urutan pada dari state stop menuju resumed urutannya adalah
OnRestart()  onStart()  onResume()

Contoh penggunaan onPause() dan onResume() dapat dilihat pada subbab mengenai sensor.

Simpan dan Load Activity State


Coba lihat project yang pernah anda buat sebelumnya, dalam setiap project, di method onCreate
dapat dilihat parameter bertipe Bundle.

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Parameter ini berisi objek yang menyimpan state activity seperti isi widget sehingga saat app masuk
ke pause/stop dan kemudian kembali, widget terisi kembali secara otomatis.

52 | P a g e
Kita dapat memanfaatkan Bundle ini untuk menyimpan variabel-variabel yang perlu dikembalikan
state-nya pada saat activity aktif kembali dari stop atau destroyed.

Contoh berikut akan lebih menjelaskan masalah ini, pertama buatlah app dengan dua button dan
satu textview. Saat button “simpan” diklik maka variabel nama dan skor akan terisi. Sedangkan saat
tombol “tampil” diklik maka isi variabel akan dicetak di TextView.

Layoutnya adalah sebagai berikut:

<Button
….
android:onClick="klikButtonTampil"
android:text="Tampil" />

<Button

android:onClick="klikButtonSimpan"
android:text="Simpan" />

Implementasi dua button di MainActivity adalah sebagai berikut.


String nama;
int skor;

public void klikButtonSimpan(View v) {


skor = 100;
nama = "budi martami";
}

public void klikButtonTampil(View v) {


TextView tv = (TextView) findViewById(R.id.textView1);
tv.setText("skor:"+skor+" nama: "+nama);
}

Coba jalankan program.

53 | P a g e
Klik simpan lalu klik tampil, maka hasilnya akan seperti ini:

Sekarang coba rotate screen (ctrl-F11). Proses rotate akan men-destroy activity dan mengcreate
ulang. Sekarang coba klik tampil (jangan klik simpan), efeknya akan seperti ini:

Bayangkan efeknya jika dengan merotate device semua variabel di activity hilang. Tentu saja asumsi
pengguna adalah proses rotate tidak akan merubah state dari activity. Ini juga berlaku misalnya saat
pengguna pindah ke activity lain dan kemudian kembali ke activity semula, mereka akan berharap
kondisi activity akan sama seperti sebelum ditinggalkan. Walaupun pada kenyataanya Android dapat
mendestroy activity yang ditinggalkan tersebut.

Untuk mengatasi ini, kita perlu meng-override dua method di MainActivity, pertama
onSaveInstanceState untuk menyimpan variabel dan kedua adalah onRestoreInstanceState untuk
mengembalikan state. Contoh kodenya adalah sebagai berikut:

54 | P a g e
@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
//simpan variabel
//method ini dipanggil sebelum onStop
savedInstanceState.putInt("state_skor", skor);
savedInstanceState.putString("state_nama", nama);

//jangan lupa panggil superclass


super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
// Restore nilai
skor = savedInstanceState.getInt("state_skor");
nama = savedInstanceState.getString("state_nama");
}

Jalankan dan perhatikan efeknya (simpan  tampil  rotate (ctrl-F11)  tampil). Maka variabel
akan tetap tersimpan.

Gambaran berikut memperlihatkan posisi dua method untuk menyimpan state:

Diambil dari http://developer.android.com/training/basics/activity-lifecycle/recreating.html

55 | P a g e
MODUL 7
Layout
Abstract Kompetensi
Memahami layout untuk penempatan Mahasiswa memahami dan mampu
objek dalam aplikasi android menggunakan layout untuk
membangun aplikasi android yang lebih
rapi.

Layout Manager
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:

56 | P a g e
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_above
 android:layout_below
 android:layout_toLeftOf
 android:layout_toRightOf.

Untuk mengatur posisi ada tambahan lima atribut: android: layout_alignTop,


android:layout_alignBottom, android:layout_alignLeft, android:layout_alignBaseline

57 | P a g e
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:

58 | P a g e
Silahkan bereksperimen dengan berbagai setting atribut layout.

59 | P a g e
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:

60 | P a g e
Hasilnya adalah sebagai berikut. Bayangkan sebagai sebuah tabel dengan dua kolom dan dua baris.

Kolom 0 Kolom 1

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

61 | P a g e
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 )

62 | P a g e
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.

63 | P a g e
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:layout_height="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.

64 | P a g e
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.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

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"

65 | P a g e
android:layout_height="wrap_content"

android:text="Large Text"

android:textAppearance="?android:attr/textAppearanceLarge" />
RelativeLayout didalam
LinearLayout. Didalamnya
<RelativeLayout ada dua button.

android:layout_width="match_parent"

android:layout_height="wrap_content"

>

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" Beberapa button agar scroll


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

66 | P a g e
android:text="Button" />

<Button

android:id="@+id/button6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button" />

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

67 | P a g e
Kombinasi Layout

Kita bisa mengkombinasikan beberapa layout dalam satu activity. Contoh berikut menggunakan
linearlayout yang memiliki dua anak yaitu relativelayout dan tablelayout.

Relative layout
dengan dua
TextView

TableLayout dengan
tiga kolom dan tiga
baris

68 | P a g e
Latihan Layout

Berdasarkan hasil latihan activity-intent, pada layar2 dan layar3, tambahkan layout yang
tepat agar tampilan widget rapi.

69 | P a g e

Anda mungkin juga menyukai