Now Reading
Pengenalan Relative Layout

Seperti arah angin yang bisa diposisikan 360 derajat. Kamu pun bisa memposisikan sebuah objek dimana pun dan relative terdapat objek apapun

Hi, Salam Super hehe

Oke kembali lagi kita akan membahas mengenai layout. Setelah kalian mempelajari mengenai Linear Layout, kali ini kita akan belajar mengenai temannya linear layout yakni Relative Layout. Sangat mudah sekali guys mempelajari relative layout ini. Layout ini bisa memposisikan objek cukup bebas mengikuti posisi kurang lebih seperti arah mata angin dan bisa memposisikan dirinya di sebelah kiri, kanan atas dan bawah dari sebuah objek.

Kalo kalian belum membaca tentang Linear layout, kamu bisa akses link ini agar kamu tahu perbedaan antara linear layout dan relative layout. https://www.techatmosphere.com/pengenalan-linear-layout/

 

1. Apa itu Relative Layout?

 

Relative yang dalam arti harfiah posisi disini merupakan memposisikan objek tergantung dari posisi objek yang lain. Kalo dari penjelasan di dokumentasi google nya

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.

 

Nah kata om Android Developer, relative layout merupakan kumpulan objek (view) yang posisinya tergantung dari siblingnya (temen2 nya hehe) yang ada di dalam layout relative (container). Bisa di posisikan di atas, di bawah, di kiri dan di kanan dari temennya.

Untuk lebih memahami relative layout, mari kita lihat gambar di bawah ini

 

 

 

 

 

 

 

Gambar di atas ini memiliki 3 objek, yang mana kotak yang paling besar berada di posisi paling atas. Sedangkan 2 kotak berada di bawah dari kotak paling besar dan kota terkecil berada di sebelah kanan dari kotak kedua. Gampang kan? 🙂

 

2. Mendesign Relative Layout

 

Sebelum mendesign relative layout, terlebih dahulu kamu sudah mempunya projek Android, baik yang baru atau yang sudah ada. Dan buat satu file dengan nama tampilan_relative.xml. Dimana jika kamu udah mengikuti tutorial sebelumnya tinggal mengganti root tag dari LinearLayout menjadi RelativeLayout. Kamu bisa mempelajari kembali pembuatan file xml di link berikut dengan sub judul 2. Penggunaan Linear Layout dengan XML. https://www.techatmosphere.com/pengenalan-linear-layout/

Seperti biasa kamu akan dihadapkan dengan 2 tampilan design view dan code view setelah kamu membuat file xml relative layout.

Relative design view

Relative code view

 

 

 

 

 

 

 

 

 

2.1 Parent Positioning

Apa itu parent positioning? Bayangkan layar putih smartphone kamu merupakan lapangan bola trus ada pemain-pemain yang berkumpul di lapangan tersebut. Ada penjaga gawang di belakang/bawah, striker didepan/atas dll. Posisi mereka tergantung dari luar dan wilayah dari lapangan bola, itu lah parent positioning. Mari kita coba. Catatan kita akan menggunakan ukuran match marent terhadap lebar dan tinggi layar android agar lebih memahami.

 

1. Top Align Parent

Posisi ini menempatkan object berada di paling atas dari layar smartphone atau lapangan bola. Lihat gambar dibawah ini

Top align parent

 

 

 

 

 

 

 

 

 

 

Button berada di posisi paling atas, untuk membuat posisi ini kita menggunakan yang namanya align parent top yang kita set true. Xml nya kurang lebih seperti dibawah

 

2. Bottom Align Parent

Align parent bottom

 

 

 

 

 

 

 

 

 

 

Button berada di posisi paling bawah, untuk membuat posisi ini kita menggunakan yang namanya align parent bottom yang kita set true. Xml nya kurang lebih seperti dibawah

 

3. Right Align Parent

align parent right

 

 

 

 

 

 

 

 

 

 

Button berada di posisi paling kanan, untuk membuat posisi ini kita menggunakan yang namanya align parent right yang kita set true. Untuk mengatasi masalah kompatibilitas, khusus untuk align right ini kita tambahkan align parent end sehingga kita bisa mendukung tampilan di beberapa device. Xml nya kurang lebih seperti dibawah

 

