LinearLayout: dasar, orientasi dan distribusi bobot di Android

Apa itu LinearLayout?

LinearLayout — salah satu ViewGroup pertama di Android SDK (API Level 1), dirancang untuk menempatkan elemen anak secara berurutan dalam satu baris atau kolom. Setiap elemen baru ditempatkan setelah elemen sebelumnya, dan arah diatur oleh atribut android:orientation. LinearLayout adalah kontainer Android yang paling sederhana dan dapat diprediksi, menjadikannya pilihan ideal untuk antarmuka linear: deretan tombol, daftar pengaturan dengan ikon dan teks, menu horizontal.

Secara historis, LinearLayout adalah ViewGroup pertama yang dikenal oleh pengembang Android pemula. Keunggulannya adalah transparansi: elemen anak ditempatkan secara ketat sesuai urutan deklarasi, tanpa aturan posisi tersembunyi. Tidak seperti RelativeLayout, di mana elemen dapat terikat ke tetangga mana pun, atau ConstraintLayout dengan sistem kendalanya, LinearLayout bekerja berdasarkan prinsip 'pertama di kiri/atas, kedua setelahnya, ketiga setelah kedua'. Menurut Google I/O 2017, 78% layar di 1000 aplikasi teratas Google Play menggunakan LinearLayout sebagai kontainer utama atau tambahan.

Metrik utama LinearLayout — LinearLayout.MeasureSpec — sistem manajemen ukuran. Pada orientasi VERTICAL, lebar setiap elemen sama dengan lebar induk (match_parent atau tetap), dan tinggi ditentukan oleh konten atau atribut. Untuk HORIZONTAL sebaliknya: tinggi sama dengan induk, lebar — berdasarkan konten. Jika dalam baris HORIZONTAL total lebar elemen melebihi lebar induk, elemen dapat keluar dari layar (jika tidak menggunakan weight).

Struktur internal

LinearLayout menimpa onMeasure dan onLayout dari ViewGroup. Pada orientasi VERTICAL, onLayout menempatkan elemen pada sumbu Y: child pertama — y=0, kedua — y=prev.bottom + divider.hidden, dan seterusnya. Pada HORIZONTAL — pada sumbu X. Divider (pemisah) diatur melalui android:divider dan android:showDividers (beginning, middle, end). Pemisah dapat berupa warna, drawable, atau sumber Shape kustom.

Orientasi dan Gravity: VERTICAL dan HORIZONTAL

Orientasi — atribut kunci LinearLayout yang menentukan arah penempatan elemen anak. android:orientation="vertical" menyusun elemen dari atas ke bawah; android:orientation="horizontal" — dari kiri ke kanan (atau kanan ke kiri pada lokalisasi RTL). Jika orientasi tidak diatur, secara default digunakan HORIZONTAL (pada versi lama) — tetapi penetapan eksplisit wajib untuk perilaku yang dapat diprediksi.

android:gravity — penyelarasan konten di dalam LinearLayout. Menerima kombinasi: top, bottom, left, right, center, center_horizontal, center_vertical, fill, clip_vertical, clip_horizontal. Nilai gravity="center" untuk tata letak VERTICAL akan menempatkan semua elemen terpusat secara horizontal. android:layout_gravity — atribut elemen anak yang menyelaraskannya di dalam LinearLayout induk. Contoh: tombol dengan layout_gravity="right" dalam tata letak VERTICAL akan menempel ke tepi kanan.

Perbedaan: gravity — properti induk (bagaimana anak-anak ditempatkan di dalamnya), layout_gravity — properti anak (bagaimana ia berperilaku di dalam induk). Kesalahan mencampur atribut ini adalah salah satu yang paling umum di kalangan pemula.

Baseline alignment

Untuk tata letak HORIZONTAL dengan elemen teks (TextView, Button, EditText) berguna android:baselineAligned="true" — ia menyelaraskan semua teks berdasarkan garis dasar font, terlepas dari padding, size atau height. Ini membuat baris dengan ikon, judul, dan deskripsi terlihat rapi: teks tidak melompat ke atas dan ke bawah.

layout_weight: distribusi bobot

layout_weight — atribut elemen anak LinearLayout yang menentukan bagian ruang kosong yang akan ditempati. Bekerja hanya dalam arah orientasi (lebar untuk HORIZONTAL, tinggi untuk VERTICAL). Rumus perhitungan: ukuran = ukuran sendiri + (ruang kosong × (bobot elemen / jumlah semua bobot)). Ruang kosong = ukuran induk — jumlah semua ukuran sendiri anak-anak.

