Nama : I Wyn Aditya Krisna Yoga

NIM : 1705551024

Matakuliah : Pemrograman Mobile (B)

Tugas 2
Constraint Layout

1. Understanding Constraint Layout

Akun youtube Coding in Flow merilis video pertama mengenai pengertian dan
pemahaman dari constraint layout. Constraint layout dirilis pada android studio pada tahun 2016
dengan tujuan membuat hirarki baru dengan layer sedatar mungkin dan penggunaan dari
constraint layout lebih fleksibel dibandingkan dengan relative layout. Berikut beberapa bagian
yang dijelaskan oleh Coding in Flow pada videonya.
a. Mengubah Layout lain menjadi Constraint Layout

Gambar 1.1 Mengubah Layout menjadi Constraints Layout

Gambar 1.1 memperlihatkan cara mengubah Linear Layout menjadi Constraint Layout.
Caranya yakni pada bagian “Component Tree” lakukan klik kanan di “LinearLayout”, kemudian
pilih “Convert LinearLayout to ConstraintLayout” dan secara otomatis merubah Linear
Layout menjadi Constraint Layout.
b. Fitur Infer Constraints

Gambar 1.2 Infer Constraints

Gambar 1.2 memperlihatkan cara menambahkan anchor point secara otomatis sehingga
object mendapat fungsi constraint.

c. Fitur Clear All Constraints

Gambar 1.3 Clear All Constraints

Gambar 1.3 memperlihatkan cara menghapus semua anchor point pada object sehingga
object tidak lagi mendapat fungsi constraint.
d. Perpindahan Object Pada Layout

Gambar 1.4 Object Tanpa Constraint

Gambar 1.4 memperlihatkan object yang belum diberikan constraint terhadap sisi
horizontal, start ataupun end. Object pada Gambar 1.4 akan kembali pada titik 0,0 saat program
dijalankan pada android.

Gambar 1.5 Object Dengan Constraint

Gambar 1.5 memperlihatkan object yang sudah diberikan constraint pada sisi bottom dan
end sehingga pada saat program dijalankan di android, object tidak akan berpindah posisi kembali
ke titik 0,0.

e. Fitur Vertical dan Horizontal Bias

Gambar 1.6 Bias Default

Gambar 1.6 memperlihatkan object yang diberikan fitur bias secara default sehingga
object akan berada tepat pada tengah layar android.
 Gambar 1.7 Object Bias Custom

Gambar 1.7 memperlihatkan object yang telah diberikan fitur bias sehingga object tidak
lagi berada tepat pada tengah layar android.

f. Mengubah Wrap content, Size dp, Match Constraints

Gambar 1.8 Wrap content

Gambar 1.8 memperlihatkan width cara untuk merubah container pada object menjadi
wrap content dengan margin 0 pada semua sisi.

Gambar 1.9 Size dp

 Gambar 1.9 memperlihatkan width cara untuk merubah container pada object menjadi
size dimana size yang dimasukkan pada Gambar 1.9 adalah 213dp.

Gambar 1.10 Match Constraint

Gambar 1.10 memperlihatkan width cara untuk merubah container pada object menjadi
match constraint dengan margin 0 pada semua sisi.

g. Mengubah Margin Layout

Gambar 1.11 Margin Layout

Gambar 1.11 memperlihatkan cara mengubah besaran dari margin pada layout sehingga
semua object yang nantinya masuk ke dalam layout akan ber-margin 24dp.
 Gambar 1.12 Hasil Perubahan Margin Layout ke Object

Gambar 1.12 memperlihatkan margin pada object yang baru dimasukkan ke dalam layout
berubah menjadi 24dp pada sisi start dan end layout.

h. Turn Auto Connect

Gambar 1.13 Turn Off Autoconnect

Gambar 1.13 memperlihatkan object yang baru saja dimasukkan ke dalam layer tidak
dengan fungsi auto connect “off” akan nampak normal karena fitur auto connect secara default
berada pada posisi “off”.
 Gambar 1.14 Turn On Autoconnect

Gambar 1.14 memperlihatkan object yang baru dimasukkan setelah auto connect berada
pada posisi “on” dan object yang baru dimasukkan harus berada pada tengah atas sehingga fitur
dari auto connect secara otomatis memberikan anchor point pada sisi start dan end dari layout.
Fitur auto connect tidak akan bekerja saat object yang dimasukkan tidak berada di tengah baik
tengah atas, tengah bawah, ataupun berada tepat pada tengah layout.

i. Anchor point Pada Parent dan Layout

Gambar 1.15 Object_2 Anchor point Tengah ke Object_1

 Gambar 1.15 memperlihatkan object_2 yang memberikan anchor point pada bagian
tengah terhadap object_1 sehingga object_2 nantinya akan mengikut perpindahan object_1 dan
tetap berada posisinya.

Gambar 1.16 Object_2 Anchor point End ke Object_1

Gambar 1.16 memperlihatkan object_2 yang memberikan anchor point pada bagian end
dari object_1 sehingga object_2 akan menyesuaikan kebagian End dari object_1 dan mendapat
auto margin dari layout sebesar 24dp.

Gambar 1.17 Object_2 Anchor point Start ke Layout

 Gambar 1.17 memperlihatkan object_2 memberikan anchor point pada sisi start dari
layout yang menyebabkan object_2 kembali pada posisi tengah dari object_1 namun tetap
mengikuti end dari object_1.

j. Fitur Align

Gambar 1.18 Pemilihan Object

Gambar 1.18 memperlihatkan object_1 dan object_2 telah dipilih atau di-select dengan
menggunakan cara menekan keyboard “shift” lalu klik kiri pada object menggunakan mouse.

