Kenal Lebih Dekat dengan ConstraintLayout

Kenal Lebih Dekat dengan ConstraintLayout-

Tunjuk jari siapa yang hobi ngulik tampilan aplikasi alias UI? Kalau itu kamu, ya kamu.. Wajib hukumnya kenalan sama yang namanya ConstraintLayout.

Dalam pengembangan sebuah aplikasi, khususnya Android, salah satu prosesnya adalah menyusun tampilan aplikasi di dalam sebuah berkas xml. Untuk keperluan itu, kita akan pilih komponen apa saja yang pas digunakan untuk menyusun tampilan aplikasi tersebut.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Nah, saat ingin menyusun tampilan aplikasi berbasis Android, kita perlu menentukan parent atau root untuk sebuah tampilan.

Parent atau root dari sebuah tampilan sendiri adalah komponen ViewGroup terluar dari sebuah layout. Di dalamnya terdapat view yang digunakan untuk menampilkan informasi. Kita bisa loh, menggunakan komponen seperti LinearLayout, FrameLayout dsb tergantung spesifikasi desain aplikasi.

Mau membuat aplikasi yang akan menampilkan informasi secara berjejer ke bawah atau ke samping? Gunakan LinearLayout.

Lalu bagaimana menampilkan informasi yang tata letaknya relatif? Kita bisa gunakan RelativeLayout. Clear kan?

Eh tapi lantas bagaimana jika sebuah aplikasi memiliki tampilan yang cukup kompleks? Sebagai contoh, 2 (dua) aplikasi yang sering kita pakai untuk belanja online berikut:

Bukalapak dan Tokopedia

Tentunya kita membutuhkan komponen yang dapat digunakan untuk menyusun tampilan tersebut dengan mudah. Sebenarnya kita bisa menggunakan LinearLayout atau RelativeLayout. Namun dalam penerapannya, tak jarang kita berhadapan dengan yang namanya nested layout.

Apa itu Nested Layout?

Nested layout adalah kondisi di mana sebuah parent layout yang memiliki parent layout lagi di dalamnya. Contohnya seperti berikut:

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</LinearLayout>

</RelativeLayout>

Dalam pembuatannya, tak akan tidak akan terdapat warning atau pesan lain. Apa pasal? Semata-mata karena itu adalah hal yang wajar. Tapi yang harus diperhatikan dari nested layout tersebut adalah masalah performa aplikasi. Jika di dalam sebuah berkas xml ada satu atau lebih nested layout, proses seperti inisialisasi layout dan proses render akan memakan banyak memori.

Apa akibatnya?

Aplikasi kita akan terasa lambat ketika dijalankan pada peranti atau emulator.

Untuk mengatasi kasus tersebut, ada solusinya! Android menawarkan komponen view yang bernama ConstraintLayout.

Apa itu ConstraintLayout?

ConstraintLayout merupakan salah satu komponen ViewGroup yang dapat kita gunakan untuk menyusun tampilan aplikasi yang kompleks tanpa adanya nested layout. ConstraintLayout tersedia dengan dukungan kompatibilitas mulai dari Android 2.3 (API Level 9) sampai dengan yang terbaru.

ConstraintLayout memiliki kesamaan dengan RelativeLayout. Dalam penggunaan semua view yang berada di dalamnya disusun berhubungan antara parent dan view lainnya. Tapi ConstraintLayout lebih fleksibel dari RelativeLayout dan mudah digunakan dengan dukungan Layout Editor pada Android Studio.

Let’s say kita menambah view baru ke dalam ConstraintLayout. Kita gunakan drag and drop di Layout Editor yang berada pada tab Design atau dengan menambahnya secara manual melalui tab Text. Kita perlu menentukan posisi dari view atau bagaimana agar view tersebut terhubung dengan parent layout atau view lainnya.

Kenapa gerangan?

Karena setelah ditambahkan, view tersebut tidak memiliki constraint yang menghubungkannya dengan parent layout atau view lainnya. Sehingga ketika dijalankan, posisi dari view tersebut akan berada di bagian atas sebelah kiri.

Berbeda ceritanya dengan RelativeLayout. Saat kita ingin menentukan posisi atau menghubungkan dua buah view, kita bisa menggunakan attribute seperti layout_below atau layout_above. Nah untuk ConstraintLayout kita akan menggunakan constraint sebagai dasar dalam menentukan posisi agar sebuah view dapat terhubung dengan view lainnya sesuai harapan kita.

Constraint

Setiap view setidaknya memiliki satu vertikal dan horizontal constraint. Misal kita memiliki sebuah layout dengan tampilan pada Layout Editor seperti berikut:

How ConstraintLayout Work

Susunan tampilan di atas akan terlihat normal. Tidak ada yang salah di Layout Editor. Tapi jika kita perhatikan seksama, view C diatas hanya memiliki horizontal constraint yang diatur sejajar dengan view A. Sehingga ketika jika kita coba menjalankannya, sama seperti yang disebutkan diatas, maka posisi dari view C akan berada di posisi atas seperti berikut:

How ConstraintLayout Work

Berbeda jika kita menambahkan vertikal constraint pada view C yang diatur terikat dengan view A seperti berikut:

How ConstraintLayout Work

Ketika dijalankan, apa yang terjadi? Yang tampil akan sesuai dengan apa yang terlihat di Layout Editor.

Mulai menggunakan ConstraintLayout

Berbeda dengan ViewGroup lainnya seperti LinearLayout, FrameLayout dan RelativeLayout yang sudah tersedia secara default di dalam Android repository, untuk menggunakan ConstraintLayout kita perlu menambahkan sebuah dependencies ke dalam project. Ikuti langkah-langkah berikut:

Pastikan terdapat konfigurasi maven.google.com pada berkas build.gradle untuk level modul seperti berikut:

Build gradle
Java

1
2
3

repositories {
google()
}

Kemudian tambahkan ConstraintLayout pada scope dependencies di berkas build.gradle yang sama. Sehingga berkas build.gradle akan terlihat seperti berikut:

apply plugin: 'com.android.application'

android {

...

}

dependencies {

...

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

...

}

repositories {

google()

}

Setelah selesai, lakukan sync project dengan mengklik Sync Now yang terdapat pada bagian sync notification di sebelah kanan atas.

Dengan mengikuti cara di atas, kita sudah bisa menggunakan ConstraintLayout. Namun perlu diketahui, jika kita menggunakan Android Studio dengan versi 3.x.x, kita tak perlu lagi menambahkannya. Karena konfigurasi di atas secara default sudah ada saat kita membuat proyek baru.

Menambah berkas baru ConstraintLayout

Sama seperti membuat layout lainnya, ikuti langkah-langkah berikut ini.

Pada jendela Android Studio, klik File -> New -> Android Resource File.
Pada jendela tampil, ubah Resource Type menjadi Layout dan Root Element-nya pastikan ConstraintLayout seperti berikut:

New Layout
Java

1

android.support.constraint.ConstraintLayout
Masukkan nama dari berkas yang akan dibuat, kemudian klik OK.

Konversi berkas layout

Yang menarik, ketika kita mempunyai layout yang sudah dibuat sebelumnya, kita bisa mengubahnya menjadi ConstraintLayout tanpa harus mengubah dan menyesuaikan konfigurasi setiap view yang sudah ada. Wow! Caranya? Ikuti langkah-langkah berikut:

Masuk pada bagian Design dari Layout Editor di Android Studio.
Pada panel Component Tree, klik kanan pada bagian layout yang dijadikan sebagai parent kemudian pilih Convert LinearLayout to ConstraintLayout.

Convert layout to ConstraintLayout

Atas adalah contoh ketika kita ingin mengubah LinearLayout menjadi ConstraintLayout.

Perlu kamu ketahui loh..sebaiknya fungsi konversi tersebut digunakan untuk mengkonversi layout yang tidak terlalu kompleks. Jika kamu punya layout yang kompleks sebaiknya ubalah secara manual untuk menghindari kesalahan konversi yang bisa saja terjadi. Ini menyebabkan kita perlu usaha yang lebih untuk menyelesaikan kesalahan konversi tersebut.

Menambah dan Menghapus Constraint

