Mengenal RelativeLayout

Mengenal RelativeLayout. RelativeLayout merupakan ViewGroup yang menampilkan widget secara relative atau bebas. Posisi widget dapat dibuat spesifik terhadap widget seperti di samping kiri atau di atas sebuah widget lainnya. Posisi widget dapat juga dibuat spesifik di dalam parent (RelativeLayout) seperti di atas, di tengah atau di bawah. RelativeLayout dapat menghilangkan pengunaan nested viewgroup atau viewgroup bersarang sehingga hirarki dari layout menjadi sederhana atau flat, yang dapat menambah peforma.
struktur relativelayout
Kita dapat melihat gambar di atas merupakan contoh struktur layout dari RelativeLayout. Button 2 terletak di bawah dari Button 1, untuk membuat hal tersebut kita perlu menambahkan atribut android:layout_below="@+id/btn_1" di widget Button 2. Untuk membuat widget Button 3 terletak di posisi tengah dari parent (RelativeLayout), kita cukup menambahkan atribut android:layout_centerInParent="true" di dalam widget Button 3. Terakhir, Untuk membuat widget Button 4 terletak paling di bawah terhadap parent(RelativeLayout), tambahkan atribut android:layout_alignParentBottom="true" di dalam widget Button 4.

Sekarang kita akan membuat tampilan yang sama seperti di tutorial sebelumnya berupa halaman login, Tapi menggunakan satu ViewGroup yaitu RelativeLayout. Gunakan project pada tutorial sebelumnya, Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada jendela New Resource File masukan data seperti berikut :

  • File name : "activity_login2"
  • Root element : "RelativeLayout"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.

membuat relative layout

Buka acitivty_login2.xml, kita akan menambah beberapa widget ke dalam RelativeLayout seperti TextView, EditText, ImageButton dan Button. Ketik kode di bawah ini ke dalam activity_login2.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:layout_margin="10dp">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_login"
        android:layout_centerHorizontal="true"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_email"
        android:hint="Password"
        android:inputType="textPassword" />


    <ImageButton
        android:id="@+id/ib_fb"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/fb" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ib_fb"
        android:layout_marginTop="15dp"
        android:text="Sign In" />

</RelativeLayout>

tutorial relative layout

Kita telah menyusun beberapa widget dengan menggunakan atribut android:layout_below disetiap widget. Pada posisi widget ImageButton Login via FB, kita membuatnya posisi di bawah dari EditText password dan di tengah dengan menggunakan atribut android:layout_centerHorizontal="true". Sekarang bagaimana cara membuat widget ImageButton Google Plus dan Twitter berada di posisi sebelah widget ImageButton FB ?. Dengan menambahkan atribut android:layout_toRightOf dan android:layout_toEndOf untuk membuat widget di posisi kanan dari sebuah widget. Untuk membuat widget berada di posisi sebelah kiri dari sebuah widget, tambahkan atribut android:layout_toLeftOf dan android:layout_toStartOf.

Kembali ke activity_login2.xml, Tambah dua widget ImageButton ke dalam RelativeLayout dengan ketik kode bawah ini.

<ImageButton
    android:id="@+id/ib_googleplus"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_below="@id/et_password"
    android:layout_margin="10dp"
    android:layout_toLeftOf="@id/ib_fb"
    android:layout_toStartOf="@id/ib_fb"
    android:background="@drawable/googleplus" />

<ImageButton
    android:id="@+id/ib_twitter"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_below="@id/et_password"
    android:layout_margin="10dp"
    android:layout_toRightOf="@id/ib_fb"
    android:layout_toEndOf="@id/ib_fb"
    android:background="@drawable/twitter" />

Setelah memasukan dua widget ImageButton, kita dapat melihat layout seperti gambar di bawah.
membuat-relative-layout-di-android-studio.jpg (22 KB)

Berikut source code keseluruhan dari activity_login2.xml yang telah kita buat dalam tutorial ini.

<?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:layout_margin="10dp">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_login"
        android:layout_centerHorizontal="true"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_email"
        android:hint="Password"
        android:inputType="textPassword" />


    <ImageButton
        android:id="@+id/ib_fb"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/fb" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ib_fb"
        android:layout_marginTop="15dp"
        android:text="Sign In" />

    <ImageButton
        android:id="@+id/ib_googleplus"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_margin="10dp"
        android:layout_toLeftOf="@id/ib_fb"
        android:layout_toStartOf="@id/ib_fb"
        android:background="@drawable/googleplus" />

    <ImageButton
        android:id="@+id/ib_twitter"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_margin="10dp"
        android:layout_toRightOf="@id/ib_fb"
        android:layout_toEndOf="@id/ib_fb"
        android:background="@drawable/twitter" />

</RelativeLayout>

Demikian tutorial Mengenal RelativeLayout, kita telah berhasil membuat layout yang dapat mengatur widget secara relative atau bebas. Selanjutnya kita akan mempelajari Mengenal ConstraintLayout, merupakan layout yang lebih fleksibel daripada RelativeLayout. Tetap semangat belajar. Terima kasih.