🎨 UI – Views और Layouts · Lesson 10

ConstraintLayout

ConstraintLayout क्यों?

ConstraintLayout हर view को constraints से रखता है — parent या दूसरे views से connections। Complex screens flat hierarchy (बिना nesting) में बनती हैं, जो तेज़ हैं और हर screen size पर adjust होती हैं। नए Android Studio projects में यही default layout है।

Nested LinearLayouts

LinearLayout
└ LinearLayout
└ LinearLayout
धीमे measure passes

एक ConstraintLayout

ConstraintLayout
├ ImageView
├ TextView ×2
└ Button — flat और तेज़

वही screen, कम layers

Constraints के 2 नियम

हर view को कम से कम एक horizontal (start/end) और एक vertical (top/bottom) constraint चाहिए।
Constraint इस view की एक side को parent या दूसरे view की side से जोड़ता है: app:layout_constraintStart_toEndOf="@id/ivAvatar" = "मेरा start avatar के end पर"।

Example: view centre करें

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/tvHello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Centred!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

दोनों opposite sides के constraints springs की तरह खींचते हैं — बराबर खिंचाव view को centre में रखता है।

Example: profile card

XML – profile card

<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="wrap_content"
    android:padding="16dp">

    <ImageView
        android:id="@+id/ivAvatar"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@drawable/ic_person"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:text="Riya Sharma"
        android:textSize="18sp"
        android:textStyle="bold"
        app:layout_constraintStart_toEndOf="@id/ivAvatar"
        app:layout_constraintEnd_toStartOf="@id/btnFollow"
        app:layout_constraintTop_toTopOf="@id/ivAvatar" />

    <TextView
        android:id="@+id/tvClass"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Class 12 · Science · Aligarh"
        app:layout_constraintStart_toStartOf="@id/tvName"
        app:layout_constraintEnd_toEndOf="@id/tvName"
        app:layout_constraintTop_toBottomOf="@id/tvName" />

    <Button
        android:id="@+id/btnFollow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Follow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/ivAvatar"
        app:layout_constraintBottom_toBottomOf="@id/ivAvatar" />
</androidx.constraintlayout.widget.ConstraintLayout>

Avatar, दो texts और एक button — सब एक layout में

Card के horizontal constraints

0dp = match constraints

Width 0dp का मतलब "मेरे start और end constraints के बीच stretch करो"। इसीलिए tvName avatar और button के बीच की जगह भरता है, और लंबे नाम button पर चढ़ने की जगह wrap होते हैं।

Bias

XML

<!-- constrained to both sides, but placed at 30% from the left -->
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="30%"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintTop_toTopOf="parent" />

Chains

XML – horizontal chain

<!-- three tabs spread evenly: each view is linked to its neighbours -->
<Button
    android:id="@+id/b1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Day"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/b2"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/b2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Week"
    app:layout_constraintStart_toEndOf="@id/b1"
    app:layout_constraintEnd_toStartOf="@id/b3"
    app:layout_constraintTop_toTopOf="@id/b1" />

<Button
    android:id="@+id/b3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Month"
    app:layout_constraintStart_toEndOf="@id/b2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@id/b1" />

chainStyle	Result
spread (default)	\| A B C \| चारों ओर बराबर जगह
spread_inside	\|A B C\| किनारे edges से चिपके
packed	\| ABC \| बीच में group

Guidelines, barriers और ratio

XML – helpers

<!-- a vertical guideline at 40% of the width -->
<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guide40"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.4" />

<!-- 16:9 banner that always fills the width -->
<ImageView
    android:id="@+id/ivBanner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintDimensionRatio="16:9"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<!-- barrier: sits after whichever label is wider -->
<androidx.constraintlayout.widget.Barrier
    android:id="@+id/labelBarrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="tvNameLabel,tvEmailLabel" />

Layout Editor use करना

1Layout खोलें → Design view
2Palette से Button screen पर drag करें
3उसकी sides के छोटे circles को parent edges या दूसरे views तक drag करें
4Stretch होना हो तो Attributes panel में width "match constraint" (0dp) करें
5Magic wand "Infer constraints" सिर्फ़ शुरुआत के लिए — फिर हर view check करें

Blueprint view constraints को springs और arrows की तरह दिखाता है

आम गलतियाँ

बिना vertical constraint का view → runtime पर ऊपर चला जाता है।
ConstraintLayout में match_parent → 0dp + दोनों side constraints use करें।
gone view से constraint → layout_goneMarginStart या barrier use करें।
Chain के बिना circular constraints (A, B पर और B, A पर) → अजीब layout।

सारांश

हर view: कम से कम एक horizontal + एक vertical constraint।
0dp constraints के बीच stretch करता है; bias उसे खिसकाता है।
Chains जगह बाँटती हैं; guidelines, barriers और ratios advanced cases संभालते हैं।

✅ Practice

सिर्फ़ ConstraintLayout से product card बनाइए: ऊपर 16:9 image, नीचे title और price, price के दाईं ओर "Add to cart" button, और title की baseline से aligned "★ 4.5" text।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

App चलाने पर मेरा view ऊपर-बाएँ कोने में क्यों चला जाता है?

उसके constraints नहीं हैं। Editor में ठीक दिखता है, पर runtime पर बिना constraint वाला view (0,0) पर जाता है। कम से कम एक horizontal और एक vertical constraint जोड़ें।

क्या ConstraintLayout में match_parent use कर सकते हैं?

Recommended नहीं है। उसकी जगह start और end constraints के साथ 0dp (match constraints) use करें।

Chain क्या है?

एक axis पर दोनों तरफ़ से एक-दूसरे से जुड़े views। Chain style (spread, spread_inside, packed) तय करती है खाली जगह कैसे बँटे।

← Android Tutorial (Kotlin)