Membuat tata letak linear

Coba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak di Compose.

LinearLayout adalah kelompok tampilan yang menyejajarkan semua turunan dalam satu arah, secara vertikal atau horizontal. Anda dapat menentukan arah tata letak dengan atribut android:orientation.

Gambar yang menampilkan pemisahan tata letak menjadi tiga irisan vertikal
Gambar 1. LinearLayout dengan tiga turunan berorientasi horizontal.

Semua turunan LinearLayout ditumpuk satu per satu, sehingga daftar vertikal hanya memiliki satu turunan per baris, berapa pun lebarnya. Daftar horizontal hanya setinggi satu baris, dan merupakan tinggi turunan tertinggi, ditambah padding. LinearLayout mengikuti margin antara turunan, dan gravitasi—rata kanan, tengah, atau kiri—dari setiap turunan.

Bobot tata letak

LinearLayout juga mendukung penetapan bobot ke setiap turunan dengan atribut android:layout_weight. Atribut ini menetapkan nilai "nilai penting" ke tampilan dalam hal seberapa banyak ruang yang digunakannya di layar. Nilai bobot yang lebih besar memungkinkannya diperluas untuk mengisi ruang yang tersisa di tampilan induk. Tampilan turunan dapat menentukan nilai bobot, dan ruang yang tersisa dalam kelompok tampilan ditetapkan ke turunan secara proporsional, berdasarkan bobot yang dideklarasikan. Bobot defaultnya adalah nol.

Distribusi setara

Untuk membuat tata letak linear di mana setiap turunan menggunakan jumlah ruang yang sama di layar, setel android:layout_height setiap tampilan ke "0dp" untuk tata letak vertikal, atau android:layout_width setiap tampilan ke "0dp" untuk tata letak horizontal. Kemudian, tetapkan android:layout_weight setiap tampilan ke "1".

Distribusi tidak setara

Anda juga dapat membuat tata letak linier tempat elemen turunan menggunakan jumlah ruang yang berbeda di layar. Perhatikan contoh berikut:

  • Misalnya Anda memiliki tiga kolom teks: dua dengan nilai bobot 1, dan yang ketiga dengan nilai bobot default 0. Kolom teks ketiga, dengan nilai bobot 0, hanya menempati area yang diperlukan oleh kontennya. Dua kolom teks lainnya, dengan nilai bobot 1, diperluas secara merata untuk mengisi ruang yang tersisa setelah konten ketiga kolom diukur.
  • Jika Anda memiliki tiga kolom teks yang keduanya memiliki nilai bobot 1 dan kolom ketiga memiliki bobot 2, ruang yang tersisa setelah konten ketiga kolom diukur akan dialokasikan sebagai berikut: setengah untuk kolom dengan nilai bobot 2, dan setengahnya dibagi sama rata antara kolom dengan nilai bobot 1.

Gambar dan cuplikan kode berikut menunjukkan cara kerja bobot tata letak dalam aktivitas "kirim pesan". Kolom Kepada, baris Subjek, dan tombol Kirim masing-masing hanya mengambil ketinggian yang diperlukan. Area pesan mengambil sisa tinggi aktivitas.

Gambar yang menampilkan tiga EditText dan Satu Tombol dalam LinearLayout berorientasi vertikal
Gambar 2. Tiga kolom teks dan satu tombol dalam LinearLayout berorientasi 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:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

Guna mengetahui detail tentang atribut yang tersedia pada setiap tampilan turunan dari LinearLayout, lihat LinearLayout.LayoutParams.