Modul 4
Layout
Layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI
sebuah aktivitas atau widget aplikasi. Anda dapat mendeklarasikan layout dengan dua
cara:
Deklarasikan elemen UI dalam XML. Android menyediakan sebuah kosakata
XML sederhana yang sesuai dengan kelas dan subkelas View, seperti halnya untuk
widget dan layout.
Buat instance elemen layout saat waktu proses. Aplikasi Anda bisa membuat
objek View dan ViewGroup (dan memanipulasi propertinya) lewat program.
Kerangka kerja Android memberi Anda fleksibilitas untuk menggunakan salah satu atau
kedua metode ini guna mendeklarasikan dan mengelola UI aplikasi Anda. Misalnya,
Anda bisa mendeklarasikan layout default aplikasi Anda dalam XML, termasuk elemen-
elemen layar yang akan muncul di dalamnya dan di propertinya. Anda nanti bisa
menambahkan kode dalam aplikasi yang akan memodifikasi status objek layar,
termasuk yang dideklarasikan dalam XML, saat waktu proses.
Jenis - jenis dan fungsi Layout
1. Linear Layout
Linear Layout adalah layout yang menyejajarkan semua child view-nya dalam satu arah,
secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan
atribut android:orientation.
Semua anak LinearLayout akan ditumpuk satu sama lain, jadi daftar vertikal hanya akan
memiliki satu anak per baris, seberapa pun lebarnya, dan daftar horizontal hanya akan
setinggi satu baris (tinggi anak yang tertinggi, ditambah pengisi). LinearLayout akan
mengikuti margin antara anak dan gravity (sejajar kanan, tengah, atau kiri) setiap anak.
2. Relative Layout
Relative Layout adalah layout yang penataan nya ini adalah penataan yang menempatkan
widget-widget didalamnya seperti layer, sehingga sebuah widget dapat berada di atas/di
bawah widget lainnya atau dengan kata lain Relative merupakan layout yang penataannya
lebih bebas (Relative) sehingga bisa di tata di mana saja.
Jadi dapat diartikan bahwa Relative Layout adalah desain tampilan pada aplikasi dengan
tata letak objek atau komponen secara bebas tanpa aturan sesuai orientasi (horizontal atau
vertical) seperti yang diterapkan pada Linear Layout.
3. Constraint Layout
Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View
bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya.
Contohnya di Relative Layout kita bisa meletakkan sebuah View di atas, bawah, atau
samping View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout
menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint
Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.
Pada Constraint Layout, setiap View memiliki tali (Constraint) yang menarik tiap sisinya,
yang mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali tersebut wajib kita
“ikatkan” kepada anchor point atau suatu titik yang dapat berupa sisi dari Parent Layout,
View lain, ataupun titik bantu (helper) yang bisa kita buat sendiri.
4. Frame Layout
Frame Layout adalah Layout yang biasanya digunakan untuk membuat objek yang saling
bertindihan contohnya yaitu kita membuat button di atas image.
5. Table Layout
Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan
antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom. Table Layout terdiri
dari:
1. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang
dapat disimpan.
2. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis
kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.
Tag Table Layout
Beberapa tag pada Table Layout :
1. TableLayout : Tag pembuka untuk menggunakan TableLayout
2. TableRow : Tag untuk membuat Baris
Praktikum 1: Memasukkan gambar
Pada praktikum memasukkan gambar akan dipelajari bagaimana memasukkan gambar
menggunakan @drawable dengan memasukkan file gambar ke dalam resource.
Implementasi memasukkan gambar dengan penggunaan @drawable adalah sebagai
berikut:
1. Buatlah proyek baru pada android Studio
2. Siapkan image yang ingin dimasukkan
3. Copy image yang ingin dimasukkan
4. Langkah selanjutnya adalah expand res, lalu klik kanan pada folder drawable, pilih
show in explorer, paste gambar yang akan dimasukkan ke dalam folder drawable.
5. Masukkan kode seperti di bawah ini.
Ukuran gambar
` Tata letak gambar (silahkan
dicoba)
@drawable/(nama file
gambar yang ingin
dimasukkan sesuai dlm
folder drawable)
6. Lihat tampilan layout pada design tab
7. Untuk memberi jarak tiap elemen UI dapat menggunakan perintah :
android:layout_marginBottom="15dp"
Tugas
1. Buatlah Flowchart aplikasi yang akan anda kembangkan
2. Dari flowchart tersebut, buatlah Flow intent aplikasi
3. Buatlah UI dari aplikasi yang akan anda kembangkan
