Matured Constraint Layout in Jetpack Compose

Develop in Jetpack Compose with me

My History with Constraint Layout in Compose

Back in 2020 when Jetpack Compose is still in the early stages, I wrote an article about constraint layout in Jetpack Compose. You can read about it from here if you’re interested(not a pre-requisite), but the way constraint layout matured since then makes it entirely different from back then and the improvement actually makes sense.

Introduction

This article is not about the comparison, it’s about how to use matured constraint layout in today's Jetpack Compose to design complicated composable. I’m going to focus on four crucial concepts of constraint layout:

1. Basics — Simple Contraints
2. Guidlines
3. Barriers
4. Bias

Before going any further lemme give you a brief explanation of the four concepts. Constraint layout is not a new concept in AndroidDev, it’s actually inherited from traditional android development to Jetpack Compose.

Basics — Simple Constraints

Simple constraints are nothing but positioning a view with certain constraints(relations) to its parent or sibling views.

Guidelines

Guidelines are nothing but invisible lines that you can place in the layout and constrain the views to it.

Barriers

Barriers are similar to Guidelines, but with barriers, you can constrain a view with multiple views via a single source. If it’s a bit difficult to understand don’t worry, we’re going to explore things in-depth in the coming sections of this article.

Bias

Bias is used to manage the space between the view and what it’s constrained to, they’re mostly used with the views that are aligned to the center.

Prerequisites

Before going any further, you must have basic knowledge of how to work with Jetpack Compose. If you’re new to Compose, I highly recommend going through the following articles:

• Jetpack Compose Components (Part 1)
• “Build Android…