4. Left Align Parent

Top align parent

 

 

 

 

 

 

 

 

 

 

Ko gambar untuk left align sama dengan top align. 🙂 . Nanti sampai kita coba gabungkan dan modifikasi akan semakin terlihat. Untuk xml nya kurang lebih seperti dibawah. Dan juga khusus untuk left align kita menambahkan satu atribut yaitu align parent start untuk kompatibilitas.

 

5. Center Vertical

center vertic

 

 

 

 

 

 

 

 

 

 

Nah disini saya menggabungkan posisi align parent left dan center vertikal sehingga posisi button berada di tengah tetapi tetap di kiri dari layar. Easy right? 🙂 Gimana kalau kita gabungkan antara align parent top dan center horizontal. Kamu akan melihat perbedaan gambar dari align parent top dan left yang barusan. Untuk XML nya kurang lebih seperti ini.

 

6. Center Horizontal

center horizontal

 

 

 

 

 

 

 

 

 

 

Kalo disini saya menggabungkan posisi center horizontal dan align parent top. Sehingga posisi berada di tengah paling atas. Sudah liat kan perbedaannya sekarang. 🙂 Untuk kode xml nya kurang lebih seperti ini.

 

7. Center in Parent

center in parent

 

 

 

 

 

 

 

 

 

 

Yang terakhir nih guys. Center in parent ini menempatkan objek berada di tengah baik secara horizontal maupun vertikal. Sehingga bener-bener tepat di tengah. Xml nya kurang lebih seperti ini.

 

2.2 Relative Sibling Position

Nah selanjutnya kita akan belajar mengenai relative sibling position. Ini nih yang bisa membuat posisi satu objek relatif terhadap objek yang lainnya. Bisa di kirinya, di kanannya, di atasnya atau di bawahnya.

 

1. To Right Of

to right of

 

 

 

 

 

 

 

 

 

 

Memposisikan objek di sebelah kanan dari objek yang lain Perhatikan button no 2, posisinya berada di sebelah kanan dari button no 1. Itu lah yang dilakukan to right of. Dan khusus untuk posisi ini juga agar kompatibilitasnya bagus, ditambahkan attribute toEndOf. Xmlnya kurang lebih seperti berikut

 

2. To Left Of

 

 

 

 

 

 

 

 

 

 

Memposisikan objek di sebelah kiri dari objek yang lain. Perhatikan button no 2, posisinya berada di sebelah kiri dari button no 1. Itu lah yang dilakukan to left of. Dan khusus untuk posisi ini juga agar kompatibilitasnya bagus, ditambahkan attribute toStartOf. Xmlnya kurang lebih seperti berikut. Disini saya menggunakan align parent right untuk button 1 sehingga terlihat jelas penggunaannya.

 

3. Above  Of

above of

 

 

 

 

 

 

 

 

 

 

Memposisikan objek di sebelah atas dari objek yang lain. Perhatikan button no 2, posisinya berada di sebelah atas dari button no 1. Itu lah yang dilakukan above of. Xmlnya kurang lebih seperti berikut. Disini saya menggunakan align parent bottom untuk button 1 sehingga terlihat jelas penggunaannya.

 

4. Below  Of

 

 

 

 

 

 

 

 

 

 

Memposisikan objek di sebelah bawah dari objek yang lain. Perhatikan button no 2, posisinya berada di sebelah bawah dari button no 1. Itu lah yang dilakukan below of. Xmlnya kurang lebih seperti berikut. Disini saya menggunakan align parent top untuk button 1 sehingga terlihat jelas penggunaannya.

 

Oke guys, seperti nya penjelasan untuk relative layout dari semua ini sudah cukup untuk bisa membuat layout yang sangat hebat, dahsyat dan fantastis. 🙂

Segitu dulu tutorial dari saya.

Sampai ketemu lagi di kesempatan lainnya.

Cheers. Happy Coding. Happy Weekend

🙂

 

 

What's your reaction?
Love It
86%
Like It
14%
Want It
0%
Had It
0%
Hated It
0%
About The Author
Tech Atmosphere
Enjoy Tech