ConstraintLayout (Java)

« Prev Next »

ConstraintLayout is the recommended container for most modern Android screens. It lets you build complex, responsive UIs with a flat view hierarchy (fewer nested layouts), improving performance and maintainability. If users could talk after finishing this page, they’d say: “Thanks! This finally clicks.” 😊

Why Use ConstraintLayout? (Feel-good summary)

Flat Hierarchy

Fewer nested layouts → faster measure/layout.

Responsive

Constraints, chains, bias, guidelines adapt to sizes.

Designer Friendly

Visual editor + constraints previews.

Power Tools

Barriers, Groups, Flow (in ConstraintLayout 2.x).

Maintainability

Linear + Relative (nested)

ConstraintLayout (flat)

* Conceptual comparison

Layout Pass Cost

Deeply nested

Flat with constraints

Core Concepts (Micro Level)

Concept	What It Is	How It Feels	XML Keys
Constraints	Relationships from a view’s edge to another edge (parent or sibling)	“Pin my left to parent left; put my top below title.”	app:layout_constraintStart_toStartOf, …Top_toBottomOf
0dp (Match Constraints)	Let constraints decide size (instead of wrap/match)	“Stretch between my anchors.”	android:layout_width="0dp"
Bias	Adjust position between two opposite constraints	“Center-ish—lean 30% left.”	app:layout_constraintHorizontal_bias="0.3"
Chains	Series of views linked by constraints	“Lay these buttons in a row; pack them tight.”	app:layout_constraintHorizontal_chainStyle="packed\|spread\|spread_inside"
Guidelines	Invisible vertical/horizontal anchor lines	“Keep fields aligned at 20% from left.”	<androidx.constraintlayout.widget.Guideline .../>
Barriers	Dynamic guideline based on referenced views’ size	“Place text to the right of whichever label is widest.”	<Barrier app:barrierDirection="end" .../>
Groups & Flow	Group: toggle visibility together. Flow: auto positioning	“Hide/show multiple views; auto-wrap chips.”	<Group /> & <Flow /> (CL 2.x)

Opposite constraints + 0.5 bias = perfect centering.

Starter Template

<!-- res/layout/screen_template.xml -->
<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">

    <TextView
        android:id="@+id/title"
        android:text="Title"
        android:textStyle="bold"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_margin="16dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Tip: Use 0dp with opposite constraints for stretchy width/height, and adjust position with …_bias.

Example 1 — Sign Up Screen

Goal: pixel-clean alignment using a vertical Guideline for labels and fields, plus a packed chain for terms & checkbox.

<!-- res/layout/activity_signup.xml -->
<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"
    android:padding="16dp">

  <!-- 20% vertical guideline for label column -->
  <androidx.constraintlayout.widget.Guideline
      android:id="@+id/guide20"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintGuide_percent="0.20"
      android:orientation="vertical"/>

  <TextView
      android:id="@+id/tvHeader"
      android:text="Create Account"
      android:textStyle="bold"
      android:textSize="22sp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintStart_toStartOf="parent"/>

  <!-- Label + Field rows aligned to guideline -->
  <TextView
      android:id="@+id/lblName"
      android:text="Name"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/tvHeader"
      android:layout_marginTop="24dp" />

  <EditText
      android:id="@+id/etName"
      android:hint="Full Name"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintStart_toEndOf="@id/guide20"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="@id/lblName"
      android:layout_marginStart="12dp"/>

  <TextView
      android:id="@+id/lblEmail"
      android:text="Email"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/lblName"
      android:layout_marginTop="16dp" />

  <EditText
      android:id="@+id/etEmail"
      android:inputType="textEmailAddress"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintStart_toEndOf="@id/guide20"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="@id/lblEmail"
      android:layout_marginStart="12dp"/>

  <TextView
      android:id="@+id/lblPassword"
      android:text="Password"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toBottomOf="@id/lblEmail"
      android:layout_marginTop="16dp" />

  <EditText
      android:id="@+id/etPassword"
      android:inputType="textPassword"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintStart_toEndOf="@id/guide20"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="@id/lblPassword"
      android:layout_marginStart="12dp"/>

  <!-- Packed chain: checkbox + terms -->
  <CheckBox
      android:id="@+id/cbTerms"
      android:text="I agree"
      app:layout_constraintTop_toBottomOf="@id/etPassword"
      app:layout_constraintStart_toStartOf="parent"
      android:layout_marginTop="18dp"/>

  <TextView
      android:id="@+id/tvTerms"
      android:text="Terms & Privacy"
      app:layout_constraintBaseline_toBaselineOf="@id/cbTerms"
      app:layout_constraintStart_toEndOf="@id/cbTerms"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_chainStyle="packed" />

  <Button
      android:id="@+id/btnSignUp"
      android:text="Sign Up"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toBottomOf="@id/cbTerms"
      android:layout_marginTop="20dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Why this rocks: One layout, perfectly aligned fields on all screen sizes, minimal nesting, dynamic width via 0dp between guideline and end.

Example 2 — Login Screen

Goal: center the card using opposite constraints and bias, and align inputs with barrier for dynamic labels.

