Tutorial Membuat RelativeLayout Sederhana di Android

Last Updated on 8 years by Mas Herdi

Dalam membuat aplikasi Android, salah satu komponen penting adalah layout aplikasi. Layout di Android ditulis menggunakan XML, dan salah satu dari beberapa jenis layout yang ada di Android adalah RelativeLayout. RelativeLayout memungkinkan kita untuk meletakkan komponen layout berdasarkan posisi komponen terdekat lainnya. Layout ini sifatnya sangat flexible, yang memperbolehkan kalian untuk meletakkan komponen layout dimana saja, jika kalian tahu posisi “relative” dari komponen terdekat.

Belajar Membuat RelativeLayout di Android menggunakan Android Studio

Pada RelativeLayout, kalian bisa menggunakan atribut seperti, “above, below, left dan right” untuk mengatur posisi dari suatu komponen layout. Contohnya tampilkan “button1” dibawah (below) “button 2”, atau tampilkan “button3” di sebelah kanan “button1” dan semacamnya.

Perlu diketahui, RelativeLayout sangat flexible, lebih flexible dibandingkan dengan LinearLayout, namun untuk menguasainya sangatlah susah. Karena pada prakteknya RelativeLayout digunakan untuk mendesain halaman layout yang kompleks. Jika ingin berlatih, kalian bisa menggunakan Android Studio, kemudian menggunakan visual editor XML, kalian bisa main drag n drop komponen layout di situ, kemudian kalian bisa melihat kodingan XML yang digenerate oleh Android Studio dari drag n drop untuk mempelajari bagaimana cara memposisikan komponen di RelativeLayout.

Pada tutorial ini kita akan belajar membuat layout chat room sederhana, kita akan coba mengatur posisi button, textview, dan edittext menggunakan RelativeLayout.

Pertama-tama, seperti biasa buatlah project aplikasi baru di Android Studio.

Setelah itu, buka file activity_main.xml dan masukkan kode seperti di bawah ini, kode di bawah ini sudah cukup menjelaskan dimana komponen2 diletakkan pada RelativeLayout :

<?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:orientation="vertical">

    <ImageView
        android:src="@mipmap/ic_launcher"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:id="@+id/iv_profpic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/et_chat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/iv_profpic"
        android:hint="Masukkan pesan ..." />

    <Button
        android:id="@+id/bt_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignRight="@id/et_chat"
        android:text="Submit" />

    <TextView
        android:id="@+id/tv_chat2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bt_submit"
        android:layout_alignParentRight="true"
        android:layout_margin="10dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="Hei juga, kabar baik !" />

    <TextView
        android:id="@+id/tv_chat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_chat2"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="Haloo, apa kabar?" />

</RelativeLayout>

Intinya dalam menggunakan RelativeLayout ada beberapa kata kunci atribut pada komponen yang harus diingat :

• android:layout_toRightOf : untuk memposisikan komponen ini, di sebelah kanan komponen lain
• android:layout_toLeftOf : untuk memposisikan komponen ini, di sebelah kiri komponen lain
• android:layout_above : untuk memposisikan komponen ini, di atas komponen lain
• android:layout_below : untuk memposisikan komponen ini, di bawah komponen lain

Kemudian selain itu, kalian juga bisa menggunakan keyword parent untuk mendefinisikan posisi absolut dari sebuah komponen di dalam RelativeLayout, seperti :

• android:layout_alignParentRight : berfungsi untuk memposisikan komponen di tepi paling kanan layar.
• android:layout_alignParentLeft : berfungsi untuk memposisikan komponen di tepi paling kiri layar.
• android:layout_alignParentTop : berfungsi untuk memposisikan komponen di tepi paling atas layar.
• android:layout_alignParentBottom : berfungsi untuk memposisikan komponen di tepi paling bawah layar.

Dan berbeda dengan atribut above, left, atau right, atribut parent bernilai true atau false. Dimana jika diset true maka otomatis komponen itu akan diletakkan pada tepi yang dimaksud, dan dapat menjadi semacam parent/anchor untuk meletakkan komponen lainnya secara relative terhadap komponen parent tersebut.

Bagaimana dengan file MainActivity.java nya? Pada file Activity nya untuk tutorial ini tidak ada yang perlu diubah. 🙂

Demo

Oke, jika dijalankan, maka aplikasi kita akan memunculkan screen chat room seperti di bawah 🙂

Contoh Layout Chat Room yang berhasil dibuat

That’s all ! Semoga membantu. 🙂 Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. Silahkan bertanya di bagian komentar jika ada yang kurang jelas.