[Android][Layout][XML] Mengenal Teknik Layouting XML Pada Android Studio

Assalamu’alaikum wr.wb.

Pada kesempatan kali ini kita akan mengenal teknik layouting yang biasa digunakan dalam pembuatan aplikasi android. Teknik ini yang menentukan letak suatu objeck seperti tombol, gambar, dll. Oke langsung saja pada pembahasannya.

Layout adalah komponen dasar dalam pembentukan UI dan merupakan container utama untuk komponen-komponen lain pada tampilan aplikasi Android. Dalam satu tampilan aplikasi Android bisa terdapat lebih dari satu Layout dengan adanya sebuah file XML layout sebagai parent, dan dimungkinkan adanya nested layout dalam satu file UI XML. Penjelasan mengenai XML Layout dapat dibaca pada http://developer.android.com/guide/topics/ui/declaring-layout.html

Tedapat jenis-jenis layout pada android, berikut adalah jenis layout utama di Android :
1. Linearlayout
2. Relativelayout
3. Framelayout
4. Gridlayout

Dari layout utama diatas tentunya mempunyai perbedaan, kita akan bahasa dari jenis layout utama yaitu
1. Linearlayout

Akan menempatkan komponen-komponen didalamnya secara horizontal atau vertical (menyamping atau menurun). LinearLayout memiliki atribut weight untuk masing-masing child view yang terdapat didalam LinearLayout yang berguna untuk mengontrol porsi ukuran view secara Relatif dalam sebuah ruang (space) yang tersedia.

Berikut adalah contoh penggunakan Teknik Layouting dengan LinearLayout

Maka hasilnya akan seperti dibawah ini.

2. Relativelayout

Layout yang paling fleksibel dikarenakan posisi dari masing-masing komponen didalamnya dapat mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke batas layar.

Note: In platform version 17 and lower, RelativeLayout was affected by a measurement bug that could cause child views to be measured with incorrect MeasureSpec values. (See MeasureSpec.makeMeasureSpec for more details.) This was triggered when a RelativeLayout container was placed in a scrolling container, such as a ScrollView or HorizontalScrollView. If a custom view not equipped to properly measure with the MeasureSpec mode UNSPECIFIED was placed in a RelativeLayout, this would silently work anyway as RelativeLayout would pass a very large AT_MOST MeasureSpec instead.

Dalam penggunan RelativeLayout ini kita bisa mendrag and drop itemnya saja, septi gambar di bawah ini :

Untuk melihat kodingannya anda bisa mengklik text, maka seperti ini kodingannya:

4. FrameLayout

Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada didalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya (layering). Komponen yang paling pertama pada layout ini akan berada dibawah komponen-komponen diatasnya. Pada materi penggunaan fragment di materi sebelumnya, FrameLayout memiliki kemampuan untuk menjadi container untuk fragment-fragment didalam sebuah Activity. Berikut ilustrasi dari penggunaan FrameLayout terhadap child view yang dimiliki didalamnya.

Berikut adalah contoh penggunaan Framelayout:

5. Gridlayout

Diperkenalkan pada API level 14 (Android 4.o / Ice Cream Sandwich), layout ini akan memberikan kemudahan dengan mengakomodir komponen didalamnya ke dalam bentuk Grid (Kolom dan Baris). Dalam sebuah referensi, GridLayout merupakan komponen layout yang sangat flexibel dan dapat dimanfaatkan untuk menyederhanakan pembuatan Layout UI yang bersifat kompleks dan bersarang yang terdapat di komponen Layout lainnya.

untuk contoh penggunaannya seperti ini: