Penggunaan Constraint Layout pada Android Studio (Part 2)

Penggunaan Constraint Layout – Hello guys, hello sobat Androidays.com. Semoga selalu dalam keadaan sehat, aman, dilindungi dari segala macam bahaya dan penyakit serta selalu diberikan kemudahan rezeki. Pada materi kali ini admin masih akan membahas tentang Penggunaan Constraint Layout pada Android Studio. Pada artikel berjudul Penggunaan Constraint Layout pada Android Studio (Part 2) ini kita akan membahas cara memulai penggunaan Constraint Layout serta contoh aplikasi penggunaan Constraint Layout. So, untuk mendapatkan info lebih lanjut, mari kita simak materi berikut ini :

Memulai Menggunakan ConstraintLayout

Sebelum menggunakan Constraint Layout untuk membuat desain pada XML Android Studio, kita harus menambahkan sebuah dependencies ke dalam project.

1. Setting build.gradle modul dan tambahkan konfigurasi maven.google.com, seperti tampilan dibawah ini.
   
   Java

   repositories { google() }

   1 2 3

   repositories { google() }

2. Kemudian tambahkan Constraint Layout pada scope dependencies di berkas build.gradle yang sama.
   
   Java

   apply plugin: 'com.android.application' android { ... } dependencies { ... implementation 'com.android.support.constraint:constraint-layout:1.1.3' ... } repositories { google() }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   apply plugin: 'com.android.application'   android { ... }   dependencies { ... implementation 'com.android.support.constraint:constraint-layout:1.1.3' ... }   repositories { google() }

3. sinkronisasikan project dengan mengklik Sync Now, tunggu build project selesai dan muncul notifikasi di bagian kanan bawah Android Studio.

Setelah selesai kita bisa coba untuk memanggil Constraint Layout untuk mendesain aplikasi. Konfigurasi diatas hanya berlaku jika kita menggunakan Android Studio dibawah versi 3.x.x. Sedangkan untuk versi diatasnya konfigurasi di atas secara default sudah ada saat kita membuat proyek baru.

Menambahkan ConstraintLayout ke XML

Untuk versi Android Studio diatas 3.x.x ketika kita membuat Empty Activity maka secara default root element dari XML yang akan kita susun bertype Constraint Layout. View didalam ConstraintLayout harus memiliki constraint untuk terhubung dengan parent atau view lainnya. Kemudian untuk menambahkan kita bisa drag view dari panel Pallete ke dalam editor atau bisa juga dengan mengetik langsung pada xml text. Setiap view memiliki anchor point pada setiap sisinya yang berfungsi untuk membuat constraint dan menghubungkan satu view dengan parent atau view lainnya.

Kemudian untuk menghubungkannya kita tinggal klik anchor yang akan dihubungkan kemudian tarik anchor dan hubungkan dengan parent atau view yang akan dituju.

Menghapus Constraint pada View

1. Klik kanan pada view yang akan dihapus, klik Clear Constraint of Selection, atau

2. Jika kita ingin menghapus semua constraint bisa menggunakan icon Clear All Constraints.

Mengatur Constraint Bias

View yang memiliki dua constraint semisal dalam posisi horizontal constraint maka ketika keduanya dihubungkan maka jika view tersebut merupakan view yang memiliki nilai tetap atau berdasarkan dengen content (wrap_content) maka secara default posisi view akan berada di tengah-tengah (bias bernilai 50%) antara ujung kiri dan ujung kanan. Maka dari itu untuk menggeser posisi view tersebut kearah lebih kanan atau lebih kiri maka penggunaan constraint bias sangat dibutuhkan. 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:

source : https://www.dicoding.com

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

Berikut adalah contoh proyek aplikasi yang didesain menggunakan Constraint Layout.

kunjungi Github

Kesimpulannya

Sebenarnya masih banyak hal yang bisa kita bahas mengenai Constraint Layout, mungkin materi lain akan kita bahas dilain kesempatan. Sekian dulu pembahasan mengenai Penggunaan Constraint Layout pada Android Studio (Part 2) . Namun sebagai seorang yang selalu ingin belajar jangan pernah berhenti untuk terus membaca dan mencari tahu lebih lanjut mengenai Constraint Layout di referensi-referensi luar sana. Tetap semangat dan jangan lupa nantikan materi-materi selanjutnya mengenai pemrograman khusunya Android Mobile ya, hanya di Androidays.com. See you.

Umar Alhakim

Salah satu founder Androidays.com yang saat ini bekerja sebagai programing dan penulis