ConstraintLayout di Android Studio

Diterjemahkan dari A Guide to using ConstraintLayout in Android Studio

Seperti disebutkan di pembahasan sebelumnya, Google telah membuat perubahan yang cukup
signifikan pada Android Studio Layout Editor, yang mayoritas ditambahkan untuk
mendukung desain antarmuka menggunakan ConstraintLayout. Sekarang setelah konsep
dasar ConstraintLayout kita bahas, saatnya sekarang kita pelajari bagaimana
mengimplementasikannya untuk mendesain antarmuka menggunakan Layout Editor.

Design dan Layout Views

Pada bahasan berjudul “Sebuah Panduan untuk Android Studio Layout Editor Tool” (yang ini
belum diterjemahkan) menjelaskan bahwa Android Studio Layout Editor memberikan dua
cara untuk melihat antarmuka yang didesain dalam bentuk Design dan Layout (dikenal juga
dengan nama blueprint) views. View-view ini dapat ditampilkan secara individu maupun
bersamaan, seperti pada Gambar 25–1, yang tampil secara bersamaan:

Design view (berada di sebelah kiri gambar di atas) menampilkan suatu “what you see is
what you get”, artinya apa yang kita lihat di sana akan ditampilkan saat aplikasi dijalankan.
Layout view, sementara itu, hanya menampilkan blueprint dari suatu desain di mana setiap
widget ditampilkan dalam bentuk kotak-kotak. Seperti yang bisa dilihat pada Gabamr 25–1 di
atas, Layout view juga menampilkan koneksi constraint (dalam kasus di atas terdapat
opposing constriant yang memosisikan sebuah button di tengah layar). Constraint-constraint
tersebut akan diperjelas di dalam Design view saat widget tertentu terpilih atau pointer mouse
berada di atasnya seperti yang digambarkan Gambar 25–2:

Tampilan koneksi constraint di kedua views bisa diubah menggunakan menu toolbar yang
ada di Gambar 25–3:
Selain dua mode untuk menampilkan layout antarmuka tadi, Layout Editor tool juga
memberikan tiga cara berbeda untuk mengatur bagaimana koneksi constraint suatu layout
ditentukan.

Autoconnect Mode
Autoconnect, sesuai namanya, akan secara otomatis memberikan koneksi constriant saat
suatu widget ditambahkan ke dalam layout. Mode autoconnect dapat diaktifkan maupun
dinonaktifkan menggunakan tombol toolbar seperti pada Gambar 25–4:

Mode autoconnect menggunakan algoritma untuk menentukan constraint yang paling cocok
untuk diberikan berdasarkan lokasi sisi suatu widget terhadap parent layout-nya saat
ditambahkan. Jika pemberian koneksi otomatis tidak sesuai harapan, nantinya kita bisa
mengubah koneksi constraint tersebut secara manual.

Inference Mode
Inference mode menggunakan metode heuristic yang terdiri atas algoritma dan kemungkinan-
kemungkinan lain untuk memosisikan suatu widget secara otomatis setelah widget tersebut
ditambahkan ke layout. Mode ini biasanya dipakai ketia fitur Autoconnect sudah dimatikan
dan objek yang ditambahkan ke layout tidak memiliki constraint apapun. Fitur ini
memungkinkan suatu layout untuk didesain hanya dengan drag and drop widget ke canvas
layout dengan merubah ukuran atau posisinya saat dibutuhkan. Secara sederhana, metode ini
membuat kita bisa mendesain layout suatu aplikasi tanpa perlu memilikirkan koneksi
constriant-nya. Mode inference dapat dipakai kapanpun untuk memberikan constraint pada
widget-widget yang belum memilikinya.

Constraint dapat diberikan secara otomatis ke sebuah layout ketika tombol Infer constraint
(Gambar 25–5) di klik:
Sama seperti mode Autoconnect, akan selalu ada kemungkinan Layout Editor untuk
memberikan constraint yang tidak sesuai, sehingga harus dimodifikasi dan diperbaiki secara
manual.

Mengatur Constraint Secara Manual

Opsi ketiga untuk memberikan koneksi constraint ialah dengan memberikannya secara
manual. Saat memberikan koneksi constraint secara manual di Layout Editor, ada beberapa
hal yang perlu diketahui. Perhatikan contoh widget pada Gambar 25–6 berikut:

