Module III.

Layout
A. Tujuan
Agar mahasiswa dapat memahami konsep Layout dalam android.
B. Bahan
1. Software Android Studio
2. Koneksi Internet
3. Smartphone
C. Teori
Dalam membuat aplikasi Android, salah satu komponen penting adalah layout
aplikasi. Pada praktikum ini akan diperkenalkan dua jenis layout : 1.
LinearLayout dan 2. RelativeLayout. Layout di Android ditulis menggunakan
XML.

LinearLayout
LinearLayout adalah sekelompok tampilan yang menyejajarkan semua
komponen dalam satu arah, secara vertikal atau horizontal. Juga bisa ditetapkan
arah layout dengan atribut.
Semua komponen LinearLayout akan
ditumpuk satu sama lain, jadi daftar
vertikal hanya akan memiliki satu
komponen per baris, seberapa pun
lebarnya, dan daftar horizontal hanya
akan setinggi satu baris (tinggi
komponen yang tertinggi, ditambah
pengisi). LinearLayout akan
mengikuti margin antara komponen
dan gravity (sejajar kanan, tengah,
atau kiri) setiap komponen
Contoh LinearLayout

Bobot Layout
LinearLayout juga mendukung penetapan bobot ke masing-masing komponen
dengan atribut android:layout_weight. Atribut ini menetapkan nilai "penting"
ke sebuah tampilan dalam arti seberapa banyak ruang yang akan ditempatinya
di layar. Nilai bobot yang lebih besar memungkinkannya diperluas untuk
mengisi ruang yang tersisa di tampilan induk. Tampilan komponen bisa
menetapkan nilai bobot, kemudian ruang yang tersisa dalam kelompok tampilan
diberikan ke komponen dalam proporsi bobot yang dideklarasikan untuk
mereka. Bobot default adalah nol.
Misalnya, jika ada tiga bidang teks dan dua di antaranya mendeklarasikan bobot
1, sementara yang lain tidak diberikan bobot, bidang teks ketiga yang tanpa
bobot tidak akan membesar dan hanya akan menempati area yang diperlukan
oleh materinya. Dua bidang lainnya akan diperluas secara seimbang untuk
mengisi ruang yang tersisa setelah ketiga bidang diukur. Jika bidang ketiga
kemudian diberikan bobot 2 (sebagai ganti 0), maka ia kini dideklarasikan lebih
penting daripada kedua bidang lainnya, jadi ia mendapatkan setengah jumlah
ruang yang tersisa, sedangkan dua yang pertama akan berbagi sisanya secara
seimbang

Contoh LinearLayout dengan Bobot.

<?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:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/to" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/subject" />
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="@string/message" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/send" />
</LinearLayout>

RelativeLayout
RelativeLayout adalah kelompok tampilan yang menampilkan tampilan
komponen dalam posisi relatif. Posisi masing-masing tampilan dapat ditentukan
sebagai relatif terhadap elemen yang lain (seperti di sebelah kiri atau di bawah
tampilan lain) atau pada posisi relatif terhadap area RelativeLayout induk
(seperti sejajar dengan bagian bawah, kiri atau tengah).
Layout ini sifatnya sangat flexible, yang memperbolehkan kita untuk
meletakkan komponen layout dimana saja, jika ditahu posisi “relative” dari
komponen terdekat.
RelativeLayout adalah utilitas yang sangat mumpuni untuk merancang
antarmuka pengguna karena dapat menghilangkan kelompok tampilan
bersarang dan menjaga hierarki tata letak tetap datar, yang meningkatkan
 kinerja. Jika ditemukan layout
menggunakan beberapa kelompok
LinearLayout bersarang, sebagai
alternatif bisa diganti dengan
RelativeLayout tunggal
Contoh LinearLayout

Tampilan posisi
RelativeLayout memungkinkan pandangan anak menentukan posisi mereka
relatif terhadap tampilan induk atau satu sama lain (ditentukan oleh ID). Jadi
bisa diselaraskan dua elemen dengan batas kanan, atau membuat satu di bawah
yang lain, berpusat di layar, terpusat di kiri, dan sebagainya. Secara default,
semua tampilan anak digambar di bagian kiri atas tata letak, jadi harus
ditentukan posisi setiap tampilan menggunakan berbagai properti tata letak
yang tersedia dari RelativeLayout.LayoutParams .
Beberapa dari banyak properti tata letak yang tersedia untuk dilihat di
RelativeLayout meliputi:
android:layout_alignParentTop
Jika "true" , buat tepi atas tampilan ini sesuai dengan tepi atas orang tua.
android:layout_centerVertical
Jika "true" , pusatkan anak ini secara vertikal di dalam orang tuanya.
android:layout_below
Posisi tepi atas tampilan ini di bawah tampilan yang ditentukan dengan ID
sumber daya.
android:layout_toRightOf
Posisi tepi kiri tampilan ini di sebelah kanan tampilan yang ditentukan
dengan ID sumber daya.
Ini hanya beberapa contoh saja. Semua atribut layout didokumentasikan
di RelativeLayout.LayoutParams .
Nilai untuk setiap properti tata letak adalah boolean untuk memungkinkan
posisi tata letak relatif terhadap RelativeLayout induk atau ID yang merujuk
pandangan lain pada tata letak yang dengannya pandangan harus diposisikan.
Dalam tata letak XML, ketergantungan terhadap tampilan lain dalam tata letak
dapat dinyatakan dalam urutan apa pun. Misalnya, dapat dinyatakan bahwa
"view1" diposisikan di bawah "view2" meskipun "view2" adalah tampilan
terakhir yang dideklarasikan dalam hierarki. Contoh di bawah ini menunjukkan
skenario seperti itu
 Contoh
