Mengenal Linear Layout dan Cara Menggunakannya

Linear layout merupakan bagian dari view group, artinya linear layout berfungsi untuk menampung view lainnya(children). View yang berada di dalam linear layout akan tersusun secara berurutan dalam arah vertikal ataupun horizontal.

Untuk memahami lebih dalam mengenai linear layout, perhatikan kode dan gambar di bawah!

Vertikal

Dari kode di atas terdapat 3 text view yang disusun secara vertikal di dalam linear layout. Text view paling atas akan diletakkan pada posisi paling atas, kemudian text view berikutnya akan diletakkan di bawah text view yang pertama dst.

 

 

 

 

 

 

 

 

Horizontal

Jika orientationnya diset horizontal maka text view paling atas dalam kode akan diletakkan pada bagian paling kiri seperti gambar di samping. Lalu text view selanjutnya akan diletakkan disebelah kanan text view sebelumnya dst.

 

 

 

 

 

 

 

 

Penjelasan sederhana di atas semoga bisa sedikit memberikan gambaran bagaimana linear layout itu bekerja. Kemudian kita akan membahas beberapa hal yang dapat dilakukan dengan linear layout.

1. Orientation

Ini digunakan untuk menentukan arah susunan view yang berada di dalam linear layout. Terdapat 2 orientation yaitu vertical dan horizontal.

2. Gravity

Gravity digunakan untuk mengatur posisi view di dalamnya. Perhatikan kode dan gambar di bawah untuk lebih jelasnya.

right

Terlihat seperti gambar di samping, view di dalamnya akan mentok ke bagian kanan.

 

 

 

 

 

 

 

 

 

 

bottom

Jika gravity diatur menjadi bottom maka akan seperti :

center|right

Nilai dari gravity bisa lebih dari satu, contoh untuk nilai gravity center dan right.

Cara penulisannya :

center = center_vertical|center_horizontal

Untuk memposisikan view berada di tengah-tengah linear layout gunakanlah gravity center. Jika hanya ingin menempatkan view berada di tengah linear layout dalam horizontal saja maka gunakan center_horizontal dan jika ingin menempatkan view berada di tengah linear layout dalam vertikal maka gunakan center_vertical.

3. Divider

Di dalam linear layout kita bisa membuat divider atau pembatas antar view. Penempatan dividernya pun bisa diatur agar sesuai dengan keinginan. Sebelumnya diperlukan sebuah drawable sebagai bentuk dari dividernya.

Buat drawable baru dan beri nama divider_horizontal.

Dari kode di atas akan dibentuk sebuah drawable dengan bentuk rectangle berwarna oranye(#E55812) dan mempunyai lebar sebesar 5px. Kenapa hanya lebar yang kita beri nilai? Karena divider ini digunakan untuk memisahkan view dalam linear layout yang mempunyai orientasi horizontal, sehingga tingginya akan menyesuaikan tinggi dari linear layout.

Terlihat dari gambar di samping terdapat garis berwarna oranye sebagai pembatas antar view. Pembatas tersebut bisa diatur posisinya juga apakah mau di antara, di awal, di akhir ataupun bernilai lebih dari 1 seperti orientation.

 

 

 

 

 

 

 

 

 

Cara pengaturan letak divider menggunakan :

4. Weight dan WeightSum

Sejauh ini view yang dimasukkan ke dalam linear layout mempunyai nilai width dan height berupa wrap_content ataupun match_parent. Lalu bagaimana jika kita ingin membuat lebar atau tinggi dari view sebesar setengah dari lebar atau tinggi device atau dengan kata lain 50% dari lebar atau tinggi maksimal. Solusinya yaitu dengan Weight!

Perhatikan kode dan gambar berikut untuk cara penggunaannya.

50% 50%

Terlihat pada gambar di samping, lebar text view pertama dan text view kedua sebesar 50% dari lebar maksimal. Bagaimana kok bisa? Lihat pada kodenya. Nilai dari layout_width kita ganti dengan 0dp kemudian kita tambahkan layout_weight dengan nilai = 1.

 

 

 

 

 

 

 

 

Jika kita ingin membuat text view pertama lebih besar dari text view kedua kita bisa memperbesar nilai layout_weight-nya. Semisal text view pertama kita beri nilai 2 dan text view kedua nilainya tetap 1, hasilnya adalah :

Terlihat pada gambar di samping text view pertama lebih besar dari text view kedua. Jika dilakukan perhitungan dalam %, maka nilai dari text view pertama sebesar 66,6% dan text view kedua sebesar 33,3%. Angkat tersebut didapatkan dari nilai weight/total weight * 100%.
Text view pertama = 2/3 * 100% = 66,6%.
Text view kedua = 1/3 * 100% = 33,3%.

 

 

 

 

 

 

 

weightSum

Weight sum ini diset di bagian linear layoutnya. Fungsinya untuk menentukan nilai total maksimal weight. Kalau dari contoh sebelumnya nilai total weight kan dihitung dari jumlah total weight dari view-view yang berada di dalam linear layout. Namun jika kita set nilai weight sum pada linear layout maka total weight akan berpatokan dari nilai weight sum tersebut. Contoh :

Dari kode di atas nilai weight text view pertama sebesar 1 begitu juga text view kedua. Namun karena kita set weightSum dengan nilai 3 maka perhitungannya menjadi :

Text view pertama = 1/3 * 100% = 33,3%.

Text view kedua = 1/3 * 100% = 33,3%.

 

 

 

 

 

 

 

Mungkin cukup sekian penjelasan tentang linear layout. Jika ada yang masih belum paham atau mungkin ada beberapa hal lagi bisa dilakukan dengan linear layout, beritahu saya di kolom komentar. Terima kasih dan happy coding!