RelativeLayout — esensi, aturan tata letak di aplikasi Android

Apa itu RelativeLayout?

RelativeLayout — ViewGroup yang muncul di Android SDK sejak API Level 1, yang menempatkan elemen anak melalui aturan deklaratif (layout rules) relatif terhadap induk atau elemen anak lainnya. Setiap aturan ditentukan oleh atribut XML seperti android:layout_above, android:layout_below, android:layout_toLeftOf dengan nilai ID elemen target.

Sebelum munculnya RelativeLayout, pengembang terpaksa menggunakan LinearLayout bersarang untuk setiap penempatan non-standar — ini menyebabkan penyarangan yang dalam dan rendering yang lambat. RelativeLayout memecahkan masalah ini dengan menawarkan penempatan relatif pada satu tingkat hierarki. Namun, fleksibilitasnya terbatas dibandingkan dengan ConstraintLayout modern: RelativeLayout tidak mendukung rantai, penghalang, pemandu, dan ukuran persentase.

RelativeLayout memiliki dua fitur utama: satu lintasan onMeasure (berbeda dengan LinearLayout dengan weight yang memerlukan dua lintasan) dan ketergantungan pada urutan deklarasi — jika elemen A merujuk ke elemen B dan B dideklarasikan setelah A, B harus memiliki ukuran yang diketahui saat pengukuran A. Menurut Android Developers Guide (2024), RelativeLayout melakukan pengukuran dalam satu lintasan jika semua aturan merujuk ke elemen yang sudah diukur. Jika tidak, lintasan kedua diperlukan, yang mengurangi kinerja.

Kapan RelativeLayout diperlukan

RelativeLayout tepat untuk tata letak sederhana dengan 3–7 elemen yang memerlukan penempatan relatif (label di atas tombol, ikon di kanan teks, panel di bagian bawah layar). Untuk proyek baru, ConstraintLayout direkomendasikan, tetapi RelativeLayout masih banyak digunakan dalam kode lama dan pustaka.

Aturan penempatan: relative dan align

RelativeLayout menggunakan dua jenis aturan: aturan relative (penempatan relatif terhadap elemen lain) dan aturan align (penautan ke induk). Setiap elemen anak dapat memiliki jumlah aturan tidak terbatas, tetapi aturan yang bertentangan (misalnya alignParentTop dan below milik elemen lain) diselesaikan demi aturan terakhir yang dideklarasikan dalam atribut.

Aturan relative: - android:layout_above="@id/target" — tepi bawah elemen ditautkan ke tepi atas target. - android:layout_below="@id/target" — tepi atas elemen ditautkan ke tepi bawah target. - android:layout_toLeftOf="@id/target" — tepi kanan ditautkan ke tepi kiri target. - android:layout_toRightOf="@id/target" — tepi kiri ditautkan ke tepi kanan target. - android:layout_toStartOf="@id/target" — analog toLeftOf untuk lokalisasi RTL. - android:layout_toEndOf="@id/target" — analog toRightOf untuk RTL.

Aturan align (ke induk): - android:layout_alignParentTop="true" — tepi atas elemen bertepatan dengan tepi atas induk. - android:layout_alignParentBottom="true" — tepi bawah bertepatan dengan tepi bawah induk. - android:layout_alignParentLeft="true" — tepi kiri bertepatan dengan tepi kiri induk. - android:layout_alignParentRight="true" — tepi kanan bertepatan dengan tepi kanan induk. - android:layout_alignParentStart dan android:layout_alignParentEnd — untuk RTL.

Aturan align ke elemen lain: - android:layout_alignTop="@id/target" — bagian atas elemen bertepatan dengan bagian atas target. - android:layout_alignBottom, android:layout_alignLeft, android:layout_alignRight, android:layout_alignStart, android:layout_alignEnd — serupa. - android:layout_alignBaseline="@id/target" — perataan berdasarkan garis dasar teks (berguna untuk baris dengan ukuran font berbeda).

Pemusatan dan urutan tumpang tindih

Pemusatan di RelativeLayout ditentukan oleh tiga atribut: android:layout_centerInParent="true" (pusat induk pada kedua sumbu), android:layout_centerHorizontal="true" (pusat horizontal), dan android:layout_centerVertical="true" (pusat vertikal). Pemusatan kompatibel dengan aturan lain: elemen dapat dipusatkan secara horizontal dan sekaligus ditautkan ke tepi bawah induk.

