Basic ConstraintLayout

Photo by Tim Johnson on Unsplash

ConstraintLayout adalah bagian dari Android Jetpack.

ConstraintLayout mendukung layout yang besar dan kompleks dengan flat view hierarchy (no nested view groups). Memiliki kesamaan dengan RelativeLayout dalam tata letak view yang memiliki hubungan antara sibling views dan parent layout, tapi lebih flexible dari RelativeLayout dan mudah penerapannya menggunakan Android Studio's Layout Editor.

ConstraintLayout tersedia dalam API Library yang kompatible dengan Android 2.3 (API level 9) keatas.

Add ConstraintLayout to project

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:[current_version]'
}

Cara Implementasi

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">
</android.support.constraint.ConstraintLayout>

Untuk mendefinisikan posisi didalam ConstraintLayout, minimal harus mehubungkan satu horizontal dan satu vertical constraint untuk view.

Layout diatas masih error, widget C belum memiliki vertical constraint

Layout diatas valid, semua widget sudah memiliki minimal satu horizontal dan satu vertical constraint

Setiap constraint merepresentasikan hubungan atau tata letak ke view lainnya, parent layout, atau guideline.

Basic attributes ConstraintLayout

• layout_constraintTop_toTopOf — Posisi top dari view terhadap top dari view lainnya, parent, atau guideline.
• layout_constraintTop_toBottomOf — Posisi top dari view terhadap bottom dari view lainnya, parent, atau guideline.
• layout_constraintBottom_toTopOf — Posisi bottom dari view terhadap top dari view lainnya, parent, atau guideline.
• layout_constraintBottom_toBottomOf — Posisi bottom dari view terhadap bottom dari view lainnya, parent, atau guideline.
• layout_constraintLeft_toTopOf — Posisi left dari view terhadap top dari view lainnya, parent, atau guideline.
• layout_constraintLeft_toBottomOf — Posisi left dari view terhadap bottom dari view lainnya, parent, atau guideline.
• layout_constraintLeft_toLeftOf — Posisi left dari view terhadap left dari view lainnya, parent, atau guideline.
• layout_constraintLeft_toRightOf — Posisi left dari view terhadap right dari view lainnya, parent, atau guideline.
• layout_constraintRight_toTopOf — Posisi right dari view terhadap top dari view lainnya, parent, atau guideline.
• layout_constraintRight_toBottomOf — Posisi right dari view terhadap bottom dari view lainnya, parent, atau guideline.
• layout_constraintRight_toLeftOf — Posisi right dari view terhadap left dari view lainnya, parent, atau guideline.
• layout_constraintRight_toRightOf — Posisi right dari view terhadap right dari view lainnya, parent, atau guideline.

Constraint Guideline

Constraint guideline merupakan object bantuan untuk tata letak view terhadap guideline.

Guideline memiliki orientasi vertical atau horizontal, dimana posisinya bisa berdasarkan hitungan percentage(app:layout_constraintGuide_percent) terhadap layout atau ukuran dp(app:layout_constraintGuide_begin atau layout_constraintGuide_end).

<android.constraintlayout.widget.Guideline
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_percent="0.25"
        android:id="@+id/guidelineVertical"/>

Contoh Implementation

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <android.support.constraint.Guideline
        android:id="@+id/guidelineHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.25" />

    <TextView
        android:id="@+id/tvTitleLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Login"
        android:textColor="@color/aasa_white"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guidelineHorizontal" />

    <EditText
        android:id="@+id/etName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@color/white"
        android:inputType="textPersonName"
        android:padding="16dp"
        android:text="UserName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvTitleLogin" />

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@color/white"
        android:inputType="textPassword"
        android:padding="16dp"
        android:text="Password"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etName" />

</android.support.constraint.ConstraintLayout>

Untuk referensi lainnya silakan mengunjungi link dibawah ini.

Terima kasih.

Build a Responsive UI with ConstraintLayout | Android Developers

Exploring the new Android ConstraintLayout