Seperti yang sudah dijelaskan sebelumnya, setiap view di dalam ConstraintLayout wajib memiliki constraint untuk terhubung dengan parent atau view lainnya. Lalu bagaimana cara menambahkannya?

Drag view yang ingin ditambahkan dari panel Palette ke dalam editor.
View yang sudah ditambahkan akan memiliki anchor point pada setiap sisi yang akan kita gunakan untuk membuat constraint baru seperti berikut:
View Anchor Point
Lanjut, untuk menambahkan constraint, klik anchor point yang berada pada view kemudian arahkan ke parent atau view lainnya seperti berikut:
Adding Constraint
Setelah kita menambahkan constraint untuk sebuah view, secara default akan terdapat margin yang memisahkan antara view dan parent atau view lain yang terikat dengan view tersebut, secara default margin memiliki nilai 8dp.

Ketika ingin menambahkan constraint untuk setiap view, kita perlu tahu beberapa aturan berikut:

Seperti yang disebutkan sebelumnya, setiap view wajib memiliki setidaknya satu vertikal dan horizontal constraint.
Kita hanya bisa mengaitkan antar view dengan orientasi yang sama. Misal, anchor point bagian atas hanya bisa dikaitkan dengan anchor point bagian atas atau bawah dari view lainnya, kita tidak bisa mengaitkannya dengan anchor point bagian kiri atau kanan.
Setiap constraint hanya bisa digunakan untuk mengaitkannya satu anchor point, tapi kita bisa menggunakan satu anchor point untuk beberapa constraint dari view lainnya

Nah, untuk menghapus constraint yang sudah ditambahkan, klik view kemudian klik anchor point dari view tersebut seperti berikut:

Remove Constraint

Untuk menghapus sekaligus semua constraint dari sebuah view, kamu bisa memilih view yang ingin constraintnya dihapus. Lalu klik icon yang berada di bagian sisi kiri bawah seperti berikut:

Remove all Constraint

Namun jika ingin menghapus semua constraint untuk setiap view yang berada di dalam ConstraintLayout bisa dengan memilih setiap view beserta parent layoutnya yang berada pada panel Component Tree kemudian pilih Clear Constraints of Selection seperti berikut:

Remove All Constraint

Mengatur Constraint Bias

Let’s say kita menambahkan dua constraint untuk vertical constraint dengan ukuran view yang memiliki nilai tetap atau berdasarkan content yang berada di dalamnya (wrap content). Posisi dari view tersebut akan berada di tengah yang secara default memiliki bias 50%.

View Bias

Tapi no worry! Kita bisa mengatur nilai dari bias untuk merubah posisi view tersebut dengan menggunakan bias slider yang berada pada panel attribute atau langsung menggesernya seperti berikut:

Bias Slider

Jika kita ingin menyesuaikan ukuran size dengan mengikuti ukuran parent atau view yang terikat, kamu bisa mengubah konfigurasi layout_width menjadi match_contraint.

Kesimpulan

Untuk membangun sebuah aplikasi Android, salah satu hal yang harus kita perhatikan adalah performa dari aplikasi tersebut. Ini penting.

Jika dari sisi bagaimana kita membangun tampilan aplikasi, kita harus pandai dalam memilih komponen yang akan digunakan.

ConstraintLayout akan sangat membantu kita dalam membangun tampilan aplikasi yang cukup kompleks. Kita cukup terbantu dengan Layout editor dalam menggunakannya. Lalu apakah kita harus selalu menggunakan ConstraintLayout?

Tentu tidak, kembali lagi bagaimana spesifikasi desain aplikasi yang akan kita kembangkan.

Sekian pengenalan tentang ConstraintLayout.

Mau mempelajarinya lebih dalam? ikuti kelas Menjadi Android Developer Expert. Pada kelas tersebut ConstraintLayout dibahas secara komprehensif. Plus latihan membangun aplikasi menggunakan ConstraintLayout. Cakep kaan?

Semoga artikel ini bermanfaat.

Jika ada pertanyaan, silakan tinggalkan komentar di halaman blog ini. Dengan senang hati, kami akan membantumu.

Kenal Lebih Dekat dengan ConstraintLayout-end

Penulis: Alfian Yusuf Abdullah
Editor: Mutiara Arumsari