Gambar 1.19 Right Edges

Gambar 1.19 memperlihatkan object yang telah dipilih sebelumnya akan diberikan fitur
align berupa right edges pada bagian atas dari preview design android.
 Gambar 1.20 Hasil Right Edges

Gambar 1.20 memperlihatkan hasil dari pemilihan align pada kedua object yang ada pada
layer, sehingga object_2 nampaknya hanya memberikan anchor pada bagian tengah dan end dari
object_1
2. Match Constraint, Baseline dan Ratio
Video kedua milik Coding in Flow memberikan penjelasan mengenai match constraint
antar object button, baseline antar object, dan ratio yang berhubungan dengan gambar. Berikut
adalah penjelasan dari bagian pada video kedua.
a. Match Constraint

Gambar 2.1 Object Wrap Content

Gambar 2.1 memperlihatkan terdapat tiga buah object button dimana object yang berada
dibawah memberikan anchor point kepada dua buah object diatasnya sehingga berada tepat
ditengah.

Gambar 2.2 Mengganti Wrap Content ke Match Constraint

 Gambar 2.2 memperlihatkan layout width pada object pemberi anchor point yang
awalnya wrap content akan diubah menjadi match constraint.

Gambar 2.3 Hasil Perubahan Match Constraint

Gambar 2.3 memperlihatkan hasil dari perubahan wrap content menjadi match constraint
pada object pemberi anchor sehingga ukuran width dari object menyesuaikan dengan jarak kedua
object lainnya namun tetap dapat diberikan margin. Object yang diubah diberikan margin sebesar
8dp untuk sisi start dan end-nya.

Gambar 2.4 Menghilangkan Satu Anchor Point

Gambar 2.4 memperlihatkan salah satu anchor point pada object dihapuskan, sehingga
ukuran lebar dari object kembali pada bentuk semula.
 Gambar 2.5 Anchor Point Object ke Layout

Gambar 2.5 memperlihatkan object sudah tidak lagi memberi anchor point pada object
lainnya namun kepada layout sisi start dan end. Lebar dari object sebelumnya sudah diatur pada
posisi match constraint sehingga object akan melebar seukuran layout dengan jarak margin
sebesar 8dp pada sisi start dan end.

Gambar 2.6 Mengubah Spread Menjadi Wrap

Gambar 2.6 memperlihatkan cara mengubah default dari pelebaran object yang awalnya
spread menjadi wrap dengan menambahkan script
“app:layout_constraintWidth_default=""” lalu menambahkan wrap didalam petik dua.
 Gambar 2.7 Tampilan Setelah Wrap

Gambar 2.7 memperlihatkan kedua object yang dijadikan parent lebih merapat sehingga
object child menjadi lebih di stretch kebawah. Match constraint dapat dikatakan sebagai efek
untuk menyesuaikan dengan container dari parent yang diberikan kepada child-nya.

b. Baseline

Gambar 2.8 Membuat Tiga Object

Gambar 2.8 memperlihatkan pembuatan dari tiga object yakni button, textview ukuran
normal, serta textview dengan ukuran yang lebih besar.
 Gambar 2.9 Menampilkan Baseline

Gambar 2.9 memperlihatkan cara untuk menampilkan baseline dari sebuah object dengan
memilih atau men-select salah satu object lalu klik tombol yang terdapat huruf “ab” serta memiliki
titik-titik dibawahnya.
 Gambar 2.10 Menarik Baseline

Gambar 2.10 memperlihatkan cara menyesuaikan baseline. Apabila sudah melakukan

tahap sesuai dengan Gambar 2.9, akan muncul tanda seperti pada Gambar 2.10 lalu tarik tanda
tersebut menuju tanda yang dimiliki object lain yang akan dijadikan contoh posisi baseline dari
object yang ditarik.
 Gambar 2.11 Hasil Akhir Baseline

Gambar 2.11 memperlihatkan hasil setelah dilakukan penyesuaian sesuai dengan baseline
pada masing-masing object yang menjadikan object tengah sebagai referensi atau acuan dalam
posisi baseline object.

c. Ratio

Gambar 2.12 Membuat Imageview

 Gambar 2.12 memperlihatkan sebuah imageview dimasukkan kedalam layout lalu
membuatnya berada tepat ditengah layout lalu memberikannya constraint dengan fitur infer
constraint agar mempermudah proses constraint.

Gambar 2.13 Mengubah Layout Width dan Height

Gambar 2.13 memperlihatkan layout width serta layout height dari object imageview yang
awalnya wrap content menjadi match constraint sehingga memenuhi layout.

Gambar 2.14 Mengubah Ratio Gambar

Gambar 2.14 memperlihatkan object imageview diubah ratio-nya yang secara default
sebesar 1:1 menjadi 16:9 dengan meng-klik bagian ujung bentuk segitiga pada panel perubahan
anchor dibagian akan window android studio. Bagian text akan menambahkan script
“app:layout_constraintDimensionRatio="h,16:9"”, dimana “h” pada script tersebut
menjelaskan ratio gambar berada pada posisi height, dan jika “w” akan berarti posisi width.

Gambar 2.15 Gambar Setelah Landscape

Gambar 2.15 memperlihatkan hasil tampilan match constraint dan ratio dari object
imageview pada posisi android landscape. Tombol untuk menampilkan ratio pada object
imageview hanya akan terlihat saat layout width atau layout height ataupun keduanya diubah
menjadi match constraint dan tidak lagi wrap content. Namun saat salah satu atau bahkan
keduanya diubah kembali menjadi wrap content, ratio tetap pada pengaturan saat match constraint
dan container dari imageview akan mem-press kembali ke resource gambar seperti awal.