Belajar Android : Perbedaan Layout Linear, Relative dan Constraint

Setiap aplikasi Android yang kamu buka tersusun dari tombol, teks, gambar, dan kolom input yang tertata rapi di layar. Susunan inilah yang disebut layout. Kalau dapur punya tata letak kompor, wajan, dan rak bumbu supaya enak dipakai memasak, aplikasi punya layout supaya enak dipakai pengguna.

Di Android, layout ditulis dalam file XML yang disimpan di folder res/layout. Setiap komponen tampilan disebut view: TextView untuk teks, Button untuk tombol, EditText untuk kolom input, dan seterusnya. Tugas layout adalah mengatur di mana tiap view duduk dan seberapa besar ukurannya, memakai satuan dp (density-independent pixel) supaya tampil konsisten di HP kecil maupun besar.

Ada tiga layout klasik yang wajib kamu kenal: LinearLayout, RelativeLayout, dan ConstraintLayout. Ketiganya masih valid sampai hari ini, tapi zaman sudah berubah. Artikel ini membahas ketiganya satu per satu, lalu ditutup dengan rekomendasi mana yang sebaiknya kamu pakai di proyek baru.

Persiapan Singkat

Sebelum mulai, buat proyek baru di Android Studio. Saat artikel ini ditulis, versi stabilnya adalah Android Studio Quail (2026.1.x). Pilih template Empty Activity, isi nama proyek misalnya LatihanLayout, pilih bahasa Kotlin, dan set Minimum SDK ke API 26 (Android 8.0). API 15 yang dipakai tutorial-tutorial lama sudah lama mati, jadi jangan dipakai lagi. Setelah proyek terbuka, buka file res/layout/activity_main.xml. Di sanalah kita bereksperimen.

Untuk menjalankan contoh di artikel ini, kamu butuh emulator atau HP fisik. Emulator bisa dibuat dari menu Tools lalu Device Manager di Android Studio: pilih perangkat misalnya Pixel, lalu pilih system image terbaru yang tersedia. Kalau memakai HP fisik, aktifkan Developer Options dan USB Debugging, colok kabel USB, dan setujui koneksinya saat Android Studio bertanya. Cara tercepat belajar layout memang mengubah-ubah XML lalu menekan tombol Run dan melihat hasilnya langsung.

Atribut yang Sering Dipakai di Semua Layout

Sebelum masuk ke tiga jenis layout, ada beberapa atribut yang muncul di mana-mana dan wajib kamu hafal polanya:

• android:id: memberi nama pada sebuah view supaya bisa dipanggil dari kode Kotlin atau diacu view lain, contohnya android:id="@+id/judul".
• android:layout_margin: jarak di luar view (antara view dengan tetangganya), sedangkan android:padding: jarak di dalam view (antara tepi view dengan isinya).
• android:visibility: mengatur apakah view terlihat (visible), tak terlihat tapi tetap memakan tempat (invisible), atau hilang total seolah tidak ada (gone).
• android:gravity mengatur posisi isi di dalam view, sedangkan android:layout_gravity mengatur posisi view itu sendiri di dalam induknya. Keduanya sering tertukar, jadi hafalkan bedanya.
• android:background: memberi warna atau gambar latar pada view, misalnya android:background="#FF6B35".

Dengan lima atribut ini saja, kamu sudah bisa merapikan tampilan jauh lebih baik. Sekarang mari kenalan dengan tiga layout utamanya.

1. LinearLayout: Susun Sejajar Seperti Antrian

LinearLayout menyusun view anaknya satu per satu dalam satu arah: dari atas ke bawah (vertical) atau dari kiri ke kanan (horizontal). Bayangkan orang antre: rapi, berurutan, tidak ada yang menyerobot. Contoh susunan vertikal:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nama" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Ketik namamu" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kirim" />
</LinearLayout>

Ganti android:orientation menjadi horizontal, dan ketiga view tadi langsung berjajar ke samping. Dua atribut yang selalu muncul di setiap view adalah layout_width dan layout_height: match_parent artinya selebar atau setinggi induknya, sedangkan wrap_content artinya menyesuaikan isi. Untuk susunan horizontal, ada trik layout_weight supaya view berbagi ruang sisa secara proporsional:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Batal" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Simpan" />
</LinearLayout>

Kelebihan LinearLayout adalah kesederhanaan. Susunannya tidak gampang rusak saat dibuka di layar berukuran beda. Kelemahannya muncul saat desainnya kompleks: kamu terpaksa menumpuk LinearLayout di dalam LinearLayout (disebut nested), dan tumpukan yang dalam membuat proses menggambar layar lebih lambat.