Garis zigzag (A) merupakan koneksi constraint yang menghubungkan sisi suatu widget ke
sebuah target. Kotak kecil (B) di setiap sudut objek merupakan resize handle yang saat diklik
dan ditarik akan mengubah ukuran widget. Lingkaran kecil (C) yang ada di setiap sisi
merupakan constraint anchor (pemegang constraint). Untuk memberikan koneksi constriant,
klik pada anchor, tahan, lalu tarik ke elemen yang diinginkan (misalnya guideline, salah satu
sisi parent atau salah satu sisi widget lain) seperti pada Gambar 25–7. Saat memberikan
koneksi ke salah satu sisi widget lain, cukup drag dari anchor ke anchor salah satu sisi widget
lain hingga berwarna hijau, lalu lepas klik mouse.

Selain anchor pada sisi suatu widget, terdapat anchor tambahan untuk menandakan baseline
constriant pada konten yang ada di dalam widget tersebut. Untuk menampilkan tanda ini,
cukup klik saja button yang ada tulisan ‘ab’ (ditunjuk oleh penanda D pada Gambar 25–6).
Untuk memberikan koneksi constriant dari suatu handle baseline constraint, cukup arahkan
mouse ke atas handle sampai berkedip sebelum mengklik dan menariknya ke tujuan
(misalnya ke baesline anchor widget lain seperti pada Gambar 25–8). Saat baseline anchor
tujuan berwarna hijau, lepas tombol mouse:

Untuk menyembunyikan baseline anchor, klik lagi baseline button untuk yang kedua kalinya.

Menambahkan Constraint di Panel

Inspector
Constraint dapat pula di tambahkan ke sebuah view di dalam Android Studio Layout Editor
menggunakan panel Inspector yang ada di jendela Attributes seperti pada Gambar 25–9.
Kotak yang berada di tengah merepresentasikan view yang saat ini sedang terpilih dan area
disekitarnya adalah constraint yang aktif di view tersebut:

Ketidakhadiran dari suatu constraint di salah satu sisi view dapat dilihat dari titik-titik diserta
lingkaran biru dengan tanda plus (pada contoh di atas yaitu pada sisi bagian bawah). Untuk
menambah constraint, cukup klik pada lingkaran biru ini dan layout editor akan
menambahkan sebuah constraint ke view yang paling cocok menurutnya.

Menghapus Constraints
Untuk menghapus suatu constraint, cukup klik anchor yang sedang aktif. Constraint
selanjutnya akan di hapus dari layout (saat mouse di arahkan ke atas anchor ia akan berubah
menjadi merah yang menyatakan bahwa saat di klik ia akan menghapus anchor tersebut).
Jika ingin menghapus seluruh constraint sekaligus maka klik salah satu widget lalu klik
tombol Delete All Constraints yang akan muncul di sebelah widget terpilih seperti pada
Gambar 25–11:

Untuk menghapus seluruh constraint dari seluruh widget yang ada di layout, gunakan tombol
toolbar yang ditunjukkan oleh Gambar 25–12:

Mengatur Constraint Bias

Di bab sebelumnya, kita sudah membahas bagaimana memberikan suatu bais dengan
memanfaatkan opposing constraint di suatu widget. Constraint bias dapat diatur di dalam
Android Studio Layout Editor menggunakan Inspector yang ada di jendela Attributes seperti
pada Gambar 25–13. Dua slider yang ditunjuk oleh panah akan mengatur bias vertikal dan
horizontal pada widget yang sedang terpilih.
Margin Constraint dapat digunakan untuk melengkapi margin sehingga bisa memberikan
jarak antar elemen. Perhatikan horizontal constraint yang diberikan pada objek Button di
Gambar 25–14:

Seperti yang sudah diatur sebelumnya, horizontal constraint membuat posisi objek relatif
pada parent ConstraintLayout-nya. Oleh karena itu, widget tersebut memiliki opposing
horizontal constraint sehingga posisinya kini berada di tengah. Karena fitur ini, layout
memiliki fleksibilitas untuk mengakomodasi ukuran layar yang berbeda juga orientasi layar
yang berbeda. Pengaturan horizontal bias juga dapat mengontrol posisi widget sampai ke
ujung layar. Contohnya pada Gambar 25–15, memperlihatkan button dengan 100% horizontal
bias:

Margin ConstraintLayout akan diberikan di akhir ujung constraint dan memberikan jarak
berukuran tetap dimana bias tidak akan bisa melampauinya. Pada Gambar 25–16, constraint
sisi sebelah kanan memiliki margin 50dp meskipun horizontal biasnya tetap 100%.
Nilai margin yang ada pada suatu widget dapat dimodifikasi dari dalam Inspector. Seperti
pada Gambar 25–17, sebuah menu dropdown dipakai untuk mengubah margin di sisi kanan
widget terpilih menjadi 16dp. Selain itu, kita juga bisa mengubahnya dengan mengetikkan
langsung nilai yang diinginkan di kotak yang tersedia.

Margin bawaan untuk setiap constriant baru dapat diubah kapanpun melalui opsi pada toolbar
yang ditunjuk oleh panah pada Gambar 25–18:

Pentingnya opposing constraint, bias, serta margin telah dibahas di bab sebelumnya yang
menjadi fondasi responsive layout design di Android menggunakan ConstraintLayout. Saat
sebuah widget diberikan constraint tanpa opposing constraint, maka constraint tersebut akan
menggunakan margin untuk jarak constraint-nya. Hal ini bisa dilihat secara visual melalui
garis lurus yang disertai besaran margin seperti pada Gambar 25–19.
Constraint di atas akan membuat posisi widget tetap tidak perduli dengan ukuran maupun
orientasi layar. Hasilnya bisa dilihat pada Gambar 25–20 dimana posisi widget tidak terlihat
saat layar diputar. Masalah yang sama juga akan muncul pada perangkat berlayar lebih kecil.
Saat diberikan opposing constriant, ia akan digambarkan oleh garis-garis lancip (yang
memberikan tanda bahwa posisi tersebut tidak pasti pada titik koordinat X dan Y):
Pada layout di atas, vertical dan horizontal bias telah diatur sehingga posisi widget tersebut
akan selalu berjarak 90% dari bawah serta berjarak 35% dari sisi kiri parent-nya. Saat layar di
putar, maka widget tersebut masih akan memiliki persentase posisi yang sama, relatif
terhadap layar yang sekarang dilihat:
Penting untuk selalu memperhitungkan baik bias maupun opposing constraint saat mendesain
antarmuka secara manual dan melakukan koreksi saat membuat constraint otomatis.

Mengatur Ukuran Widget

Ukuran sebuah widget di dalam ConstraintLayout juga bisa diatur lewat Inspector. Seperti
yang sempat disebutkan sebelumnya, ukuran widget dapat berupa wrap content, ukuran pasti
atau mengikuti constraint (match constraint). Mode yang terpilih digambarkan oleh garis-
garis yang ada di dalam kotak seperti pada Gambar 25–23:

Pada gambar di atas, baik ukuran horizontal maupun vertikal diatur menggunakan mode wrap
content (digambarkan panah-panah ke dalam). Inspector menggunakan indikator visual
berikut untuk menggambarkan tiga mode ukuran widget:

- Fixed Size/Ukuran tetap

- Match Constraint/Mengikuti constraint

- Wrap Content

Untuk mengubah pengaturan yang sudah ada, cukup klik pada indikator tersebut. Saat ukuran
sebuah view diatur dalam mode match constraint, garis biru pada sisi-sisi tertentu akan
berubah menjadi lancip dari yang biasanya garis lurus. Pada Gambar 25–24 contohnya,
karena lebar dari view diatur menjadi match constraint maka garisnya berubah:

Selain itu, ukuran widget dapat pula diperpanjang baik secara horizontal maupun vertikal
sampai memenuhi besar maksimal yang bisa dicapai melalui opsi Expand horizontally dan
Expand vertically. Opsi-opsi ini bisa dilihat dengan cara klik kanan pada sebuah wdiget di
dalam layout lalu memilih opsi Organize pada menu yang muncul (Gambar 25–25). Saat
dipilih, widget terpilih akan mendapatkan tambahan lebar atau tinggi untuk mengisi ruang
kosong yang tersedia.