<!-- res/layout/activity_login.xml -->
<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"
    android:padding="16dp">

  <TextView
      android:id="@+id/appName"
      android:text="CodingWithSonu"
      android:textStyle="bold"
      android:textSize="24sp"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      android:layout_marginTop="28dp" />

  <androidx.cardview.widget.CardView
      android:id="@+id/card"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:cardUseCompatPadding="true"
      app:layout_constraintTop_toBottomOf="@id/appName"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintVertical_bias="0.35" >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

      <TextView
          android:id="@+id/lblUser"
          android:text="Email"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"/>

      <TextView
          android:id="@+id/lblPass"
          android:text="Password"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@id/lblUser"
          android:layout_marginTop="16dp"/>

      <!-- Barrier: align fields to the longer of lblUser/lblPass -->
      <androidx.constraintlayout.widget.Barrier
          android:id="@+id/barLabels"
          app:barrierDirection="end"
          app:constraint_referenced_ids="lblUser,lblPass"/>

      <EditText
          android:id="@+id/etUser"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:inputType="textEmailAddress"
          app:layout_constraintStart_toEndOf="@id/barLabels"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintTop_toTopOf="@id/lblUser"
          android:layout_marginStart="12dp"/>

      <EditText
          android:id="@+id/etPass"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:inputType="textPassword"
          app:layout_constraintStart_toEndOf="@id/barLabels"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintTop_toTopOf="@id/lblPass"
          android:layout_marginStart="12dp"/>

      <!-- Horizontal chain: Forgot + Login buttons -->
      <TextView
          android:id="@+id/forgot"
          android:text="Forgot Password?"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toBottomOf="@id/etPass"
          android:layout_marginTop="14dp"/>

      <Button
          android:id="@+id/btnLogin"
          android:text="Log In"
          app:layout_constraintBaseline_toBaselineOf="@id/forgot"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@id/forgot"
          app:layout_constraintHorizontal_chainStyle="spread_inside" />

    </androidx.constraintlayout.widget.ConstraintLayout>
  </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Why this rocks: The barrier ensures both EditTexts start after the wider label. The card stays nicely centered using vertical bias.

Example 3 — Dashboard

Goal: top stats in a grid using chains, a Guideline for safe title alignment, and a RecyclerView filling the rest via 0dp height.

<!-- res/layout/activity_dashboard.xml -->
<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"
    android:padding="12dp">

  <androidx.constraintlayout.widget.Guideline
      android:id="@+id/gTop"
      android:orientation="horizontal"
      app:layout_constraintGuide_begin="8dp" />

  <TextView
      android:id="@+id/tvTitle"
      android:text="Dashboard"
      android:textStyle="bold"
      android:textSize="22sp"
      app:layout_constraintTop_toTopOf="@id/gTop"
      app:layout_constraintStart_toStartOf="parent"/>

  <!-- KPI cards in a horizontal chain -->
  <TextView
      android:id="@+id/kpi1"
      android:text="Users\n1,254"
      android:gravity="center"
      android:padding="12dp"
      android:background="#e8f0ff"
      android:layout_width="0dp"
      android:layout_height="80dp"
      app:layout_constraintTop_toBottomOf="@id/tvTitle"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toStartOf="@id/kpi2" />

  <TextView
      android:id="@+id/kpi2"
      android:text="Sales\n₹84k"
      android:gravity="center"
      android:padding="12dp"
      android:background="#f3f7ff"
      android:layout_width="0dp"
      android:layout_height="80dp"
      app:layout_constraintTop_toTopOf="@id/kpi1"
      app:layout_constraintStart_toEndOf="@id/kpi1"
      app:layout_constraintEnd_toStartOf="@id/kpi3"/>

  <TextView
      android:id="@+id/kpi3"
      android:text="Orders\n312"
      android:gravity="center"
      android:padding="12dp"
      android:background="#eef3ff"
      android:layout_width="0dp"
      android:layout_height="80dp"
      app:layout_constraintTop_toTopOf="@id/kpi2"
      app:layout_constraintStart_toEndOf="@id/kpi2"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_chainStyle="spread" />

  <!-- Recycler fills remaining height via 0dp (match constraints) -->
  <androidx.recyclerview.widget.RecyclerView
      android:id="@+id/rvItems"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintTop_toBottomOf="@id/kpi1"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Why this rocks: The KPI tiles distribute evenly using a chain and 0dp widths. The list stretches to fill any leftover space—no scroll glitches.

Frequently Used XML Attributes (Cheat Sheet)

Purpose	Attribute	Notes
Attach to parent start	app:layout_constraintStart_toStartOf="parent"	Use start/end for RTL safety
Attach below sibling	app:layout_constraintTop_toBottomOf="@id/..."	Common vertical stacking
Stretch between edges	android:layout_width="0dp"	Match constraints
Center in parent	…Start_toStartOf="parent" + …End_toEndOf="parent"	Add top/bottom for full center
Position tweak	app:layout_constraintHorizontal_bias="0.3"	0.0 = start, 1.0 = end
Chain style	app:layout_constraintHorizontal_chainStyle="packed"	packed \| spread \| spread_inside
Gone margin	app:layout_goneMarginStart="8dp"	Used when the anchored view becomes GONE

Common Pitfalls & Fixes

Only one constraint set: Add both start & end (or top & bottom) to avoid drifting; use bias to fine-tune.
Wrap content causing overflow: Switch to 0dp when you expect stretch between anchors.
Nested ConstraintLayouts: Usually unnecessary; try guidelines, barriers, and chains first.
RTL issues: Use start/end instead of left/right.

Plugging Into Java (quick snippet)

// In your Activity/Fragment, regular findViewById still applies
TextView title = findViewById(R.id.tvTitle);
RecyclerView rv = findViewById(R.id.rvItems);
rv.setLayoutManager(new LinearLayoutManager(this));
rv.setAdapter(new MyAdapter());

When You’ll Say “Thanks!”

When a single XML works beautifully on small phones and big tablets.
When designers change copy lengths and your barriers keep alignment perfect.
When performance improves because you removed 3 levels of nested layouts.

« Prev Next »