PERBEDAAN ANTARA LAYOUT RELATIVE, LINEAR DAN CONSTRAINT

Linear layout adalah layout yang terstruktur. linear layout akan meletakkan elemen yang ada di dalamnya secara berurutan tergantung orientationnya. jika  orientationnya vertical, maka peletakan elemen akan terurut kebawah. Sedangkan jika orientationnya horizontal (secara default, orientation horizontal tidak ditulis di dalam XML), maka peletakan elemennya akan terurut ke samping.

Tutorial Membuat Linear Layout di Android menggunakan Android Studio

Pada tutorial ini kita akan membuat dua buah LinearLayout yang berisi tiga Button, di LinearLayout pertama kita akan set orientation ke vertical, sedangkan di LinearLayout kedua akan kita set orientationnya horizontal.

Pertama-tama, seperti biasa kalian buat project baru di Android Studio terlebih dahulu, Setelah itu buka file activity_main.xml, dan copy paste kan kode berikut :

 Pada kode XML di atas, kiranya sudah menjelaskan contoh orientation pada LinearLayout. Dan dalam Android kita bisa memasukkan LinearLayout di dalam LinearLayout, begitu juga RelativeLayout, atau pun RelativeLayout di dalam LinearLayout dan sebaliknya.

.DEMO

Relative layout adalah layout yang tergantung. Relative layout akan meletakkan elemen secara bebas, tidak terurut. Peletakan berdasarkan ketergantungannya kepada yang lain misal kepada parent atau kepada elemen lain. Relative Layout sangat flexible, lebih flexible dibandingkan dengan Linear Layout, namun untuk menguasainya sangatlah susah. Karena pada prakteknya Relative Layout 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 Relative Layout.

Tutorial Membuat RelativeLayout Sederhana di Android

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 :

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 truemaka 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.

.DEMO

Layout Constraint

Untuk menentukan posisi tampilan di ConstraintLayout, Anda harus menambahkan setidaknya satu batasan horizontal dan satu vertikal untuk tampilan. Setiap kendala mewakili koneksi atau penyelarasan ke tampilan lain, tata letak induk, atau pedoman yang tak terlihat. Setiap kendala mendefinisikan posisi tampilan di sepanjang sumbu vertikal atau horizontal; jadi setiap tampilan harus memiliki minimal satu kendala untuk setiap sumbu, tetapi lebih sering diperlukan.

Ketika Anda menjatuhkan tampilan ke Editor Layout, itu tetap di mana Anda meninggalkannya bahkan jika itu tidak memiliki kendala. Namun, ini hanya untuk mempermudah pengeditan; jika tampilan tidak memiliki kendala ketika Anda menjalankan tata letak pada perangkat, itu ditarik pada posisi [0,0] (sudut kiri atas).

Pada gambar 1, tata letak terlihat bagus di editor, tetapi tidak ada batasan vertikal pada tampilan C. Saat tata letak ini menggunakan perangkat, tampilan C secara horizontal sejajar dengan sisi kiri dan kanan tampilan A, tetapi muncul di bagian atas layar karena tidak ada batasan vertikal.

       Gambar 1. Editor menunjukkan tampilan C di bawah A, tetapi tidak memiliki batasan vertikal

                           Gambar 2. Tampilan C sekarang dibatasi secara vertikal di bawah tampilan A

Tambahkan pustaka sebagai dependensi dalam file build.gradle yang sama, seperti yang ditunjukkan pada contoh di bawah ini. Perhatikan bahwa versi terbaru mungkin berbeda dari yang ditampilkan dalam contoh:

Di bilah alat atau notifikasi sinkronisasi, klik Sinkronkan Proyek dengan File Gradle.

Sekarang Anda siap membangun tata letak dengan ConstraintLayout.

Ubah tata letak:

Untuk mengonversi tata letak yang ada ke tata letak kendala, ikuti langkah-langkah berikut:

Buka tata letak Anda di Android Studio dan klik tab Desain di bagian bawah jendela editor.

Di jendela Component Tree, klik kanan tata letak dan klik Ubah tata letak ke ConstraintLayout.

Buat tata letak baru

Untuk memulai file layout kendala baru, ikuti langkah-langkah berikut:

Di jendela Project, 

1. klik folder modul dan kemudian pilih File> New> XML> Layout XML.

2. Masukkan nama untuk file layout dan masukkan "android.support.constraint.Constraint.ConstraintLayout" untuk Tag Root.

3. Klik Selesai.

Sekian dan Terima Kasih.