Belajar Layouting Android

Relative Layout, Linear Layout, dan lainnya

https://material.io/guidelines/

Hai Devs!, kali ini kita akan belajar mengenai layouting pada Apps Android, yang memungkinkan kita untuk mengatur tatak letak widget — widget seperti, Button, Text, Image, dan lainnya. Extensible Markup Language atau yang biasa kita sebut XML ini memiliki syntax tersendiri. Dalam suatu elemen, dibatasi oleh tag </> dan didalam tag itu terdapat attribut -attribut yang mengatur elemen tersebut. Nah, contohnya seperti ini :

TextView , adalah nama elemen / widget

android : layout _width, layout_height, dan text , merupakan attribut dari Si TextView tersebut. Cukup Mudah, Kan?!

Pada bagian android:layout_width & android:layout_height, kita diberi 3 pilihan isi yakni :

wrap_content : menyesuaikan konten, isi dari elemen.

match_parent : ukurannya menyesuaikan dengan layout parent/container.

custom size : ukuran yg menggunakan satuan dp. Contoh : 4dp, 5dp, dst

Oke, Mantap kan?! Sekarang kita lanjut lagi, pada jenis — jenis layout container

1. Root Layout

Root Layout atau bisa juga kita sebut parent layout, Setiap kita membuat layout baru, harus ada root view di dalamnya. Biasanya root layout ditandai dengan adanya kode berikut

Root layout merupakan bagian penting dari layout, karena layout ini akan dijadikan parent untuk widget/elemen yang akan kita buat.

2. ViewGroup

ViewGroup terdiri dari layout parent dan child, yang kurang lebih gambarannya seperti ini

Gambar ini diambil dari : https://docs.google.com/document/d/1fIOac4vK0BReu7Or38ULhYIg4t1WtpRo68K_p_a4hJg/edit

Berdasarkan gambar diatas, berarti LinerLayout vertical sebagai parent memiliki 3 child. Kurang lebih seperti itu.

3. Linear Layout

Linear , line yang artinya garis. Dan garis itu ada yang vertical dan horizontal, berikut contohnya

Gambar ini diambil dari https://docs.google.com/document/d/1fIOac4vK0BReu7Or38ULhYIg4t1WtpRo68K_p_a4hJg/edit

Kalo dalam bentuk kode , contohnya seperti ini

Ini adalah tampilan LinearLayout(vertical)

Kalo yang Linear Layout (horizontal) contohnya seperti ini

LinearLayout (horizontal)

Adakah dari kita yang penasaran? Padahal layout_width dan height nya match_parent semua kok bisa tampilannya sama ukurannya? Nah, begini caranya kita memasukkan kode

Kode ini fungsinya sama seperti kita melakukan perbandingan antara satu widget dengan yang lainnya. Kalo kita buat perbandingannya sama otomatis ukuran semua widget akan nampak sama

4. RelativeLayout

Gambar ini diambil dari https://docs.google.com/document/d/1fIOac4vK0BReu7Or38ULhYIg4t1WtpRo68K_p_a4hJg/edit

Sama seperti namanya, layout ini mengatur tampilan berdasarkan kerelatifan. Kalo LinearLayout hanya sebatas tampilan vertical dan horizontal, maka Relative Layout bisa lebih dari itu. Relative disini berarti ya, sifatnya relatif baik itu antara child dengan parent ataupun child dengan child. Contoh kode yang menggunakan parent RelativeLayout

Nah, pasti berdasarkan kode diatas kita masih merasa asing sama attribut — attribut baru di relative layout seperti

android:layout_alignParentBottom=”true” (untuk memposisikan widget di bagian bawah parent)

android:layout_alignParentTop="true" (untuk memposisikan widget di bagian atas parent)

android:layout_alignParentRight="true" (untuk memposisikan widget di bagian kanan parent)

android:layout_alignParentLeft=”true” (untuk memposisikan widget di bagian kiri parent)

Dan masih banyak lagi.. seperti , layout_below (untuk memposisikan widget di bawah widget lain berdasarkan id), layout_above (untuk memposisikan widget di atas widget lain berdasarkan id ) , dan lainnya

5. Frame Layout

Kata orang, layout ini adalah layout yang paling sederhana. Konsepnya hanya tumpuk — menumpuk antara satu widget dengan widget yang lain.Biasanya frame layout ini digunakan pada layout yang hanya menampilkan satu widget saja seperti ListView, dan lainnya. Contoh ilustrasinya seperti ini

Gambar ini diambil dari https://docs.google.com/document/d/1fIOac4vK0BReu7Or38ULhYIg4t1WtpRo68K_p_a4hJg/edit

Selamat Mencoba dan Semoga Bermanfaat !

Untuk lebih lengkapnya silahkan kunjungi