ConstraintLayout merupakan layout ViewGroup yang memungkinkan pengaturan posisi dan ukuran widget secara fleksibel tanpa hierarki tampilan tersarang. Constraint mendefinisikan hubungan antara dua widget dan mengontrol penempatannya. Chains memungkinkan berbagi ruang antar view dalam rantai dan mengontrol pembagian ruang yang tersedia.

1. ConstraintLayout: Handle
with Care
Presented by: Danviero Yuzwan

2. Pendahuluan
ConstraintLayout merupakan sebuah komponen layout ViewGroup
yang memungkinkan Anda untuk mengatur posisi dan ukuran widget
dengan cara yang fleksibel. ConstraintLayout memungkinkan Anda
membuat tata letak yang kompleks dan besar dengan hierarki tampilan
datar (tidak ada grup tampilan tersarang). ConstraintLayout mirip
dengan RelativeLayout yang semua tampilannya diletakkan sesuai
dengan hubungan antara tampilan yang setara dan tata letak induk,
tetapi lebih fleksibel dari RelativeLayout dan lebih mudah digunakan
dengan Layout Editor Android Studio.
https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout

3. Menambahkan ConstraintLayout ke project
1. Pastikan Anda memiliki repositori
maven.google.com yang dinyatakan pada file
build.gradle di tingkat modul:
2. Tambahkan library sebagai dependensi di file
build.gradle yang sama, seperti yang
ditunjukkan di contoh berikut. Perlu diperhatikan
bahwa versi terbaru mungkin berbeda dengan
yang ditunjukkan di contoh:
Cara menambahkan ConstraintLayout di project Anda, silakan ikuti langkah-langkah berikut:
3. Pada notifikasi sinkronisasi atau toolbar, klik Sync Project with
Gradle Files.

4. Constraint
Apa yang dimaksud dengan constraints?
Fundamental dari membangun ConstraintLayout
adalah menciptakan constraint. Constraint
mendefinisikan hubungan antara dua widget di
dalam layout dan mengontrol bagaimana widget
tersebut akan ditempatkan di dalam layout.
Bagi yang baru mengenal ConstraintLayout,
tetapi cukup akrab/familiar dengan
RelativeLayout, prinsip dasar tentang
bagaimana constraint berfungsi sebenarnya
sangat mirip dengan bagaimana kita membuat
hubungan antar widget pada RelativeLayout.

5. Menambahkan
Constraint
Cara termudah untuk mempelajari
bagaimana membuat Constraint
adalah menggunakan visual editor
pada Android Studio. Beberapa
gambar contoh pada bagian ini akan
menunjukkan bagaimana cara untuk
menambahkannya, yang ditampilkan
dalam bentuk tampilan blueprint.
Caranya Klik constraint handle
(lingkaran) kemudian tarik ke titik link
yang tersedia. Titik ini dapat menjadi
tepi tampilan lain, tepi layout, atau
guideline misalnya. Anda akan melihat
bahwa saat menarik constraint handle,
Layout Editor akan menampilkan
anchor sambungan potensial dan
overlay berwarna biru.

6. Menghapus
Constraint
Anda dapat menghapus batasan
dengan melakukan salah satu langkah
berikut:
1. Klik constraint yang dipilih, lalu
tekan tombol Delete.
2. Tekan dan tahan Control
(Command di macOS), lalu klik
anchor pembatas. Constraint akan
menjadi berwarna merah Anda
dapat mengklik untuk
menghapusnya.
3. Pada bagian Layout jendela
Attributes, klik anchor point.
4. Pada file XML, dengan cara
menghapus atribut constraint
itu sendiri.

7. Aturan membuat Constraint
Saat membuat constraint, ingat aturan berikut:
● Setiap tampilan harus memiliki setidaknya dua constraint: satu horizontal dan satu vertikal.
Contoh attribute:
Vertical constraint -> app:layout_constraintTop_toTopOf="parent"
Horizontal constraint -> app:layout_constraintStart_toStartOf="parent"
● Anda hanya dapat membuat constraint di antara constraint handle dan titik link yang memiliki
bidang sama. Jadi, bidang vertikal (sisi kiri dan kanan) tampilan hanya dapat dibatasi ke bidang
vertikal lain; dan baseline hanya dapat dibatasi ke baseline lain.
● Setiap constraint handle hanya dapat digunakan untuk satu constraint saja, tetapi Anda dapat
membuat beberapa batasan (dari tampilan yang berbeda) ke titik link yang sama.

9. Membuat UI Responsif dengan ConstraintLayout

10. Bagaimana hasilnya?
Apakah kalian menemukan
sesuatu?
Teks “200K IDR” menumpuk dengan
button “Pilih”. Lalu apakah terdapat
kekurangan dalam menentukan
constraint pada widget TextView
tersebut?

11. Menambahkan constraint pada teks harga

13. Ada perubahan data

14. Bagaimana hasil perubahannya?

15. Handle with
Care
Why we should care about
constraint?

16. How to fix it?

17. Chains
Membuat sebuah chainsApa itu chains?
Chains adalah jenis constraint tertentu yang
memungkinkan untuk berbagi ruang antar view
(multiple view) dalam chains dan mengontrol
bagaimana ruang yang tersedia dibagi di antara
view. Analogi terdekat dengan layout tradisional
Android adalah bobot (weight) di
LinearLayout, tetapi chains lebih dari itu.
Tampilan dalam rantai dapat didistribusikan
secara vertikal atau horizontal.

18. Menambahkan horizontal chains pada title dan button

19. Perubahan file XML layout setelah menambahkan chains

20. Menambahkan weight (bobot) pada chains
Chains

21. Menambahkan constraint baru pada teks description

22. Jenis style pada chains
1. Spread: Views didistribusikan secara
merata (setelah margin diperhitungkan)
merupakan default.
2. Spread inside: View pertama dan kedua
dilekatkan pada constraint di setiap ujung
chains dan sisanya didistribusikan secara
merata.
3. Weighted: "match constraints" (0dp).
layout_constraintHorizontal_weight
layout_constraintVertical_weight. Jika
Anda sudah terbiasa dengan
layout_weight di LinearLayout, ini
memiliki cara kerja yang sama.
4. Packed: Views dikemas bersama. Posisi
view yang dikemas dapat lebih dikontrol
dengan mengubah nilai bias

23. Menerapkan vertical chains pada teks harga dan button

24. Menerapkan style “packed” pada chains

26. Terima kasih!
Contact me:
Danviero Yuzwan
yuzwan19@gmail.com
@yuzwan19
Medium:
https://medium.com/@yuzwan19/chapter-
1-clean-code-dd75e8c30b1c

27. What’s Next?
Try Codelabs
Use ConstraintLayout to
design your Android views
https://codelabs.developers.google.com/c
odelabs/constraint-layout/index.html#0

28. Building interfaces
with
ConstraintLayout in
Android Studio
From Android Developers
youtube channel

29. Lihat referensi
layout UI yang lagi
populer
Contohnya dari :
https://dribbble.com/shots/popular/

30. Referensi
● https://developer.android.com/training/constraint-layout
● https://constraintlayout.com/
● https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
● https://www.dicoding.com/blog/kenal-lebih-dekat-dengan-constraintlayout/