Tentang Pengaturan Layout di Android (Constraint dan Linear Layout)

Pada umumnya, kita dapat mengatur jenis layout yang akan kita terapkan pada tamplian project. Terdapat beberapa jenis layout, secara umum yang paling sering digunakan adalah

Liniear Layout adalah design tampilan pada aplikasi kita dengan tata letak secara vertical dan horizontal dimana tata letak aplikasi kita hanya bisa memasukan media secara mendatar dan menurun.

Relative Layout design tampilan pada aplikasi kita dengan tata letak secara bebas tanpa aturan sesuai keinginan kita.tidak seperti Linear Layout yang hanya terpaku pada salah satu tampilan vertical dan horizontal.

Constraint layout adalah layout dari android studio yang bisa membuat layout lebih kompleks dan responsive. Constraint layout bisa disebut juga pengembangan dari relative layoutnya android. Dengan menggunakan layout editornya android studio constraint layout ini akan lebih powerfull pemakaiannya.

Pertama kita akan membuat tampilan relative layout. Pertama kita rubah default layout yaitu constraint layout menjadi RelativeLayout seperti berikut:

 

Dalam merubah menjadi Relative, memang kadang terjadi sedikit mengacak pada tampilan karena sifat RelativeLayout yang memang paling fleksibel diantara layout lainnya.

Atur ulang tata letak seperti sebelumnya

Jika kita run menjadi landscape, maka button count tidak akan kelihatan, karena kita tidak mengatur tentang tampilan landscape pada relative layout.

 

Pada Relative Layout, ada beberapa attribute yang otomatis terbuat jika kita mengganti ke layout ini. Seperti contohnya attribute:

android:layout_below=”@+id/show_count”

android:layout_centerHorizontal=”true”

kita bisa lihat, attribute “….layout_below” merepresentasikan disebelah mana attribute tersebut berada, dibawah, diatas atau di samping attribute lainnya

Kemudian, atur ukuran menjadi seperti berikut, ubah “layout_width” menjadi wrap_content

 

Kemudian atur posisi kedua button disamping kiri atas TextView Count, seperti berikut ini:

 

Kita bisa lihat bahwa attribute “…toRightOf” dan “…toEndOf” otomatis terbuat

 

Hasilnya akan seperti berikut jika di run

 

Lendscape mode

Kemudian kita akan mengatur tampilan dengan ConstraintLayout.

Constraint layout adalah layout dari android studio yang bisa membuat layout lebih kompleks dan responsive. Constraint layout bisa disebut juga pengembangan dari relative layoutnya android. Dengan menggunakan layout editornya android studio constraint layout ini akan lebih powerfull pemakaiannya.

Sebelum kita merubah menjadi ConstraintLayout, kita pastikan dulu bahwa Layout available.

Masuk ke Tools > Android > SDK Manager. Masuk ke tab Android SDK, expand Support Repository kemudian pastikan “ConstraintLayout” dan “Solver for ConstraintLayout ” tercentang

 

Jika sudah, klik kanan pada rootgroup view, kemudian pilih “Convert LinearLayout to ConstraintLayout”

 

Kemudian kita “Clear All Constraint” agar tidak teracak ketika mengganti ke constraintLayout

Kita bisa mengatur horizontal dan vertical view control pada ConstraintLayout ini

 

1. Untuk Horizontal View Control. Kita bisa mengatur apakah Match Constraint, Fixed, atau wrap content, pengaturannya sesuai kebutuhan design. Pada Hotizontal View Control ini untuk mengontrol keterkaitan sebuah konten dengan konten lainnya secara horizontal
2. Adalah Vertical. Fungsinya tentu untuk mengatur hubungan secara vertical

 

Berikut adalah attribute umum pada ConstraintLayout:

 

1. Resizing handle.
2. Constraint line and handle. In the figure, the constraint aligns the left side of the show_count view to the left side of the button_toast button.
3. Baseline handle. The baseline handle aligns the text baseline of a view to the text baseline of another view.
4. Constraint handle without a constraint line.

Kita bisa mengatur tata letak di constrainLayout ini menggunakan baseline handler dan consraint line and handle

 

Kemudian kita atur tata letak seperti berikut:

 

Jika di Run hasilnya akan seperti ini