Chapters
Chapters

Chapters

Hide chapters

Jetpack Compose by Tutorials

Second Edition · Android 13 · Kotlin 1.7 · Android Studio Dolphin

Before You Begin

Section 0: 6 chapters
Show chapters Hide chapters

Section I: Getting Started With Jetpack Compose

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Composing User Interfaces

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Building Complex Apps With Jetpack Compose

Section 3: 5 chapters
Show chapters Hide chapters

Section IV: UI Testing & Accessibility

Section 4: 2 chapters
Show chapters Hide chapters

Section V: Glances & Keeping Upto Date With Jetpack Compose

Section 5: 3 chapters
Show chapters Hide chapters

Section VI: Appendices

Section 6: 1 chapter
Show chapters Hide chapters

9. Using ConstraintSets in Composables
Written by Prateek Prasad

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In this section, you’ll start making a new app called JetReddit using the advanced features of Jetpack Compose. JetReddit is a composable version of the Reddit app in Kodeco style. :]

First, you’ll learn how ConstraintLayout works in Jetpack Compose and what you can do with it. Then, you’ll implement some of the core layouts in the app using constraint sets. Let’s get on it!

To follow this chapter, you need to know how ConstraintLayout works.

ConstraintLayout is, as its name says, a layout. Compared to other layouts, like Box, Row or Column, which place their elements in a specific order, ConstraintLayout arranges elements relative to one another.

Understanding ConstraintLayout

While the layout or container composables you have worked with so far are simple to understand, they have inherent limitations when positioning children. They are constrained(pun intended) by their directionality. They can only position elements in the x, y, or z coordinate at a time. So often, while implementing complex designs, you end up with a very nested hierarchy of these containers in your code.

ConstraintLayout eliminates this restrictions by letting you position elements relative to one another. You can use a constraint between two elements to determine the final position. It’s possible to make constraints from four sides: top, bottom, left and right.

Note: It’s considered best practice to use start and end instead of left and right. This lets your elements switch sides when your users have a language that’s read from right to left, also known as RTL (right-to-left) support like arabic.

ConstraintLayout Example

To make constraints easier to understand, look at the image below:

Sejcscoedf Wotuox Ulakpti
Lanlftuurc Javuef Osuxxca

ConstraintLayout in Jetpack Compose

In Jetpack Compose, there’s a composable with the same name called ConstraintLayout. It offers almost the same features as the ConstraintLayout you’ve used so far.

Implementing the App Drawer Layout

To follow along with the code examples, open this chapter’s starter project using Android Studio and select Open an existing project.

Swovemp Yoerehqgt
Xsabitc Diotaggnq

Fnomzatb Ztzeoh
Xxurfopm Ddsoag

Muwpih Itb Ryuxam
Wivsim Udw Ctacex

Implementing the User Icon and Name

You’ll implement the user icon and user name first. You’ll add them in a Column, because they need to be ordered vertically. Add the following code to the AppDrawerHeader method stub:

Osf Ldunus Ruepim Wufwouh Xyazuve Apke
Oly Xdipuv Feasaz Tumteut Zgiyatu Uzfa

Adding the Profile Info

To get a better understanding of what you need to implement, look at the following image:

Mbemobo Afco
Qgabaso Idje

Extracting Reusable Components

Because these components require relative constraints, you’ll use a ConstraintLayout. Add the following code to ProfileInfoItem():

Tnacabo Advo Esac Gvuwoob
Bjetire Odnu Ijiv Mcezail

Completing ProfileInfo

Now, you’ll use your freshly made composable to complete ProfileInfo(). Replace the code of ProfileInfo() with the following implementation:

Ulc Kginam Leatiq Xevr Yhehigu Iqde
Uqz Wcecef Yeotis Gisk Sguxiya Ifni

Implementing the App Drawer’s Body

The body of the app drawer is the easier part to implement, since you don’t need to use a ConstraintLayout.

Axt Ppajiw Gikn
Otb Bnaluv Vefc

Implementing the App Drawer Footer

Once again, check the Reddit screenshot, but this time, pay closer attention to the bottom of the screen. For this section, you need to add two new buttons, one for settings and another to change the theme.

Ufy Dfimig Hiipav
Igx Pgawoy Zeawev

Advanced Features of ConstraintLayout

ConstraintLayout makes building UI much easier than before. However, there are still some cases that are almost impossible to solve without introducing unnecessary complexity.

Guidelines

A guideline is an invisible object you use as a helper tool when you work with ConstraintLayout. You can create a guideline from any side of the screen and use one of two different ways to give it an offset:

Barriers

Now that you know how to position objects at specific places on the screen, it’s time to think about some other problems you can solve.

Mowzair
Ruptued

Chains

The final problem that you might face when using ConstraintLayout is when you have multiple elements that are constrained to each other. Here are the possible scenarios:

Qhaefx
Fciuzl

Key Points

  • ConstraintLayout positions its children relative to each other.
  • Add implementation androidx.constraintlayout:constraintlayout-compose:$current-version in your module level build.gradle file to use ConstraintLayout.
  • To use ConstraintLayout modifiers in your referenced composables, pass ConstraintLayoutScope as a parameter.
  • It’s better to use start and end constraints, rather than left and right to facilitate with internationalization.
  • Use createRefs() to create constraint references for your composables.
  • Use a guideline if you need to position your composable relative to a specific place on the screen.
  • Set a guideline by passing a specific dp amount or a fraction of the screen size.
  • Use a barrier when you need to constraint multiple composables from the same side.
  • Use a chain when you need multiple elements constrained to each other.
  • Use ChainStyle to specify the kind of chain to use.
8. Applying Material Design to Compose
10. Building Complex UI in Jetpack Compose
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now