Mengenal ConstraintLayout

ConstraintLayout adalah ViewGroup yang mirip dengan Relativelayout yang menampilkan widget secara relative atau bebas. Posisi widget dapat dibuat spesifik terhadap widget dan dengan Parent Layoutnya sendiri. ConstraintLayout lebih fleksibel daripada RelativeLayout dan lebih mudah digunakan di layout editor. Dalam ConstraintLayout, widget memiliki titik (lingkaran bulat) setiap sisinya yang dapat ditarik dan diikatkan terhadap titik yang dimiliki oleh widget lainnya atau parent layout. Pada tutorial Mengenal ConstraintLayout, kita akan membangun tampilan halaman Register dengan menggunakan layout editor di android studio.

Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada window New Resource File masukan data seperti berikut :

  • File name : "activity_register"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.
membuat constraint layout

Buka file activity_register.xml yang kita buat, klik tab design. Kita dapat melihat terdapat tab Palette yang memiliki widget dan ViewGroup. Kita dapat menggunakan fitur drag & drop untuk mengambil widget dari Palette ke tampilan Layout. Di tengah kita dapat melihat tampilan layout yang sesungguhnya dan sebelah kanan terdapat tampilan berwarna biru yang merupakan Blueprint (hanya menampilkan outline dari tampilan layout.
activity-register.jpg (59 KB)

Namun pada tutorial ini kita akan menggunakan tab Split dan menambah widget dengan kode agar kamu dapat melihat perubahan atribut saat membuat constraint terhadap widget. Rancangan tampilan yang akan kita buat seperti gambar di bawah. Kita akan belajar menggunakan beberapa fitur dari ConstraintLayout.
rancangan-constraint-layout.jpg (59 KB)

Buka activity_register.xml dan tambah widget TextView seperti kode di bawah.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 	     
	xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_daftar"
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daftar" />

</androidx.constraintlayout.widget.ConstraintLayout>

Klik tab Split yang berada di sebelah kanan dan kita dapat melihat layout seperti gambar di bawah.
widget textview activiy register

Sekarang kita akan membuat widget TextView berada di posisi tengah dan paling atas terhadap parent. Klik widget Textview di dalam layout, kemudian klik titik lingkaran yang berada di posisi kanan, klik & tahan, tarik garis sampai ke posisi kanan terhadap parent. Untuk lebih jelas, ikuti video di bawah dan lihat secara fullscreen agar terlihat lebih jelas perubahan atribut di dalam text Editor.

Setelah membuat kita membuat constraint kanan dari widget TextView, terdapat satu penambahan atribut yaitu :
app:layout_constraintEnd_toEndOf="parent"

terdapat penambahan atribut ConstraintEnd_toEndOf. Apa yang dimaksud dari kata End disini? Secara Default, layout akan menggunakan Arah LTR (Left to Right), jadi Start digunakan untuk menjelaskan posisi paling awal dan End digunakan untuk menjelaskan posisi paling akhir. Atribut layout_constraintEnd_toEndOf=”parent”, menjelaskan bahwa constraint kanan dari Textview menuju ke paling kanan terhadap parent. Berikut gambaran dari setiap titik constraint terhadap widget.
titik-constraint.jpg (10 KB)

Kita akan membuat constraint kanan dan atas untuk widget TextView. Untuk lebih jelas, ikuti video di bawah.

Dalam widget TextView terdapat penambahan beberapa baris atribut, yaitu :

android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

Kita telah menambah Constraint kiri dan atas terhadap parent. Setelah kita berhasil membuat constraint untuk widget TextView. Selanjutnya kita akan membuat dua widget dalam satu baris. Untuk memudahkan kita membuat dua widget dalam satu baris, gunakan garis bantu atau Guideline secara vertikal. Klik icon guidelines dan pilih add Vertical Guideline.
guidelines

Setelah menambahkan Guideline secara vertikal, kita akan melihat garis putus – putus secara vertikal.

vertical guidelines

Kita akan menggunakan persen untuk guideline dan meletakkannya di tengah dari layout. Untuk lebih jelasnya ikut video di bawah.

Terdapat perubahan atribut di widget Guideline yaitu app:layout_constraintGuide_percent = "0.5" , artinya kita telah membuat posisi widget guideline berada di tengah (0.5) terhadap parent. Sekarang kita akan menambahkan dua widget EditText dan meletakannya dalam satu baris dengan bantuan garis bantu yang telah kita buat. Tambahkan dua widget EditText ke dalam layout seperti kode di bawah.

<EditText
    android:id="@+id/et_nama_depan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Nama Depan" />

<EditText
    android:id="@+id/et_nama_belakang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Nama Belakang" />

Lihat tampilan layout dan kita akan melihat dua widget EditText saling menumpuk. Untuk memudahkan kita membuat constraint terhadap widget tersebut, klik dan tahan di widget, kemudian geser sesuai ke posisi yang kita inginkan. Untuk lebih jelas ikuti video di bawah.

Posisi widget yang telah di geser sebelumnya hanya berpengaruh di layout editor saja. Kita bisa melihat ada penambah dua atribut di setiap widget.

tools:layout_editor_absoluteX
tools:layout_editor_absoluteY

setiap awalan tools di atribut, maka atribut tersebut hanya akan berpengaruh di layout editor saja dan saat aplikasi di build, atribut tools tidak gunakan. Sekarang kita akan membuat constraint dari widget EditText terhadap widget TextView(Daftar), parent dan guideline vertikal. Ikuti video di bawah.

Kita telah berhasil membuat constraint atas, samping kanan dan kiri untuk kedua widget EditText. Constraint atas telah kita ikatkan terhadap widget TextView yang bertulisan Daftar, agar posisinya berada di bawah dari Widget TextView tersebut. Berikut contoh constraint atas dari sebuah widget.

app:layout_constraintTop_toBottomOf="@+id/tv_daftar" />

Constraint samping kiri dan kanan telah masing-masing kita ikatkan terhadap parent dan guideline vertical, sehingga posisi widget berada di antara parent dan guideline. Berikut contoh constraint samping kanan dan kiri dari sebuah widget.

app:layout_constraintEnd_toStartOf="@+id/guideline4" 
app:layout_constraintStart_toStartOf="parent"

Pada gambar layout di bawah, kita dapat melihat lebar ke dua widget EditText belum berukuran sama dengan constraint karena kita menggunakan wrap_content.
dua-widget-dalam-satu-baris.jpg (13 KB)

Untuk membuat lebar sebuah widget sama dengan constraint, kita dapat mengubah atribut android:layout_width=”wrap_content” menjadi android:layout_width="0dp". Ikuti video di bawah kita akan mengubah kedua EditText menjadi atribut android:layout_width="0dp" dan menambah margin pada widget.

Pada video di atas, kita dapat melihat lebar kedua widget EditText menjadi sesuai dengan constraint yang telah diikat.

Sekarang kita akan menambah tiga widget EditText dan satu Button dengan posisi berurutan. Tambah kode di bawah ke dalam ConstraintLayout.

<EditText
    android:id="@+id/et_email"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Alamat Email"
    android:inputType="textEmailAddress" />

<EditText
    android:id="@+id/et_password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:inputType="textPassword" />

<EditText
    android:id="@+id/et_konfirmasi_password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Konfirmasi Password"
    android:inputType="textPassword" />

<Button
    android:id="@+id/btn_daftar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Daftar Akun" />

Kita akan membuat constraint terhadap widget yang telah di tambahkan, untuk membuat posisi widget saling berurutan, buat constraint atas dan ikatkan terhadap titik di bawah widget lainnya. Untuk lebih jelas ikuti video di bawah.

Kita telah menyusun empat widget secara berurutan dengan membuat constraint atas disetiap widget. Sekarang layout kamu seharusnya seperti pada gambar di bawah.
hasil akhir design constraint layout

Berikut source code keseluruhan dari activity_register.xml yang telah kita buat.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_daftar"
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Daftar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <EditText
        android:id="@+id/et_nama_depan"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:hint="Nama Depan"
        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_daftar" />

    <EditText
        android:id="@+id/et_nama_belakang"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:hint="Nama Belakang"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline4"
        app:layout_constraintTop_toBottomOf="@+id/tv_daftar" />


    <EditText
        android:id="@+id/et_email"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:hint="Alamat Email"
        android:inputType="textEmailAddress"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_nama_depan" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:hint="Password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_email" />

    <EditText
        android:id="@+id/et_konfirmasi_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:hint="Konfirmasi Password"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_password" />

    <Button
        android:id="@+id/btn_daftar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="Daftar Akun"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_konfirmasi_password" />

</androidx.constraintlayout.widget.ConstraintLayout>

Kita telah berhasil membuat layout sederhana dengan menggunakan beberapa fitur dari ConstraintLayout. Masih banyak fitur ConstraintLayout yang belum kita pelajari dalam tutorial ini, namun ini awal yang baik sebelum kamu mempelajari semua fitur dari ConstraintLayout. Demikian tutorial Mengenal ConstraintLayout, jika kamu mengalami kesulitan dalam mengikuti tutorial ini, jangan ragu bertanya di grup telegram. Selanjutnya kita akan mempelajari Membuat Aplikasi Android Interaktif Sederhana, disini kita akan membuat aplikasi yang dapat menerima interaksi dari user. Tetap semangat belajar dan terima kasih :).

Source Code : [https://github.com/rflash95/BelajarLayoutAndroid]