Aturan praktisnya: pakai LinearLayout untuk susunan sederhana seperti daftar vertikal atau deretan tombol. Kalau kamu sudah butuh lebih dari dua lapis tumpukan, itu tanda sebaiknya pindah ke ConstraintLayout.

2. RelativeLayout: Posisi Ditentukan Tetangga

RelativeLayout membebaskanmu menaruh view di mana saja, asal posisinya dijelaskan relatif terhadap view lain atau terhadap induknya. Nama atributnya gampang ditebak: layout_below menaruh view di bawah view lain, layout_toEndOf menaruhnya di samping, layout_alignParentBottom menempelkannya ke bawah layar.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/judul"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Halo" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/judul"
        android:layout_marginTop="12dp"
        android:text="Lanjut" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Catatan kaki" />
</RelativeLayout>

Satu hal yang sering bikin pemula bingung: kalau kamu tidak menulis aturan posisi sama sekali, semua view akan menumpuk di pojok kiri atas. Jadi di RelativeLayout, setiap view wajib punya aturan posisi yang jelas, kalau tidak hasilnya tumpukan berantakan.

RelativeLayout menghasilkan struktur yang datar tanpa perlu nesting, itu kelebihannya. Tapi kekurangannya cukup terasa: aturan yang banyak bikin file XML susah dibaca, dan tampilannya gampang berantakan di layar dengan ukuran berbeda. Google pun sudah lama tidak mengembangkannya lagi. Kamu cukup memahaminya untuk membaca kode lama, bukan untuk dipakai di proyek baru.

3. ConstraintLayout: Standar Modern

ConstraintLayout adalah layout bawaan di template proyek baru Android Studio, dan ini yang sebaiknya kamu kuasai. Konsepnya mirip RelativeLayout, tapi setiap view diikat (constraint) ke tepi layar atau ke view lain dengan jarak yang pasti.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/judul"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Selamat datang"
        android:textSize="24sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Mulai"
        app:layout_constraintTop_toBottomOf="@id/judul"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Perhatikan atribut yang diawali app:layout_constraint. Baris app:layout_constraintTop_toBottomOf="@id/judul" artinya tombol diikat ke bawah TextView ber-id judul. Dengan ikatan seperti ini, posisi tiap view tetap masuk akal di layar kecil maupun besar.

ConstraintLayout punya senjata tambahan: Guideline (garis bantu tak terlihat untuk patokan), Barrier (garis yang mengikuti view terpanjang), dan Chain (rantai untuk membagi beberapa view sejajar secara merata). Semuanya bisa diatur lewat Layout Editor dengan cara drag and drop, jadi kamu tidak harus menghafal semua atributnya di awal.

Dua trik yang sering dipakai: pertama, layout_width="0dp" pada contoh di atas bukan berarti lebar nol, melainkan match constraint, artinya lebar view mengikuti ikatannya (dalam contoh, selebar layar dikurangi padding). Kedua, app:layout_constraintHorizontal_bias mengatur posisi view di antara dua ikatannya dengan nilai 0 sampai 1, berguna saat kamu ingin view sedikit bergeser dari tengah.

Kelebihannya jelas: struktur datar, fleksibel, dan didukung penuh oleh perkakas modern. Hampir semua desain layar bisa diselesaikan dengan satu ConstraintLayout tanpa nesting.

Perbandingan Singkat

• LinearLayout: paling mudah dipelajari, cocok untuk susunan sejajar yang sederhana seperti daftar atau deretan tombol.
• RelativeLayout: fleksibel tapi rapuh di layar beda ukuran, cukup dipahami untuk membaca kode lama.
• ConstraintLayout: standar modern, fleksibel, dan cocok untuk hampir semua kebutuhan layar.

Jadi, Mana yang Dipakai?

Rekomendasi praktisnya sederhana. Untuk proyek baru, jadikan ConstraintLayout sebagai pilihan utama. Pakai LinearLayout untuk potongan kecil yang memang sejajar, misalnya deretan tombol atau daftar vertikal di dalam layar yang lebih besar. RelativeLayout tidak perlu dipakai lagi kecuali kamu sedang memperbaiki proyek lama.

Satu catatan soal bahasa pemrograman: contoh di artikel ini memakai Kotlin, bahasa yang direkomendasikan Google untuk pengembangan Android sejak 2019. Kalau proyekmu masih memakai Java, tidak masalah: file XML layout-nya sama persis, yang berbeda hanya kode logikanya.

Cara tercepat memahami ketiganya adalah mengubah-ubah contoh XML di atas lalu menjalankannya di emulator. Di artikel berikutnya, kita berkenalan dengan Activity: komponen yang menjadi rumah bagi semua layout ini.