LAYOUT| Memahami Konsep RelativeLayout Pada Android Studio (PART2)

 

Pendahuluan

    Seperti yang sudah dibahas sebelumnya tentang layout, bahwa layout adalah sebuah bidang untuk memeletakkan komponen-komponen sehingga terbentuk suatu arsitek yang baik. Untuk lebih memahami tentang layout silahkan kunjungi kembali artikel kami di Layout Android Studio | ConstraintLayout (Bagi 1) 

    Setelah selesai kita membahas dan memahami tentang ConstraintLayout, Saatnya kita lanjut ke jenis layout yang ke 2, yaitu RelativeLayout.

    RelativeLayout adalah layout yang menampilkan turunan di posisi relatif. Posisi setiap tampilan dapat ditentukan sebagai posisi relatif terhadap elemen yang setara (seperti di sebelah kiri atau di bawah tampilan lain) atau di posisi relatif terhadap RelativeLayout induk (seperti sejajar dengan bagian bawah, kiri, atau tengah).

    RelativeLayout adalah utilitas yang sangat efektif untuk mendesain antarmuka pengguna karena dapat menghilangkan tampilan bertingkat dan menjaga hierarki layout tetap sederhana, sehingga meningkatkan performa. RelativeLayout sama dengan ConstraintLayout dari segi sifatnya yang relative. Kelebihan inilah yang membuat komponen didalam layout akan menyesuaikan bentuk fisik dari perangkat.

    Bentuk penulisan RelativeLayout dapat dilihat pada contoh berikut:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
        //Disini diletakkan komponen
</RelativeLayout>

    Ingat, Setiap Layout memiliki tag yang berpasang-pasangan yang terdiri dari tag pembuka dan tag penutup. Komponen diletakkan diantara tag tersebut.

    Komponen yang ada didalam RelativeLayout harus memiliki beberapa atribut yang disertakan agar komponen bisa ditentukan tataletaknya. Berikut beberapa attribut yang akan diletakkan didalam relativeLayout:

1. android:layout_alignParentTop/Right/Left/Button, Jika "true", tepi atas tampilan ini diposisikan sejajar dengan tepi atas/kiri/kanan/bawah tampilan induknya.
2. android:layout_centerVertical, Jika "true", tampilan turunan ini diposisikan di tengah-tengah turunan induknya secara vertikal.
3. android:layout_below, Memosisikan tepi atas tampilan ini di bawah tampilan yang ditentukan dengan ID resource.
4. android:layout_toRightOf,  Memosisikan tepi kiri tampilan ini di sebelah kanan tampilan yang ditentukan dengan ID resource.

Percobaan dengan Relative Layout

    Buatlah Projek baru dengan activity adalah "empty activity" dan beri nama projek tersebut dengan  "RelativeLayout". Sedangkan language adalah "java". Setelah itu masuk ke halaman Activity_Main.xml. Ganti LayoutConstraint dengan RelativeLayout. Perhatikan code berikut:

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

        //Penempatan komponen
</RelativeLayout>

Tambahkan dua buah komponen TextView diantara Tag Layout. Sehingga code terlihat seperti berikut:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Relative"/>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" Layout"/>
</RelativeLayout>

    Perhatikan pada desain kita. Kedua komponen saling bertumpukan. Ini dikarenakan layout yang kita buat bersifat relative. Untuk mengatasinya kita perlu menambahkan beberapa atribut pada komponen TextView. Atribut tersebut sudah ditulis diatas.

    Sekarang tambahkan android:layout_alignParentTop="true" pada artibut/propertis di komponen textView seperti berikut. Nilai yang diberikan untuk atribut tersebut adalah "True". Dikompomponen textView yang pertama berikan atribut id android:id="@+id/lblLayout1" dan dikomponen ke dua berikan atribut  android:layout_toRightOf="@id/lblLayout1".

<TextView
    android:id="@+id/lblLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:text="Relative"/>

<TextView
    android:id="@+id/lblLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@id/lblLayout1"
    android:text=" Layout"/>

    Posisi komponen ke dua adalah disebelah kanan komponen pertama. Anda dapat mengganti posisi komponen tersebut dengan mengganti atribut dengan:

android:layout_toRightOf="@id/lblLayout1"
android:layout_toLeftOf="@id/lblLayout1"

    Jalankan program yang anda buat dengan menekan icon segitiga hijau pada bagian toolbar.

Tonton kami di youtube:

Penutup

RelativeLayout merupakan disain bergaya relative. Jadi komponen akan mengatur posisinya sendiri dan menyesuaikan dengan perangkat. Anda harus berhati-hati menggunakannya.

    Demikianlah artikel kita kali ini. Semoga bermanfaat.😊

Materi Layout :

1.  Constrain Layout
2. Relative Layout
3. Linear Layout