Menggunakan Guidelines
Guidelines memberikan elemen tambahan dimana kita bisa mengarahkan suatu constraint.
GUidelines bisa ditambah lewat klik kanan pada layout dan memiliki opsi Add Vertical
Guideline atau Add Horizontal Guideline atau menggunakan menu pada toolbar seperti pada
Gambar 25–26:
Setelah ditambahkan, sebuah guideline akan tampil sebagai garis putus-putus di layout dan
dapat digeser dengan drag and drop. Untuk memberikan constriant ke guideline, klik pada
handler constriant suatu widget lalu tarik ke guideline sebelum di lepas. Pada Gambar 25–27,
sisi kiri dari dua Button terhubung oleh constraint ke sebuah vertical guideline.

Posisi dari sebuah vertical guideline dapat diatur dengan ukuran tetap dari posisi atas, bawah,
kiri, atau kanan parent. Vertical guideline pada contoh gambar di atas contohnya, memiliki
posisi 96dp dari sisi kiri parent.
Kita juga bisa memberikan posisi dengan persentase dari keseluruhan lebar atau tinggi parent.
Untuk mengubah mode guideline, pilih salah satu guideline yang diinginkan lalu klik
lingkaran pada bagian atas atau kiri guideline (tergantung pada apakah guideline tersebut
vertikal atau horizontal). Gambar 25–28, contohnya, akan menampilkan sebuah guideline
yang diposisikan menggunakan persentase:
Menambahkan Barriers
Barrier dapat ditambah dengan cara klik kanan di layout dan memilih salah satu dari Add
Vertical Barrier atau Add Horizontal Barrier, atau menggunakan menu pada toolbar seperti
pada Gambar 25–29:

Setelah sebuah barrier ditambahkan ke layout, ia akan terdaftar sebagai salah satu item di
panel Component Tree:

Untuk menambah suatu view sebagai reference view (yang dalam arti lain sebagai view yang
menentukan posisi barrier), cukup drag widget tersebut ke dalam barrier. Pada Gambar 25–
31, contohnya, widget bernama textView1 dan textView2 telah diatur sebagai reference
widget untuk barrier1:

Setelah reference view di tambahkan, barrier perlu tahu ke mana ia perlu menentukan arah
barrier berdasarkan dua view tadi. Pengaturan arah barrier diatur dari dalam jendela
Attributes tool saat barrier terpilih di panel Component Tree:
Gambar berikut menunjukkan sebuah layout dengan sebuah barrier yang di dalamnya
terdapat textView1 dan textView2 sebagai reference view serta textView3 sebagai
constrained view. Karena barrier akan bergerak dari sisi sebelah kanan reference view ke arah
constraint view, maka barrier directionnya di atur ke end:

Widget Group Alignment

Layout Editor Android Studio memberikan banyak pilihan alignment saat dua atau lebih
widget terpilih di layout. Cukup klik sambil menekan tombol shift di setiap widget untuk ikut
terseleksi, lalu klik kanan dan pilih opsi-opsi untuk mensejajarkan widget-widget terpilih:
Seperti pada Gambar 25–35 di bawah, opsi-opsi tersebut juga tersedia sebagai sebuah tombol
di toolbar Layout Editor:

Mengubah Layout lain ke

ConstraintLayout
Untuk layout yang dibuat dengan layout terdahulu (seperti RelativeLayout atau
LinearLayout), Layout Editor telah memiliki opsi untuk mengubahnya menjadi
ConstriantLayout.

Saat Layout Editor tampil dalam Design mode, panel Component Tree akan terlihat di bagian
bawah Palette. Mengubah sebuah layout menjadi ConstraintLayout dapat dilakukan dengan
memilih layout yang ingin diubah, klik kanan lalu pilih Convert <jenis layout> to Constraint
Layout:

Saat opsi ini terpilih, Android Studio akan mengubah layout sekarang menjadi Constriant
Layout dan menggunakan inference untuk menentukan constriant yang paling sesuai.

Kesimpulan
Layout Editor yang telah didesain ulang bersama dengan ConstraintLayout membuat proses
desain antarmuka yang kompleks di Android Studio menjadi lebih cepat dan intuitif. Bab ini
telah membahas konsep-konsep seperti constraint, margin, dan bias lebih mendetail serta
membahas bagaimana memanfaatkan fitur-fitur desain berbasis ConstraintLayout yang telah
terintegrasi di Layout Editor.