Menyusun Tampilan Menggunakan Relative Layout

Relative layout termasuk bagian dari view group seperti halnya linear layout. Namun tentunya mempunyai perbedaan dalam memperlakukan view di dalamnya. Dari namanya, relative, maksudnya adalah setiap view yang ada di dalam relative layout dapat ditempatkan berdasarkan posisi dari view lainnya ataupun dari parentnya(relative layout itu sendiri).

Dengan fitur yang ditawarkan oleh relative layout ini, kita bisa membuat tampilan tetap flat, artinya tidak perlu menggunakan view group lainnya dalam membuat tampilan yang rumit. Perhatikan kode dan gambar berikut untuk lebih jelasnya.

Tampilan yang ingin dibuat

Pada gambar di samping terdapat 4 text view. Jika dilihat orientasinya, Hello World dan Hello People disusun secara vertikal sedangkan I’m here dan You over there disusun secara horizontal. Mari kita lihat perbandingan kodenya jika menggunakan linear layout dan jika menggunakan relative layout.

 

 

 

 

 

 

 

 

Kode yang dibuat jika menggunakan linear layout

Terlihat pada kode di atas, terdapat 2 linear layout yang digunakan. Satu untuk menghandle view yang disusun secara vertikal dan satunya untuk view yang horizontal. Kode di atas tidak flat, karena menggunakan 2 view group dalam satu layout.

Kode yang dibuat jika menggunakan relative layout

Kode di atas hanya menggunakan 1 view group saja yaitu relative layout. Dari segi performa, relative layout lebih baik daripada linear layout dalam konteks ini.

 

Semoga dari penjelasan diatas bisa sedikit terbayang ya bagaimana perlakuan relative layout terhadap view di dalamnya. Dalam relative layout tidak terdapat orientasi seperti halnya linear layout. Dalam menempatkan view-view di dalamnya digunakan beberapa cara sebagai berikut :

layout_alignParentLeft, layout_alignParentTop, layout_alignParentRight dan layout_alignParentBottom

Align parent maksudnya view akan ditempatkan berdasarkan posisi parentnya (relative layout). Untuk alignParentLeft maka bagian sisi kiri dari view akan ditempatkan pada posisi yang sama dengan posisi bagian kiri dari parentnya. Perhatikan kode dan gambar di bawah untuk lebih jelasnya.

Terlihat pada gambar di samping, posisi text view berada pada kiri atas. Tapi kenapa bisa seperti itu? Padahal kita hanya memberikan posisi alignParentLeft saja namun kenapa text view berada di atas juga? Itu karena posisi default dari view yang berada di dalam relative layout akan diletakkan pada kiri atas.

 

 

 

 

 

 

 

layout_alignParentStart dan layout_alignParentEnd

2 pengaturan tersebut digunakan ketika kita ingin menyusun sebuah tampilan berdasarkan layout direction. Ini sering ditemui pada tampilan yang menyesuaikan cara membaca tulisan dari suatu bahasa. Sebagai contoh untuk bahasa Indonesia, kita membaca tulisan dari kiri ke kanan atau left to rigth(ltr), untuk bahasa seperti Arabic cara membacanya dari kanan ke kiri atau right to left(rtl). Arah ini bisa diatur dengan layoutDirection pada relative layout. Untuk lebih jelasnya perhatikan kode dan gambar di bawah.

ltr

Dengan arah left to right maka posisi end akan berada pada bagian kanan. Namun jika layoutDirection kita ganti dengan rtl maka posisi end akan berada pada bagian kiri.

 

 

 

 

 

 

 

 

 

 

layout_centerHorizontal, layout_centerInParent dan layout_centerVertical

Ketiga pengaturan di atas mengandung kata center, artinya view akan ditempatkan di tengah-tengah dari parent dengan 3 kondisi yaitu secara horizontal, secara vertical ataupun secara horizontal dan vertical(In Parent).

Dengan pengaturan centerInParent maka text view akan berada di tengah-tengah dari parentnya. CenterInParent ini mempunyai nilai yang sama dengan centerHorizontal dan centerVertical.

 

 

 

 

 

 

 

 

 

layout_alignLeft, layout_alignTop, layout_alignRight dan layout_alignBottom

4 pengaturan tersebut masih berkaitan dengan posisi, namun untuk 4 pengaturan ini berdasarkan posisi dari view lain bukan dari parentnya. Mari kita lihat dari kode dan hasil tampilannya.

Text view i’m here (text view ke 2) berada di tengah-tengah dari parentnya, kemudian text view hello world (text view ke 1) menggunakan pengaturan alignLeft dan alignTop dengan berisikan id dari text view ke 2. Jadi posisi sisi kiri dari text view 1 akan sama dengan posisi sisi kiri dari text view 2, begitu juga untuk sisi atas.

 

 

 

 

 

 

 

layout_toLeftOf, layout_above, layout_toRightOf dan layout_below

4 pengaturan tersebut akan menempatkan view di sebelah view acuan. Mari simak kode dan gambar berikut.

Sama pada contoh sebelumnya, text view i’m here (text view ke 2) diletakkan di tengah-tengah dari parentnya. Kemudian text view hello world (text view ke 1) mempunyai pengaturan toLeftOf dan below dengan id dari text view 2. Terlihat text view 1 terletak di sebelah kiri dan sebelah bawah dari text view 2.

 

 

 

 

 

 

 

 

Itu saja mungkin untuk tutorial tentang relative layout ini. Jika ada tambahan ataupun koreksi untuk penjelasan tentang relative layout ini, tolong beritahu saya di kolom komentar. Dan jika ada yang belum jelas tentang penggunaan masing-masing pengaturan di atas, bisa juga tuliskan di kolom komentar. Terima kasih dan happy coding!