Tutorial Android Linear Layout di Android Studio

Hai hai, di tutorial kali ini aku mau menjelaskan lebih tentang apa itu Layout di Android. Pada tutorial sebelumnya aku udah pernah menjelaskan tentang cara menggunakan EditText, TextView, dan Button di Android. Nah, untuk kali ini aku mau menjelaskan tentang Layout, yaitu orang tua/parent dari elemen-elemen itu tadi. Bingung???

1. Buka Android Studio

Start New Android Studio project seperti biasa.

Start a New Android Studio Project

Beri nama project-mu dan pilih lokasi penyimpanan project.

Beri nama project-mu dan pilih lokasi penyimpanannya

Pilih minimum versi Android OS-nya, ini terserah kamu.

Pilih versi minimum OS Android

Pilih Empty Activity

Pilih Empty Activity, lalu Next, dan Finish

Seperti biasa, akan muncul project structure seperti ini

Project Structure

Seperti yang sudah pernah dijelaskan pada artikel sebelumnya, MainActivity ini adalah class Java yang meng-handle segala logic/process dari aplikasi kita. Sedangkan activity_main.xml adalah file XML yang berisikan User Interface (tampilan) yang akan ditampilkan di aplikasi kita. Kita akan fokus di activity_main.xml.

2. Buka activity_main.xml

Buka activity_main.xml dengan cara di klik 2x.

Tampilan activity_main.xml Design Mode

User Interface default yang diberikan adalah Constraint Layout yang didalamnya berisi elemen TextView (lihat di bagian Component Tree).

3. Apa itu Layout?

Layout adalah elemen yang berfungsi sebagai parent dari elemen lainnya.

Sekarang, misalnya kita mau menggambar sebuah persegi panjang. Untuk menggambar persegi panjang itu kita perlu bidang untuk menggambar, kan? Bidang untuk menggambar itu bisa jadi adalah secarik kertas. Nah, dalam hal ini secarik kertas itu sama dengan Layout. Jadi, di dalam kertas itu bisa kita gambarkan apa saja, begitu juga dengan Layout bisa kita isi dengan elemen apa saja.

4. Klik menu Layout pada palette Android Studio

Menu Layouts

Sekarang terlihat ada beberapa macam Layout disitu, ada Constraint, Grid, Frame, LinearLayout (Horizontal dan Vertical), Relative, Table, dan Fragment. Namun, sekarang kita akan fokus mempelajari LinearLayout terlebih dahulu.

5. Menggunakan Linear Layout

Apa itu LinearLayout?

LinearLayout adalah layout yang mengatur semua elemen didalamnya dalam satu arah, horizontal atau vertical.

Sekarang ganti ke Text Mode dengan cara klik tab TEXT yang ada di kiri bawah.

Text Mode pada activity_main.xml

Terlihat pada kode di atas itu TextView berada di dalam ConstraintLayout. Sekarang, ganti code android.support.constraint.ConstraintLayout ada baris atas itu menjadi LinearLayout, lalu tambahkan attribute android:orientation=”vertical”. Menjadi seperti berikut

Sekarang, TextView berada di dalam LinearLayout dengan orientation Vertical. Sekarang, coba copy-paste code elemen TextView itu sampai 5x.

Sekarang ganti menjadi Design Mode pada activity_main.xml, maka akan terlihat TextView tersusun seperti berikut

LinearLayout Vertical

5 buah TextView yang ada akan tersusun secara VERTICAL karena kita set orientation untuk LinearLayout nya menjadi vertical. Sekarang, kita coba ganti orientation LinearLayout-nya menjadi horizontal.

Maka susunan TextView menjadi seperti seperti ini :

LinearLayout Horizontal

Sekarang 5 buah TextView yang ada tersusun secara horizontal karena kita set orientation dari LinearLayout nya Horizontal.

6. Attribute Gravity LinearLayout

Sekarang ganti kembali orientation-nya menjadi vertical terlebih dahulu

Maka susunan TextView akan kembali seperti ini

Sekarang, bagaimana jika kita ingin susunan TextView tersebut menjadi ke tengah? Maka pada LinearLayout akan kita berikan attribute bernama android:gravity dan kita set menjadi center_horizontal.

Maka TextView akan ke tengah seperti ini

Android Gravity Center Horizontal

TextView akan berada di tengah secara horizontal, lalu jika kita ganti menjadi center_vertical

Maka susunan TextView akan menjadi seperti ini

TextView akan berada di tengah secara vertical. Lalu apabila kita set menjadi center (artinya adalah center secara vertical dan horizontal)

Maka akan menjadi seperti ini

7. Eksplorasi Sendiri

Sekarang coba kamu eksplorasi sendiri saja attribute-attribute yang ada, dengan cara klik pada LinearLayout hingga LinearLayout itu active, lalu di bagian kanan akan banyak sekali attribute yang muncul dan bisa kamu coba-coba dan lihat hasilnya

8. SELESAI!

Selesai sudah, jadi rangkuman dari tutorial kali ini adalah

1. Elemen-elemen yang ada (seperti TextView, EditText, Button, dll) itu ditaruh di dalam sebuah Layout. Dengan kata lain, Layout adalah parent dan elemen-elemen tadi itu adalah children.
2. Salah satu contoh Layout yang paling sering digunakan adalah LinearLayout.
3. LinearLayout memiliki orientation vertical dan horizontal, dimana orientation itu berpengaruh pada susunan children-nya.