ConstraintLayout

ConstraintLayout

Imagine you are placing items on a board and tying them with strings to edges or other items so they stay in the correct position.
ConstraintLayout works the same way: each UI element is positioned by constraints (rules) relative to the parent layout or other views.

It is the modern and recommended layout for building UI in Android apps using Android Studio.

---

1. Definition

ConstraintLayout is a ViewGroup layout that positions UI elements using constraints (relationships) to other views or the parent layout.

Simple meaning:
➡ Each component is placed by defining where it should stick (top, bottom, left, right).

---

2. Purpose

The main purposes of ConstraintLayout are:

• Create complex layouts easily

• Reduce nested layouts

• Improve UI performance

• Support responsive design for different screen sizes

Example uses:

• Modern Android app screens

• Complex UI designs

• Responsive layouts

---

3. Basic Syntax

<androidx.constraintlayout.widget.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">

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation:

• layout_width → width of layout

• layout_height → height of layout

• app: → used for constraint properties

---

4. Basic Concept: Constraints

Every view needs at least two constraints (horizontal + vertical).

Example:

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"

Meaning:

• Top of view → attached to top of parent

• Start of view → attached to left/start of parent

---

5. Important Properties

1. layout_constraintTop_toTopOf

Connects top of view to top of another view/parent.

Example:

app:layout_constraintTop_toTopOf="parent"

---

2. layout_constraintBottom_toBottomOf

Connects bottom of view.

app:layout_constraintBottom_toBottomOf="parent"

---

3. layout_constraintStart_toStartOf

Aligns start (left).

app:layout_constraintStart_toStartOf="parent"

---

4. layout_constraintEnd_toEndOf

Aligns end (right).

app:layout_constraintEnd_toEndOf="parent"

---

5. layout_margin

Adds spacing.

android:layout_margin="16dp"

---

6. bias (Position adjustment)

Moves element between constraints.

app:layout_constraintHorizontal_bias="0.7"

Range:

0 → left
1 → right
0.5 → center

---

6. Important Methods (Java / Kotlin)

1. setConstraintSet()

Used to apply constraints programmatically.

ConstraintSet set = new ConstraintSet();

---

2. connect()

Connect views programmatically.

set.connect(view.getId(), ConstraintSet.TOP,
            parent.getId(), ConstraintSet.TOP);

---

3. applyTo()

Apply constraints to layout.

set.applyTo(constraintLayout);

---

4. setVisibility()

Show or hide views.

view.setVisibility(View.GONE);

---

7. Real-Time Examples

Example 1: Center Button

<Button
    android:text="Click Me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Result:

        Click Me
       (center of screen)

---

Example 2: Login Screen

<EditText
    android:id="@+id/email"
    android:hint="Email"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

<EditText
    android:hint="Password"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/email"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

<Button
    android:text="Login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/password"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Layout:

Email
Password
Login

---

Example 3: Two Buttons Side-by-Side

<Button
    android:id="@+id/btn1"
    android:text="Yes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<Button
    android:text="No"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@id/btn1"
    app:layout_constraintTop_toTopOf="@id/btn1"/>

Result:

Yes   No

---

8. Advantages

✔ Handles complex layouts easily
✔ Reduces nested layouts
✔ Improves app performance
✔ Works well with different screen sizes

---

9. Disadvantages

❌ Slightly harder to learn initially
❌ Requires understanding of constraints

---

10. Simple One-Line Summary

ConstraintLayout = A layout that positions UI elements using constraints (connections) to other views or the parent layout.

---