Mengenal Layout pada Aplikasi Android

Selain intent salah satu hal yang paling penting dan harus diperhatikan dalam membuat
aplikasi android adalah pengaturan layout aplikasi.

Pengaturan tata letak widget / komponen pada aplikasi android sangatlah penting.
Karena hal ini nantinya akan berhubungan dengan UI dan UX aplikasi yang kita buat.

Ada beberapa layout yang bisa kita gunakan untuk membangun User interface (UI) yang
menarik pengguna, diantaranya yaitu :

 Linear Layout
 Relative Layout
 Absolute Layout
 Frame Layout

1. Cara menggunakan Linear Layout pada Android Studio

Linear Layout merupakan layout yang berfungsi untuk menampilkan komponen-

komponen aplikasi contohnya : teks, tombol, gambar dan lainnya dengan
cara vertikal ataupun horizontal.

Kesederhanaan Linear Layout memudahkan penggunaan namun membatasi

fleksibilitasnya. Untuk aplikasi yang memiliki design tidak terlalu kompleks maka linear
layout sangat cocok untuk digunakan.

Page 1 of 7
Beberapa tag pada xml yang menggunakan Linear Layout, yaitu :

1) Tag Linear Layout

Pada saat kita membuat project baru menggunakan android studio default
layout yang digunakan adalah RelativeLayout.

Maka kita harus merubahnya menggunakan Tag LinearLayout yaitu tag

pembuka dari Linear Layout, juga harus dilengkap dengan layout_width dan
height jika tidak maka akan terjadi error. Untuk orientationnya sendiri
defaultnya horizontal.

2) Tag Orientation
Kita dapat mengatur orientasi untuk ditampilkan secara horisontal atau vertikal,
sehingga item muncul dalam satu kolom atau satu baris. Lengkapi kode diatas dengan
menambahkan tag :

Contoh penggunaan Tag Horizontal

Page 2 of 7
 Hasilnya :

Silahkan ubah menjadi orientasi vertikal seperti gambar di bawah ini

3) Tag layout Gravity

Tag gravity digunakan untuk mengatur tata letak komponen yang ada pada linear
layout. Contohnya :

Hasilnya :

Layout Gravity Center Layout Gravity Right

Page 3 of 7
 4) Tag Wight
Weight digunakan untuk memberikan bobot pada komponen layout. Contohnya
sebagai berikut :

Hasilnya :

2. Relative Layout pada Android

Relative Layout merupakan layout yang berfungsi untuk mengatur tata letak komponen
atau widget aplikasi android dengan cara relative (secara bebas) tidak hanya vertikal atau
horisontal saja seperti pada Linear Layout.

Relative Layout memungkinkan kita untuk memposisikan komponen mana saja yang kita
inginkan, sehingga dianggap sebagai layout yang paling fleksibel.

Karena alasan tersebut Relative layout menjadi layout yang paling banyak digunakan
setelah Linear Layout di Android.

Page 4 of 7
Tag-tag pada Relative layout :
Tag
android:layout_alignParentBottom
android:layout_alignParentTop
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_below
android:layout_above
android:layout_toLeftOf
android:layout_toRightOf
Contoh penggunaan Relative Layout
Page 5 of 7
Keterangan
Digunakan untuk menata letak komponen
(widget) di tepi paling bawah layar.
Digunakan untuk menata letak komponen
(widget) di tepi paling atas layar.
Digunakan untuk menata letak komponen
(widget) di tepi paling kiri layar.
Digunakan untuk menata letak komponen
(widget) di tepi paling kanan layar.
Digunakan untuk memposisikan
komponen (widget) di bawah komponen
(widget) yang lainnya.
Digunakan untuk memposisikan
komponen (widget) di atas komponen
(widget) yang lainnya.
Digunakan untuk memposisikan
komponen (widget) di sebelah kiri
komponen (widget) yang lainnya.
Digunakan untuk memposisikan
komponen (widget) di sebelah kanan
komponen (widget) yang lainnya.
 Hasilnya :

3. Table Layout

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan
antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom.

Layout ini digunakan untuk keperluan tertentu saja karena kebanyakan pembangunan
tampilan antar muka lebih sering memanfaatkan Relative Layout dan Linear Layout.

Contoh penggunaan table Layout

Page 6 of 7
4. Frame Layout

Sebelumnya kita telah mempelajari RelativeLayout, LinearLayout dan TableLayout

untuk merancang tampilan antar muka aplikasi android. Bagaimana jika kita harus
membuat beberapa UI seperti saling tumpang tindih (menumpuk) seperti contoh dibawah.
Ini tidak mungkin dilakukan dengan LinearLayout dan RelativeLayout.

FrameLayout adalah layout yang paling tepat untuk membuat beberapa UI saling
tumpang tindih. Contohnya kita dapat menyisipkan widget (tombol) ke dalam widget
lainya (gambar).

Contoh penggunaan :

Hasilnya :

Page 7 of 7