MODUL 2
LAYOUT ANDROID
Tujuan:
Setelah mempelajari materi ini diharapkan mahasiswa memiliki kemampuan untuk:
1) Memahami XML
2) Memahami Desain Layout Android (Linear Layout, Relative Layout, Table Layout,
Frame Layout, dan Scroll View)
1. XML (EXTENSIBLE MARKUP LANGUAGE)
Sebuah aplikasi android dibuat dari kombinasi XML dan JAVA. Biasanya, XML
digunakan untuk mengatur layout aplikasi sedangkan JAVA berperan sebagai pusat
[Link] platformnya konsep dasar dalam mengembangkan aplikasi adalah
bagaimana menampilkan informasi di layar, melakukan proses yang dibutuhkan dan
berpindah dari satu halaman ke halaman lain dengan atau tanpa data.
Dalam pemrograman Android menggunakanEclipse, untuk mendesain tampilan
antarmuka digunakan XML. Dalam membuat sebuah halaman dengan eclipse, otomatis akan
terbentuk dua buah file, file pertama adalah activity, berguna untuk menampung kode java
atau logika dari program (ber-ekstensi .java), file kedua adalah layout, berguna untuk
menampung kode xml sebagai desain dari halaman yang akan dibuat (ber-ekstensi .xml).
XML adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C
dalam hal membuat dokumen markup untuk keperluan pertukaran data antar sistem yang
beraneka ragam. XML merupakan kelanjutan dari HTML (HyperText Markup Language).
Contoh perintah XML :
Gambar 2.1. Contoh Perintah XML
1
2. DESAIN LAYOUT ANDROID
Tata letak tampilan dibagi menjadi beberapa macam. Diantaranya yang sering
digunakan yaitu Linear Layout, Relative Layout, Table Layout, Frame Layout, dan
Scroll View.
A. Linear Layout
Linear Layout akan menampilkan elemen-elemen View secara garis lurus, baik
vertical ataupun horizontal.
1) Buat project baru (FileNewAndroid Project).
2) Isikan pada kotak dialog project sebagai berikut:
Project Name: LinearLayout
Build Target: Android 2.2
Application Name: LinearLayout
Package Name: [Link]
Create Activity: LinearLayoutActivity
Min SDK Version 8
3) Buka file [Link] yang ada pada project (LinearLayout res layout
[Link]).
Gambar 2.2. File [Link]
4) Pada contoh pertama ini kita akan membuat Linear Layout secara horizontal. Ketikan
kode berikut pada file [Link] (Gambar 2.3).
2
Gambar 2.3. Kode Linear Layout 1
5) Jalankan project (Klik kanan Project “LinearLayout” Run As Android
Application) dan lihat hasilnya seperti (Gambar 2.4) berikut.
Gambar 2.4. Hasil Kode Linear Layout 1
3
6) Selanjutnya kita akan membuat Linear Layout secara vertical. Tambahkan kode berikut
pada kode [Link] sebelumnya.
Gambar 2.5. Kode Linear Layout 2
7) Jalankan kembali project (Klik kanan Project “LinearLayout” Run As Android
Application) dan lihat hasilnya seperti (Gambar 2.6) berikut.
Gambar 2.6. Hasil Kode Linear Layout 2
4
B. Relative Layout
RelativeLayout memungkinkan pengguna menyusun tata letak secara lebih leluasa.
Posisi setiap widget bisa diatur relatif pada widget yang lainnya (dibawah, atau disamping
widget sebelumnya). RelativeLayoutadalah cara terbaik untuk mendesain suatu interface.
1) Buat project baru (FileNewAndroid Project).
2) Isikan pada kotak dialog project sebagai berikut:
Project Name: RelativeLayout
Build Target: Android 2.2
Application Name: RelativeLayout
Package Name: [Link]
Create Activity: RelativeLayoutActivity
Min SDK Version 8
3) Ketikan kode berikut pada file [Link] yang ada pada project (RelativeLayout res
layout [Link]).
Gambar 2.7. Kode Relative Layout
5
4) Jalankan project (Klik kanan Project “RelativeLayout” Run As Android
Application) dan lihat hasilnya seperti (Gambar 2.8) berikut.
Gambar 2.8. Hasil Kode Relative Layout
C. Table Layout
TableLayout adalah tampilan yang disusun berdasarkan baris dan kolom. Biasanya,
TableLayout terdiri dari beberapa TableRow. Didalam TableRow inilah terdapat field-field
yang nantinya terlihat sebagai kolom.
1) Buat project baru (FileNewAndroid Project).
2) Isikan pada kotak dialog project sebagai berikut:
Project Name: TableLayout
Build Target: Android 2.2
Application Name: Tampilan Table Layout
Package Name: [Link]
Create Activity: TableLayoutActivity
Min SDK Version 8
3) Ketikan kode berikut pada file [Link] yang ada pada project (TableLayout res
layout [Link]).
6
Gambar 2.9. Kode Table Layout
4) Jalankan project (Klik kanan Project “TableLayout” Run As Android
Application) dan lihat hasilnya seperti (Gambar 2.10) berikut.
Gambar 2.10. Hasil Kode Table Layout
7
D. Frame Layout
FrameLayout adalah jenis layout yang dibuat atau di rancang untuk menyisipkan
widget ke dalam widget lainya. Contoh widget TextView (Contoh Text Satu) ada di dalam
widget TextView yang kedua (Contoh Text Dua). Widget yang diletakan di akhir akan
berada di posisi widget sebelumnya.
1) Buat project baru (FileNewAndroid Project).
2) Isikan pada kotak dialog project sebagai berikut:
Project Name: FrameLayout
Build Target: Android 2.2
Application Name: Tampilan Frame Layout
Package Name: [Link]
Create Activity: FrameLayoutActivity
Min SDK Version 8
3) Ketikan kode berikut pada file [Link] yang ada pada project (FrameLayout res
layout [Link]).
Gambar 2.11. Kode Frame Layout
8
4) Jalankan project (Klik kanan Project “FrameLayout” Run As Android
Application) dan lihat hasilnya seperti (Gambar 2.12) berikut.
Gambar 2.12. Hasil Kode Frame Layout
E. Scroll View
ScrollView adalah salah satu jenis komponen yang digunakan pada user interface
di [Link]. ScrollView berbeda dengan LinearLayout dan RelativeLayout, ScrollView
berfungsi untuk memuat suatu layar agar dapat ditampilkan secara penuh, serta akan
menambahkan scrollbar di pojok kanan layar.
1) Buat project baru (FileNewAndroid Project).
2) Isikan pada kotak dialog project sebagai berikut:
Project Name: ScrollView
Build Target: Android 2.2
Application Name: Tampilan Scroll View
Package Name: [Link]
Create Activity: ScrollViewActivity
Min SDK Version 8
3) Ketikan kode berikut pada file [Link] yang ada pada project (ScrollView res
layout [Link]).
9
Gambar 2.13. Kode Scroll View
10
4) Jalankan project (Klik kanan Project “ScrollView” Run As Android Application)
dan lihat hasilnya seperti (Gambar 2.14) berikut.
Gambar 2.14. Hasil Kode Scroll View
3. Materi Latihan (Layout Android)
11
Buatlah desain layout seperti tampilan dibawah (Gambar 2.15) menggunakan desain
relative layout dan table layout.
Gambar 2.15. Materi Latihan
12