Penggunaan RelativeLayout pada Aplikasi Android

Oleh Wildan M Athoillah 13.20

Assalamualaikum Warahmatullahi Wabarakatuh. Untuk merancang suatu desain pada layout android, kita membutuhkan sebuah container sebagai wadah dari widget atau view-view yang akan digunakan, tentunya kalian sudah tidak asing lagi dengan yang namanya RelativeLayout, LinearLayout dan FrameLayout, layout tersebut sering kalian temukan saat membuat sebuah activity, lalu apa kegunaan layout-layout tersebut.

Panduan dasar penggunaan RelativeLayout sebagai container untuk mengatur posisi elemen UI secara relatif, alignLeft, alignRight, layout above, layout below, bottom, top, center, java programming, android studio. Dari WILDAN TECHNO ART.

Ketiga layout tersebut akan saya jelaskan pada tutorial ini, mengenai pengertian, keguaan dan cara penerapannya.

RelativeLayout

RelativeLayout merupakan turunan dari ViewGroup, setiap komponen atau elemen UI didalam layout tersebut akan tersusun secara Relatif terhadap elemen UI atau container lain.

A. Mengatur Posisi Relatif Terhadap Container

Untuk mengatur posisi elemen UI, misalnya Button, kalian cukup mendragnya pada posisi yang diinginkan, tapi jika kalian ingin menggunakan kode XML, ada beberapa atribut yang bisa kita gunakan pada elemen atau kompenen UI didalam RelativeLayout untuk mengatur posisi dan juga jarak antar elemen, yaitu:

android:layout_centerInParent: jika kita set menjadi "true", elemen UI akan berada di tengah relatif terhadap lebar dan tinggi Layout.
android:layout_centerHorizontal: jika kita set menjadi "true", elemen UI akan berada di tengah relatif terhadap lebar Layout.
android:layout_centerVertical: jika kita set menjadi "true", elemen UI akan berada di tengah relatif terhadap tinggi Layout.
android:layout_alignParentBottom: jika kita set menjadi "true", elemen UI diletakan rata sisi bawah layout.
android:layout_alignParentTop: jika kita set menjadi "true", elemen UI diletakan rata sisi atas layout.
android:layout_alignParentLeft: jika kita set menjadi "true", elemen UI diletakan rata sisi kiri layout.
android:layout_alignParentRight: jika kita set menjadi "true", elemen UI diletakan rata sisi kanan layout.

Ada beberapa atribut yang bisa kalian kombinasikan, misalnya android:layout_centerHorizontal dengan android:layout_alignParentBottom jika kedua atribut tersebut di set menjadi "true", komponen UI akan berada di tengah bagian bawah layout.

Selain itu ada juga beberapa artibut yang tidak bisa kalian kombinasikan atau bisa disebut mutual exclusive, yaitu hanya bisa dipilih salah satu saja, misalnya android:layout_centerVertical dengan android:layout_alignParentBottom.

Dan berikut ini merupakan contoh penerapan beberapa atribut pada komponen UI yang sudah kita bahas sebelumnya:

Baca Juga:

Kode XML pada layout tersebut, seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Tengah" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentLeft="true"
        android:text="Kiri Atas" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="T.Atas" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentRight="true"
        android:text="Kanan Atas" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Kiri.T" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:text="Kanan.T" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Kiri Bawah" />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:text="T.Bawah" />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="Kanan Bawah" />
</RelativeLayout>

B. Mengatur Posisi Relatif Terhadap Elemen UI

Kalian dapat pengatur posisi relatif antara elemen UI dengan elemen UI lainnya, ada beberapa atribut yang bisa kalian gunakan untuk mengatur posisi tersebut, yaitu:

android:layout_above: jika di set menjadi "true", elemen UI akan berhimpit atau berada di atas elemen UI yang di picu/dituju.
android:layout_below: jika di set menjadi "true", elemen UI akan berhimpit atau berada di bawah elemen UI yang di picu/dituju.
android:layout_toLeftOf: jika di set menjadi "true", elemen UI akan berhimpit atau berada di sisi kiri elemen UI yang di picu/dituju.
android:layout_toRightOf: jika di set menjadi "true", elemen UI akan berhimpit atau berada di sisi kanan elemen UI yang di picu/dituju.

Untuk contoh penerapannya, kita akan membuat 5 buah Button (masing-masing diberi ID), 1 Button sebagai titik pusat (berada di tengah), lalu keempatnya lagi berada di sisi kanan, kiri, atas dan bawah Button yang di picu/dituju.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/pusat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Titik Pusat"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kiri"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/pusat" />

    <Button
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/pusat"
        android:layout_centerInParent="true"
        android:text="Kanan" />


    <Button
        android:id="@+id/up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Atas"
        android:layout_above="@+id/pusat"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/pusat"
        android:layout_centerInParent="true"
        android:text="Kanan" />
</RelativeLayout>

Bisa kita lihat, hasilnya akan seperti berikut ini:

Yang terakhir adalah Rata baseline elemen UI.

Baseline adalah garis tidak tampak dimana text duduk, kalian bisa menggunakan atribut android:layout_alignBaseline, yang berguna untuk meletekkan baseline text elemen UI rata dengan baseline text elemen UI lainnya.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/pusat"
        android:text="Button" />

    <Button
        android:id="@+id/pusat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Titik Pusat"
        android:layout_centerInParent="true" />

</RelativeLayout>

Coba kalian perhatikan screenshot berikut ini, yang ditunjukan oleh anak panah, merupakan baseline yang dimaksud:

Itulah penjelasan mengenai cara penerapan RelativeLayout pada aplikasi android, jika ada kesalahan, saya mohon maaf. Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.