Urutan tumpang tindih (Z-order) di RelativeLayout ditentukan oleh urutan deklarasi elemen di XML. Elemen yang dideklarasikan pertama digambar pertama (akan berada di bawah), yang terakhir — terakhir (akan berada di atas). Jika Anda perlu mengubah urutan tumpang tindih tanpa mengubah XML, gunakan android:elevation (mulai API 21) — elemen dengan elevation lebih tinggi digambar di atas. Untuk versi di bawah API 21, urutan tumpang tindih hanya diatur oleh urutan deklarasi.

Penting: RelativeLayout tidak mendukung atribut android:elevation untuk induk — setiap elemen mengelola elevation-nya sendiri secara mandiri. Jika terjadi konflik antara aturan penempatan dan elevation (misalnya elemen yang tumpang tindih), elevation memiliki prioritas untuk penggambaran, tetapi tidak untuk penempatan — elemen dengan elevation lebih tinggi dapat secara visual menutupi elemen lain, bahkan jika aturan tata letaknya menempatkannya di belakang.

Contoh: tata letak XML dengan RelativeLayout

Contoh 1: Profil pengguna

Avatar di tengah atas, nama di bawah avatar, status di bawah nama, tombol aksi di bagian bawah layar. Semua elemen menggunakan aturan relative untuk penautan berurutan.

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

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:src="@drawable/avatar_placeholder" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/avatar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="Ivan Ivanov"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/user_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/user_name"
        android:layout_centerHorizontal="true"
        android:text="Online"
        android:textColor="@color/green" />

    <Button
        android:id="@+id/edit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:text="Edit profil" />

</RelativeLayout>

Avatar ditautkan ke atas melalui marginTop + centerHorizontal, nama — di bawah avatar melalui layout_below, status — di bawah nama, tombol — ke tepi bawah induk melalui alignParentBottom. Semua elemen independen satu sama lain, tidak ada rantai atau penyarangan.

Contoh 2: Panel dengan ikon dan lencana

Ikon dengan lencana merah (lingkaran dengan angka) di sudut kanan atas. Lencana diposisikan relatif terhadap ikon melalui align ke tepinya dengan margin negatif untuk tumpang tindih.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_notification" />

    <TextView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignTop="@+id/icon"
        android:layout_alignRight="@+id/icon"
        android:layout_marginTop="-6dp"
        android:layout_marginRight="-6dp"
        android:gravity="center"
        android:background="@drawable/badge_background"
        android:text="3"
        android:textColor="@android:color/white"
        android:textSize="10sp" />

</RelativeLayout>

Lencana ditautkan ke tepi atas dan kanan ikon. Margin negatif (-6dp) menggeser lencana ke luar, menciptakan efek melampaui batas ikon. Ini adalah pola populer untuk notifikasi yang tanpa RelativeLayout akan memerlukan FrameLayout atau penggambaran khusus.

Contoh 3: Layar masuk dengan RelativeLayout

Formulir masuk: logo di tengah atas, kolom email di bawahnya, kolom kata sandi di bawah email, tombol 'Masuk' di bawah kata sandi, tautan 'Daftar' ditempelkan ke bawah. Semua elemen ditautkan secara berurutan melalui layout_below.

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

    <TextView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:text="MyApp"
        android:textSize="32sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/email_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/logo"
        android:layout_marginTop="32dp"
        android:hint="Email" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email_input"
        android:layout_marginTop="16dp"
        android:hint="Kata sandi"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginTop="24dp"
        android:text="Masuk" />

    <TextView
        android:id="@+id/register_link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="Belum punya akun? Daftar"
        android:textColor="@color/primary" />

</RelativeLayout>

Layar menggunakan 5 elemen pada satu tingkat hierarki. Aliran dari atas ke bawah (logo → email → kata sandi → tombol) disediakan oleh layout_below, dan tautan ditempelkan ke bawah melalui alignParentBottom. Untuk fungsionalitas yang sama, LinearLayout akan memerlukan dua wadah bersarang (satu untuk grup atas, yang kedua untuk tautan dengan weight).

RelativeLayout vs ConstraintLayout: perbandingan

Perbandingan dua ViewGroup untuk penempatan relatif: RelativeLayout (klasik, API 1+) dan ConstraintLayout (modern, Jetpack). Kriteria: fleksibilitas, kinerja, dukungan RTL, dan adaptabilitas.

RelativeLayout kalah dari ConstraintLayout di hampir semua aspek, kecuali satu: tertanam di Android SDK sejak API 1 dan tidak memerlukan ketergantungan tambahan. Untuk proyek yang masih menggunakan minSdk di bawah API 14 (Android 4.0), RelativeLayout adalah satu-satunya opsi standar untuk penempatan relatif. Dalam semua kasus lainnya, Google merekomendasikan ConstraintLayout.