Masing-masing atribut yang mengendalikan posisi relatif setiap tampilan.
<? xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
android: paddingLeft = "16dp"
android: paddingRight = "16dp">
<EditText
android: id = "@ + id / nama"
android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: hint = "@ string / pengingat" />
<Spinner
android: id = "@ + id / tanggal"
android: layout_width = "0dp"
android: layout_height = "wrap_content"
android: layout_below = "@ id / nama"
android: layout_alignParentLeft = "benar"
android: layout_toLeftOf = "@ + id / times" />
<Spinner
android: id = "@ id / kali"
android: layout_width = "96dp"
android: layout_height = "wrap_content"
android: layout_below = "@ id / nama"
android: layout_alignParentRight = "true" />
<Tombol
android: layout_width = "96dp"
android: layout_height = "wrap_content"
android: layout_below = "@ id / kali"
android: layout_alignParentRight = "benar"
android: text = "@ string / done" />
</ RelativeLayout>

Untuk detail tentang semua atribut tata letak yang tersedia untuk setiap tampilan
anak dari RelativeLayout , lihat RelativeLayout.LayoutParams .

Perbedaan LinearLayout dengan RelativeLayout

Perbedaan LinearLayout dengan RelativeLayout adalah kalau LinearLayout tidak
bisa menaruh posisi komponen di sembarang tempat, karena penempatan
komponen pada LinearLayout sudah diatur dengan yang namanya orientation,
yaitu semacam arah susunan dari LinearLayout tersebut.
D. Praktikum

LinearLayout :
Pada praktikum ini akan dibuat dua buah LinearLayout yang berisi tiga Button,
di LinearLayout pertama yang akan diset orientation ke vertical, sedangkan di
LinearLayout kedua akan diset orientationnya horizontal.
Pertama-tama, seperti biasa buatlah project baru di Android Studio terlebih
dahulu, Setelah itu dibuka file activity_main.xml, dan copy paste kan kode
berikut :

<?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:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:text="Linear Layout orientation Vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button 1" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button 2" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button 3" />
</LinearLayout>

<TextView
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
android:text="Linear Layout orientation Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button 1" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button 2" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>

Pada kode XML di atas, kiranya sudah menjelaskan contoh orientation pada
LinearLayout. Dan dalam Android bisa dimasukkan LinearLayout di dalam
LinearLayout, begitu juga RelativeLayout, atau pun RelativeLayout di dalam
LinearLayout dan sebaliknya.

RelativeLayout :
Pada RelativeLayout, bisa digunakan atribut seperti, above, below, left dan right
untuk mengatur posisi dari suatu komponen layout. Contohnya tampilkan
button1 dibawah button2, atau tampilkan button3 di sebelah kanan button1
dan semacamnya.
RelativeLayout digunakan untuk mendesain halaman layout yang kompleks.
Pertama, buatlah project aplikasi baru di Android Studio.
Setelah itu, buka file activity_main.xml dan masukkan kode seperti di bawah
ini, kode di bawah ini sudah cukup menjelaskan dimana komponen-komponen
diletakkan pada RelativeLayout :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:src="@mipmap/ic_launcher"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:id="@+id/iv_profpic"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<EditText
 android:id="@+id/et_chat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@id/iv_profpic"
android:hint="Masukkan pesan ..." />

<Button
android:id="@+id/bt_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignRight="@id/et_chat"
android:text="Submit" />

<TextView
android:id="@+id/tv_chat2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/bt_submit"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:background="@color/colorPrimary"
android:padding="10dp"
android:text="Hei juga, kabar baik !" />

<TextView
android:id="@+id/tv_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/tv_chat2"
android:layout_margin="10dp"
android:background="@color/colorAccent"
android:padding="10dp"
android:text="Haloo, apa kabar?" />

</RelativeLayout>

Penjelasan :
Intinya dalam menggunakan RelativeLayout ada beberapa kata kunci atribut
pada komponen yang harus diingat :
android:layout_toRightOf :
untuk memposisikan komponen ini, di sebelah kanan komponen lain
android:layout_toLeftOf :
untuk memposisikan komponen ini, di sebelah kiri komponen lain
android:layout_above :
untuk memposisikan komponen ini, di atas komponen lain
android:layout_below :
 untuk memposisikan komponen ini, di bawah komponen lain
Kemudian selain itu, bisa digunakan keyword parent untuk mendefinisikan
posisi absolut dari sebuah komponen di dalam RelativeLayout, seperti :
android:layout_alignParentRight :
berfungsi untuk memposisikan komponen di tepi paling kanan layar.
android:layout_alignParentLeft :
berfungsi untuk memposisikan komponen di tepi paling kiri layar.
android:layout_alignParentTop :
berfungsi untuk memposisikan komponen di tepi paling atas layar.
android:layout_alignParentBottom :
berfungsi untuk memposisikan komponen di tepi paling bawah layar.
Dan berbeda dengan atribut above, left, atau right, atribut parent bernilai
true atau false. Dimana jika diset true maka otomatis komponen itu akan
diletakkan pada tepi yang dimaksud, dan dapat menjadi semacam parent/anchor
untuk meletakkan komponen lainnya secara relative terhadap komponen parent
tersebut.
E. Tugas
F. Pustaka
https://developer.android.com/guide/topics/ui/layout/