Hidup Kamu Penuh Constraint? Di Android juga Ada, ConstraintLayout Namanya

Halo semua!
Pernah ga sih pusing bikin UI di Android? Masih pusing mikirin ukuran objek yang pas di layar? Atau mau ngatur posisi objek tapi berubah-ubah terus? Apa aja ya yang perlu diatur biar responsive? Banyak ya yang perlu diatur dalam layout. Iya, banyak. Kayak hidup kamu gitu emang banyak masalah. Minggu pertama sprint 1 ini, task-ku buat UI. Awalnya pusing banget ngatur layout di Android. Tapi jangan khawatir, sekarang ga perlu pusing lagi di Android (ya kalo di hidup sih emang udah takdir) soalnya sekarang kita bakal kenalan sama yang namanya ConstraintLayout.

Setup

Sebelum kita mulai, ada beberapa hal nih yang perlu dipersiapkan.

1. Pastikan kamu sudah install Android Studio. Kalau belum punya bisa unduh di https://developer.android.com/studio/index.html.
2. Tambahkan dependency untuk ConstraintLayout pada build.gradle.

implementation 
    'com.android.support.constraint:constraint-layout:1.0.2'

ConstraintLayout

ConstraintLayout memungkinkan kita untuk mengatur posisi objek menggunakan constraint dengan objek lainnya sesuai keinginan kita. Misalkan kita ingin mengatur agar textbox A selalu berada di atas textbox B dan di kanan textbox C, kita hanya perlu memberikan constraint pada textbox A ke textbox B dan textbox C.

Pemberian constraint dapat dilakukan dengan dua cara, yakni manual dan otomatis. Kabar gembira untuk kita semua! Kedua-duanya bisa dilakukan dengan menggunakan GUI daripada langsung edit XML. Oh iya, untuk mengaplikasikan ConstraintLayout setidaknya kalian perlu tahu 2 hal ini:

1. Setiap view harus memiliki minimal 1 constraint vertikal dan 1 constraint horizontal.
2. Default margin antar view biasanya 8 untuk memastikan agar jarak antarview tidak terlalu mepet.

Let’s Try!

Kali ini, saya akan fokus pada pembahasan manual constraint karena kita jadi lebih punya kendali sama layout kita. Misal kita ingin membuat mockup seperti ini dimana textbox A berada di bawah AppBar, textbox B berada di bawah textbox A.

Karena ingin memberi constraint secara manual pastikan kalian menonaktifkan opsi ini

1. Buat textbox A, kemudian berikan constraint atas ke AppBar, constraint kiri ke ujung kiri layar, dan constraint kanan ke ujung kanan layar. Ukuran constraint dapat disesuaikan dengan keinginan, dalam kasus ini ukuran yang sesuai adalah 16 dpuntuk constraint atas, 24dp untuk constraint kiri, dan 24dp untuk constraint kanan.

2. Buat textbox B, kemudian berikan constraint atas ke textbox A sehingga textbox B selalu berada di bawah textboxA. Sementara, constraint kiri dan kanan tetap diberikan ke masing-masing ujung layar. Ukuran constraint yang sesuai disini adalah 16dp untuk constraint atas, 24dp untuk constraint kiri, dan 24dp untuk constraint kanan.

3. Selesai :)

Mudah sekali bukan menggunakan ConstraintLayout? Sekarang kalian bisa membuat UI di Android dengan hati yang gembira. #PPLMenyenangkan

Referensi
https://developer.android.com/training/constraint-layout/index.html
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html