Now Reading
Pengenalan Linear Layout

Sangat sering sekali linear layout digunakan untuk membuat design interface. Karena kemudahan penggunaannya searah dengan koordinat x dan y

Hi guys,

Udah lama nih, apa kabar? Semoga kita selalu sehat dan tetep bisa coding. hehe

Okeh, kali ini saya akan mencoba mengenalkan beberapa dasar mengenai layout yakni Linear Layout. Saya akan mencoba memperlihatkan gimana sih menggunakan linear layout. Linear layout sangat sering digunakan di dalam membuat tampilan interface android seperti pada facebook, instagram, pinterest dll.

 

1. Apa itu Linear Layout?

 

Linear yang dalam arti harfiah nya merupakan garis lurus. Yup berarti kita bisa membuat tampilan interface mengikuti garis lurus. Kalo dari penjelasan di dokumentasi google nya

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.

All children of a LinearLayout are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity(right, center, or left alignment) of each child.”

Jadi katanya semua object yang ada di dalam linear layout akan membuat satu arah secara vertikal atau horizontal. Setiap object tersebut akan bertumpuk satu sama lain. Dan di setiap arah tumpukan baik horizontal dan vertical hanya akan ada satu object.

Mari kita lihat gambar dibawah ini.

 

 

 

 

 

 

 

Gambar diatas memiliki tiga kotak biru yang mana bertumpuk secara horizontal dengan posisi tumpu dari arah sebelah kiri. Mode horizontal linear layout akan selalu di mulai dari sebelah kiri. Sedangkan untuk versi vertikal, posisi tumpu akan dimulai dari atas menuju ke bawah.

 

2. Penggunaan Linear Layout dengan XML

 

Setelah memahami penjelasan mengenai linear layout, mari kita mencoba membuat layoutnya. Disini kita akan menggunakan xml dalam pembuatan layout android dan menggunakan bantuan android studio.

Di dalam android studio sudah tersedia lengkap konfigurasi-konfigurasi lengkap untuk melakukan layouting dan kita bisa langsung melakukan preview terhadap layout yang kita gunakan. Pertama saya asumsikan kalian sudah memiliki projek android di android studio, baik yang baru atau yang sudah ada.

2.1 Berikut struktur projek yang saya miliki.

 

 

 

 

 

 

 

 

 

2.2 Membuat layout XML

Untuk membuat layout kita hanya perlu melakukan klik kanan pada folder layout, lalu pilih New -> XML -> Layout XML File. Seperti dibawah ini

 

 

 

 

 

 

 

 

 

2.3 Penamaan file layout

 

 

 

 

 

 

 

 

 

Beri nama pada file tersebut, disini saya beri nama tampilan_linear. Untuk penamaan file xml diharuskan menggunakan huruf kecil semua (lower case) dan untuk humanize readability pemisahan kata satu dengan kata yang lain menggunakan underscore. Lalu klik finish. Setelah itu akan muncul satu file baru dengan nama tampilan_linear.xml di dalam folder layout. Dan kamu akan disajikan satu tampilan layar android bersih yang menampilkan design layout.

 

2.4 Mendesign layout

 

 

 

 

 

 

 

 

Perhatikan disini ada dua gambar yang digunakan untuk layouting. Yang sebelah kiri digunakan untuk preview tampilan dari layout yang kita buat. Sedangkan yang disebelah kanan kode layout yang dibuat di dalam xml. Kita bisa membuat layout dengan kedua cara diatas, langsung dengan tampilan dan property-property di android atau langsung melakukan coding di kode xml.

Baik, kita langsung saja mendesign

 

3. Mendesign Linear Layout

 

Untuk mendesign layout ada beberapa elemen di android studio yang bisa kamu gunakan agar design yang kamu buat cukup dengan melakukan drag and drop. Diantaranya ada pallet yang berisi semua elemen-elemen yang bisa kamu gunakan untuk membuat tampilan di android.

 

 

 

 

 

 

 

Lalu ada component tree, dimana disini kita diberikan hirarki dari list layout dan elemen yang kita buat dari root sampai ke depan.

 

 

 

 

 

