Skip to main content
Android UI Design with Kotlin
CHAPTER 07 Beginner

ConstraintLayout Mastery

Updated: May 31, 2026
5 min read

# CHAPTER 7

ConstraintLayout Mastery

1. Introduction

Welcome to the most powerful layout in the Android ecosystem: ConstraintLayout. In the early days of Android, developers had to nest multiple LinearLayouts and RelativeLayouts inside each other to create complex screens. This "nesting" caused severe performance issues. ConstraintLayout solves this by allowing you to create large, complex, and highly responsive layouts with a completely flat view hierarchy. In this chapter, we will master the art of constraints.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand the core concept of constraints.
  • Position views relative to parent layouts and sibling views.
  • Use horizontal and vertical Bias to position views proportionally.
  • Implement Chains to distribute space among multiple views.
  • Use advanced helpers like Guidelines and Barriers.

3. Core Concept: Constraints

In a ConstraintLayout, you cannot just drop a view on the screen. Every view must have at least one horizontal constraint and one vertical constraint. A constraint defines how a view aligns relative to another element (the parent or another view).

Think of constraints as rubber bands pulling the view. If you attach a rubber band from the view's left edge to the parent's left edge, the view snaps to the left.

4. Basic Constraints

To center a view completely in the screen, you attach constraints to all four sides of the parent:
xml
123456789 
<TextView
    android:id="@+id/centeredText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I am centered!"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

*Note: We use Start and End instead of Left and Right to support Right-to-Left (RTL) languages like Arabic.*

5. Bias

If a view has opposing constraints (e.g., connected to both the Start and End), it defaults to being centered (50% bias). You can change this using layout_constraintHorizontal_bias.
xml
12 
<!-- This will position the view 20% from the left, 80% from the right -->
app:layout_constraintHorizontal_bias="0.2"

6. Chains

Chains are a fantastic way to control the behavior of a linear group of views. If views are constrained to each other in a bidirectional manner (A's end is attached to B's start, and B's start is attached to A's end), they form a Chain. Chains can be spread out evenly, packed together, or weighted (like LinearLayout weights).

7. Guidelines and Barriers

These are invisible helpers that exist only to help you position other views.
  • Guideline: An invisible line positioned at a specific dp or percentage of the screen. You can align views to this line.
  • Barrier: An invisible line that wraps around a group of views. If the size of one view in the group expands, the barrier moves, taking dependent views with it.

8. Advanced Layout Example

Let's design a responsive header layout. We want an Image on the left, a Title to its right, and a Subtitle below the title.
xml
123456789101112131415161718192021222324252627282930313233343536373839404142 
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <!-- Profile Image -->
    <ImageView
        android:id="@+id/profileImage"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#BDBDBD"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Title -->
    <TextView
        android:id="@+id/titleText"
        android:layout_width="0dp" 
        android:layout_height="wrap_content"
        android:text="ConstraintLayout Pro"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginStart="16dp"
        app:layout_constraintTop_toTopOf="@+id/profileImage"
        app:layout_constraintStart_toEndOf="@+id/profileImage"
        app:layout_constraintEnd_toEndOf="parent" />

    <!-- Subtitle -->
    <TextView
        android:id="@+id/subtitleText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Mastering flat hierarchies."
        android:layout_marginTop="4dp"
        app:layout_constraintTop_toBottomOf="@+id/titleText"
        app:layout_constraintStart_toStartOf="@+id/titleText"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

*Notice layout_width="0dp". In ConstraintLayout, 0dp means "Match Constraint", meaning the view will expand to fill the space defined by its constraints!*

9. Design Principles

  • Flat is Fast: A deep layout hierarchy takes longer for the Android system to measure and draw. ConstraintLayout allows you to keep the hierarchy flat, dramatically improving rendering performance.
  • Flexibility: Designing with constraints makes your UI inherently more adaptable to different screen sizes and orientations.

10. Common Mistakes

  • Forgetting Constraints: If you drop a view in the visual editor and forget to constrain it, it will jump to the top-left corner (0,0) when you run the app on a device.
  • Using match_parent: match_parent is not supported in ConstraintLayout. Use 0dp (match constraint) instead.

11. Best Practices

  • Always use 0dp instead of match_parent.
  • Utilize Guidelines for consistent margins (e.g., a 16dp Guideline on the left and right edges) instead of adding margins to every single view.

12. Exercises

  1. 1. Remove the constraints from the profileImage in the example above, run your app, and observe what happens.
  1. 2. Change the horizontal bias of a centered button to 0.8.

13. UI Design Challenges

Challenge: Create a responsive calculator keypad layout (digits 1 to 9). Do not use LinearLayout or GridLayout. Use ConstraintLayout and Chains (Horizontal and Vertical) to distribute the buttons evenly across the screen.

14. MCQ Quiz with Answers

Question 1

What happens if a View inside a ConstraintLayout has no constraints defined?

Question 2

Which layout width value should you use in ConstraintLayout if you want a view to expand and fill the space between its constraints?

15. Interview Questions

  • Q: Why was ConstraintLayout introduced, and what performance problem does it solve?
  • Q: What is a Barrier in ConstraintLayout, and how does it differ from a Guideline?
  • Q: How do you create a Chain in ConstraintLayout?

16. FAQs

Q: Should I completely stop using LinearLayout? A: No! For very simple, linear alignments (like a row with an icon and a text), a LinearLayout is perfectly fine and slightly less verbose. Use ConstraintLayout when the design becomes complex or requires overlapping or proportional positioning.

17. Summary

ConstraintLayout is an incredibly robust tool for building Android UIs. By defining relationships (constraints) between views, we can build flexible, responsive, and flat layouts. We learned how to use 0dp to match constraints, how to bias views proportionally, and how to structure complex UI elements efficiently.

18. Next Chapter Recommendation

Understanding constraints is the secret to responsive design. In Chapter 8: Responsive Layout Design for Android, we will take these skills and learn how to make our apps look gorgeous on everything from tiny phones to large tablets.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Working with Images, Icons, and Cards
Next Chapter Responsive Layout Design for Android

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5