Menggunakan Relative Layout dengan Mudah pada Android

Sebelumnya kita sudah mempelajari bagaimana cara menggunakan Linear Layout. Kali ini kita akan mempelajari cara penggunaan Relative Layout.

Relative Layout pada Android Studio

Relative Layout merupakan layout yang berfungsi untuk mengatur tata letak komponen atau widget aplikasi android dengan cara relative (secara bebas) tidak hanya vertikal atau horisontal saja seperti pada Linear Layout.

Rekomendasi : Buku Android Studio Terbaru 2018 

Relative Layout memungkinkan kita untuk memposisikan komponen mana saja yang kita inginkan, sehingga dianggap sebagai layout yang paling fleksibel.

Karena alasan tersebut Relative layout menjadi layout yang paling banyak digunakan setelah Linear Layout di Android.

Tag- tag yang ada pada Relative Layout

Adapun beberapa Tag xml penting yang sering digunakan pada Relative Layout yaitu :

[ninja_tables id=”1527″]

Contoh penggunaan Relative Layout

Buat project baru lalu ketikan kode-kode berikut pada Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ef0000" >

    <EditText
        android:id="@+id/name"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#f8eff8f3"
        android:hint="Nama "
        android:padding="16dp" />

    <EditText
        android:id="@+id/email"
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/name"
        android:background="#f8eff8f3"
        android:hint="Alamat "
        android:padding="16dp" />

    <EditText
        android:id="@+id/subject"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name"
        android:layout_marginTop="16dp"
        android:background="#f8eff8f3"
        android:hint="Subjek"
        android:padding="16dp" />

    <EditText
        android:id="@+id/message"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@+id/subject"
        android:layout_marginTop="16dp"
        android:background="#f8eff8f3"
        android:gravity="top"
        android:hint="Pesan"
        android:padding="16dp" />

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/message"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:padding="16dp"
        android:text="KIRIM" />
</RelativeLayout>

Hasil dari tag diatas yaitu seperti gambar dibawah ini :

Baca juga : Cara Menginstall Genymotion dan Konfigurasi di Android Studio

contoh lainnya yaitu :

<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" >
    
    <TextView
        android:id="@+id/lblComments"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Komentar"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:textSize="20dp"
        android:padding="10dp"/>
    <EditText
        android:id="@+id/txtComments"
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:textSize="18sp"
        android:layout_alignLeft="@+id/lblComments"
        android:layout_below="@+id/lblComments"
        android:layout_centerHorizontal="true"
        android:background="#3222"
        android:layout_margin="3dp"/>
    <Button
        android:id="@+id/btnSave"
        android:layout_width="125dp"
        android:layout_height="wrap_content"
        android:text="Simpan"
        android:layout_below="@+id/txtComments"
        android:layout_alignRight="@+id/txtComments"
        android:background="#f124"
        android:textColor="#fff"
        android:layout_margin="3dp"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/button1"
        android:layout_width="125dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/btnSave"
        android:layout_alignBottom="@+id/btnSave"
        android:layout_alignParentLeft="true"
        android:text="Hapus"
        android:background="#ff33"
        android:textColor="#fff"
        android:layout_margin="3dp"
        android:textStyle="bold"/>

</RelativeLayout>

Hasil dari tag diatas yaitu seperti gambar dibawah ini :

Untuk memahami lebih lanjut tentang penggunaan Relative Layout kita harus sering-sering latihan agar terbiasa dan menjadi mudah ketika membuat UI menggunakan Relative Layout.

[maxbutton id=”17″]