Terakhir ada properties, yang digunakan untuk menkonfigurasi atribut dari elemen-elemen layout yang digunakan. Misalkan padding, margin dll.

 

 

 

 

 

 

 

 

Saya akan mencoba mendemokan cara-cara layout dengan linear. Langsung saja

 

3.1 Orientasi Horizontal

Untuk memahami apa itu orientasi horizontal, kita lihat gambar berikut dan xml yang digunakan. Untuk mendemokannya saya hanya akan menggunakan object button saja.

 

 

 

 

 

 

 

 

 

 

Dengan membuat orientasi horizontal di linear layout, maka button yang kita buat akan berjejer ke sebelah kanan. Berikut langkah-langkah pembuatannya.

  1. Buka tampilan design
  2. Pilih Linear Layout di component tree
  3. Lalu pilih di properties, akan ada menu orientation dan pilih horizontal
  4. Setelah itu drag and drop button di pallete ke dalam screen sebanyak 4 buah. Maka akan muncul tampilan seperti di atas

Cukup mudah bukan. 🙂

 

3.2 Orientasi Vertikal

Orientasi vertikal tidak terlalu berbeda dengan horizontal hanya berbeda arah, dari atas ke bawah.

 

 

 

 

 

 

 

 

 

 

Untuk membuat nya kamu hanya tinggal mengganti properti orientation horizontal tadi menjadi vertical di properti Linear Layout. Sehingga menjadi seperti gambar di atas.

Easy right? 🙂

 

3.3 Wrap Content, Match Parent dan Custom

Ada dua istilah dalam membuat ukuran layout. Kita bisa membuat ukuran elemen di dalam android sesuai keinginan kita. Wrap Content digunakan jika ukuran layout elemen yang ingin dibuat mengikuti isi dari content di dalam layout.

 

 

 

 

 

 

 

 

 

 

Perhatikan dua button diatas. Panjang masing-masing berbeda mengikuti isi dari teks yang dimasukan karena menggunakan wrap content.

Mari kita lihat apa yang terjadi jika kita menggunakan match parent.

 

 

 

 

 

 

 

 

 

 

Ukuran button akan sama panjang dan memenuhi layar (container) walaupun isi konten memiliki panjang yang berbeda.

Lalu kita pun bisa membuat custom untuk lebar dan tingginya dengan ukuran density (dp).

 

 

 

 

 

 

 

 

 

 

Disini saya memasukan lebar button diatas dengan 300dp sedangkan yang dibawah dengan 200dp. Sehingga sebanyak apapun kontennya tetap akan mengikuti ukuran custom lebar layout kita.

 

3.4 Weighting Layout

Oke terakhir di dalam Linear layout yang sering kita gunakan adalah menggunakan weight properties. Weight properti ini digunakan agar elemen-elemen yang dibuat di dalam linear layout ukuran lebar atau tinggi nya proprosional atau sama persis satu dan lainnya. Mari kita lihat

 

 

 

 

 

 

 

 

 

 

Keempat button diatas memiliki panjang yang sama untuk orientasi horizontal. Bagaimana caranya? Tentunya dengan menggunakan weight. Langkah nya sebagai berikut

  1. Pertama set linear layout dengan width match parent dan set sebagai orientasi horizontal
  2. Lalu masukan properti weightSum sebanyak 4
  3. Setelah itu baru masukan 4 button
  4. Pada masing-masing button, set width dengan 0dp
  5. Lalu pada masing-masing button tambahkan property layout_weight=”1″

 

XML yang dibuat kurang lebih akan seperti berikut

 

Maka kamu akan mendapat button dengan panjang yang proporsional. Begitu pun dengan orientasi vertikal, kamu akan mendapat button yang proporsional ke bawah.

 

Oke guys, sekian tutorial mengenai Linear Layout. Mudah sekali bukan. 🙂

Dengan memahami dasar-dasar layout kamu bisa membuat aplikasi yang sangat keren.

Have a nice day. Cheers

Happy Coding

🙂

 

 

 ** credit photo

Photo by Martin Sanchez on Unsplash

What's your reaction?
Love It
0%
Like It
0%
Want It
0%
Had It
0%
Hated It
0%
About The Author
Tech Atmosphere
Enjoy Tech