Menggunakan Relative Layout dengan Mudah pada Android

Panduan Membuat Aplikasi untuk Pemula

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

 

Relative Layout pada Android

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.

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.

Menggunakan Relative Layout dengan Mudah
Sumber : Youtube

Tag- tag pada Relative Layout

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

 

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 :

Relative Layout

 

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 :

Relative Layout 2

 

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

 

Bagian berikutnya >