Constraint Layout in Jetpack Compose: Create complex and responsive android layouts on the fly.

Building complex and responsive layouts has never been this easy.

7 September, 2022

Contributors

Saketh

@saketh

Introduction

•

Building a UI is one of the essential yet mandatory things for android applications.

•

While working with XML, we used to build layouts with a Linear Layout, Relative Layout, Frame Layout, and Constraint Layout. In general, we prefer Constraint Layout over others as it gives you the full flexibility to build responsive yet complex layouts.

Note: This blog will NOT cover the concept of constraint layout but will cover how you can implement it in Jetpack Compose.

Fundamentals first!

•

We can implement constraint layout using various bounds that are available by default to a composable when working with constraint layout.

start = left-hand side of a composable

end = right-hand side of a composable

•

These particular bounds are used to align and rearrange the composables as per our needs in the layout. It also makes things easier if we want to build complex layouts with all the UI elements required.

Do we really need a constraint layout every time?

•

While working with jetpack-compose, we can probably build most of the UI stuff with Row/Column/Box, which makes things pretty simple yet we can build an awesome UI as below:-

•

Building UI in Jetpack compose is pretty simpler than XML(in most cases). As you can see, we didn't use any sort of constraint layout here. We just used composables, rows, boxes, and so as per our UI requirement.

•

The point over here is that we don't need to use a constraint layout every time we build a UI; we can build a pretty good UI even without a constraint layout in jetpack compose.

But what if we want to build a complex layout that includes the arranging of composables as we want, as below?

•

That's where constraint layout comes into the game.

A ConstraintLayout is a layout that allows you to place composables relative to other composables on the screen. It is an alternative to using multiple nested rows, columns, boxes, and custom layout elements. ConstraintLayout is useful when implementing larger layouts with more complicated alignment requirements.

Implementation of Constraint Layout in Jetpack Compose

Dependencies

•

Constraint Layout is not available by default; we must add a dependency to proceed further.

•

Replace the [version] with the latest version, which is available currently.

Implementation

•

If you recall, we used to implement constraint layout in XML as follows, where we specified id, constraint bounds, margin, padding, and so on:-

•

As we are working with jetpack-compose, we can't drag and drop as we could do in XML, but implementing a constraint layout is actually a simple thing in jetpack-compose.

This is the sort of mapping that we'll use to implement constraint layout in jetpack compose:-

•

We need to create something known as a "ConstraintSet{ }" in which we'll code how the composables should be arranged as per our needs.

•

In Jetpack-compose, we need to create a reference through createRefFor( ) for a composable, which we can later add to a composable using a modifier for accessing its arrangement/alignment

•

In order to arrange composables as per our needs, we need to attach the bounds of composables through constrain(variableName){ } and link them to respective composables through linkTo()

•

If we visualize the above code, our UI should look like this:-

•

But it won't look like this, because we didn't add the references to the constraint layout and composables yet🤪

•

We can create a constraint layout by calling ConstraintLayout( ) { } and passing the constraintsSet variable to access the references we created in it.

•

Now, as needed, add composables to the constraint layout block, and don't forget to include .layoutId ("refID") through a modifier so that we can link the respective composable to the reference we created earlier.

Your final code should look similar to this

It ended up like this😉

Compose Preview:-

Launching the application on a mobile device:-

•

If you want to work with constraints inside a Box, use BoxWithConstraints( ){ } rather than Box( ){ }, which also allows you to use ConstraintLayout( ){ }

Practical Approach (example) while working with BoxWithConstraints( ) { }

Cheers, you did it🥂🔥

Complete code for this blog:-

https://github.com/sakethpathike/ConstraintLayoutExample

Still, Confused? Then this is for you:

That's all for now. See you in the next one. Until then bye-bye👋