layout_weight lebih efisien daripada ukuran tetap untuk antarmuka adaptif. Misalnya, jika panel kiri harus menempati 30% layar dan panel kanan — 70%, atur weight=3 dan weight=7. Untuk pengoperasian yang benar, biasanya ukuran dalam arah diatur ke 0dp (android:layout_width="0dp" untuk HORIZONTAL), maka ukuran sendiri elemen dianggap nol, dan seluruh ukuran hanya ditentukan oleh weight. Ini adalah rekomendasi standar Google (Android Developers Guide, 2024).

Penting: bobot dijumlahkan untuk semua elemen di LinearLayout, termasuk yang tidak memiliki weight (bobotnya dianggap 0). Jika satu elemen memiliki weight=1 dan yang lain weight=2, yang pertama akan menempati 1/3 ruang kosong, yang kedua — 2/3. weightSum (atribut induk) memungkinkan pengaturan jumlah bobot maksimum — jika bobot anak-anak totalnya kurang dari weightSum, selisihnya tetap sebagai ruang kosong.

Contoh kode: tata letak XML

Contoh 1: Formulir vertikal dengan weight

Formulir masuk terdiri dari tiga elemen: kolom email (menempati 2/4), kolom kata sandi (1/4) dan tombol (1/4) dari tinggi layar. Ketiga elemen dengan weight hanya bekerja pada orientasi VERTICAL berdasarkan tinggi.

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

    <EditText
        android:id="@+id/email"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:hint="Email" />

    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:hint="Kata sandi"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Masuk" />

</LinearLayout>

Tinggi setiap elemen = (parent_height — padding) × (weight / sumWeights). email akan mendapatkan 2/4 tinggi, kata sandi dan tombol — masing-masing 1/4. Semua height=0dp, jadi ukuran sendiri tidak diperhitungkan — hanya weight yang bekerja.

Contoh 2: Bilah alat horizontal

Panel dengan tiga tombol: ikon kembali (wrap_content), judul (isi sisanya) dan ikon menu (wrap_content). weight untuk judul = 1, tombol tanpa weight.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:gravity="center_vertical">

    <ImageButton
        android:id="@+id/btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow_back" />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Judul"
        android:textSize="18sp" />

    <ImageButton
        android:id="@+id/btn_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_more_vert" />

</LinearLayout>

Tombol kembali dan menu mengambil tepat sebanyak yang diperlukan untuk ikon. Judul (TextView) dengan width=0dp dan weight=1 meregang ke seluruh ruang tersisa di antara mereka. gravity="center_vertical" menyelaraskan semua elemen ke tengah vertikal.

Contoh 3: LinearLayout bersarang untuk kartu kompleks

Kartu produk: baris horizontal (gambar + blok teks vertikal). LinearLayout luar HORIZONTAL, dalam — VERTICAL untuk judul, deskripsi, dan harga.

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/product_image"
        android:scaleType="centerCrop" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginStart="12dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nama produk"
            android:textStyle="bold"
            android:textSize="16sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Deskripsi singkat produk dalam dua baris"
            android:textSize="14sp"
            android:textColor="@color/gray" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1 299 gosok."
            android:textSize="18sp"
            android:textColor="@color/accent" />

    </LinearLayout>

</LinearLayout>

Gambar di kiri (80×80dp), di kanan — blok vertikal dari tiga baris teks. LinearLayout dalam memiliki weight=1, sehingga menempati semua ruang tersisa setelah gambar. Ini adalah pola kartu daftar klasik yang ditemukan di ribuan aplikasi.

Masalah penyarangan dan alternatif

Kelemahan utama LinearLayout — kebutuhan akan kontainer bersarang untuk tata letak kompleks. Jika perlu menempatkan elemen dalam jaringan 2×2 atau membuat baris dengan perataan ke dua tepi, diperlukan setidaknya 2–3 tingkat penyarangan. Setiap tingkat LinearLayout menambahkan 2 lintasan onMeasure, yang pada perangkat lemah menyebabkan lag yang terlihat saat rendering.

Menurut Android Performance Blog (Google, 2017), setiap tingkat penyarangan tambahan meningkatkan waktu tata letak sebesar 30–50 μs. Untuk daftar 20 elemen dengan 3 tingkat penyarangan, keterlambatan dapat mencapai 3 ms per elemen — ini adalah jank yang terlihat saat menggulir. ConstraintLayout memecahkan masalah ini melalui hierarki datar, menggantikan 3–4 LinearLayout bersarang dengan satu kontainer dengan kendala.

Rekomendasi: gunakan LinearLayout untuk tata letak linear sederhana (hingga 10 elemen, satu tingkat penyarangan). Untuk kartu daftar, formulir dengan perataan berbeda, dan layar dengan struktur tabel, pilih ConstraintLayout. Untuk elemen berulang di RecyclerView, gunakan ConstraintLayout di file tata letak elemen — ini penting untuk kinerja pengguliran.