Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

I recently learnt Jetpack Compose and almost instantly understood the craze behind it. Compose allows you to do more with less code, compared to using the Android View system: Buttons, lists or animation — whatever you need to build, now there’s less code to write.

I had been using ConstraintLayout extensively in my projects. So naturally, when I moved on to Compose, I felt the need to explore it here as well. So, here’s the design we will aim to implement:

Inspiration: https://proandroiddev.com/designing-complex-ui-using-android-constraintlayout-cb0606823da0

We’ll be covering the following about ConstraintLayout in this tutorial:

1. Basics
2. Guidelines
3. Barriers
4. Chains

So, let’s begin…

1. Open Android Studio and click on New Project.
2. Select Empty Compose Activity. Click on Next.

3. Give a suitable name to your project and click on Finish.

4. Once the project is completely loaded, go to app-level Gradle file and under dependencies, add:

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0"

5. Sync the project Gradle files.

Get. Set. CODE!!

Go to MainActivity.kt and replace the code with:

Create a new class: MovieBookingScreen.kt. And add the following code:

Here, we first create a base composable function with nothing but a Surface and a ConstraintLayout which covers the entire height and width.

To compare with the traditional XML based ConstraintLayout, we assign IDs to our views and then use those IDs to constrain other views accordingly. Here too, we first create all these references using the createRefs()function and then assign them to our composables.

First, let’s take up the menu icon at the top-left. We use the constrainAs(reference) to assign the reference to a composable. And then in the constrainBlock, we write all the constraints. In the below example, we assign the menuButton reference to the Icon composable and then in the constrainBlock, we define its constraints:

start and top should be linked to the parent’s start and top respectively, with 16 dps of margin

Instead of the parent, we can also refer to other composable’s references.

Guideline

Guidelines in ConstraintLayout are invisible lines that are not visible to users but help developers to design the layout easily and constrain views to these guidelines, so that design can be more clear and interactive.

Next, let’s say we want to create a guideline at 40% and constrain the cover image of the movie between the parent and the guideline. Also, we want to make sure that the image’s width and height are in the ratio of 2:3.

We can do the following by first creating a guideline. (40% is passed as 0.4f). We can also pass an absolute value in dp. Next, we define the width as Dimension.fillToConstraints which is analogous to setting android:layout_width=”0dp” . To set the ratio, we use the aspectRatiomodifier where we pass the ratio. This is again analogous to app:layout_constraintDimensionRatio=”2:3" .

Similarly, we can create other text composables and constrain them.

Horizontal Chaining

A chain is a group of views that are linked to each other with bi-directional position constraints

The chain can be of 3 types:

1. Spread: A chain style that evenly distributes the contained layouts.
2. SpreadInside: A chain style where the first and last layouts are affixed to the constraints on each end of the chain and the rest are evenly distributed.
3. Packed: A chain style where the contained layouts are packed together and placed to the centre of the available space.

Casts section of our layout

Next, for the casts row, we will first create a ConstraintLayout, add our composables in it, and then chain them together using the createHorizontalChain(). Also, each Image composable is constrained by giving an aspect ratio of 1:1 to maintain the square shape.

Barrier

A Barrier references multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side. For example, a left barrier will align to the left of all the referenced views.

A barrier can be easily created as shown below by passing in the views. Here we create a bottom barrier to get a guideline below the cover image and our cast container. Similarly, we can create top, bottom, start and end barriers.

val barrier = createBottomBarrier(coverImage, castContainer)

Next, we constrain the description text under the barrier. With this, we are done with the top half of our layout 🎉. Now we are left with the bottom half of the screen.

Let’s divide the bottom half of the screen into 3 parts:

1. Calendar strip
2. Cinema details
3. The “Book Tickets” button

Firstly, the grey background can be implemented by adding a simple Surface composable and giving it a grey colour.

1. Calendar Strip

The calendar strip can again be split into three parts: Selector, dates row and days row.

First, we create the Text Composables for the days row and constrain them using a horizontal chain to evenly distribute them throughout the width of the screen. Then, we create the Text Compoasables for the dates row and constrain each date with its corresponding day (for start and end) and the previous date (for top and bottom), something like this:

Now comes the interesting part. For the date selector, we create two Surface composables. One white, which is the main background, and the other a black strip, which is constrained to the white surface. Now, since we want the date selector to be dynamic and move over to the selected date, instead of hardcoding the constraints to the first day’s start and end, we store it in a state. So, whenever we change the value of the state, a recomposition will be triggered, and our date selector will change its constraints accordingly.

As an example, refer to the below snippet for the Composable of “Monday” Text. In the clickable block, we change the value of the constraints of the date selector surface.

2. Cinema Details

We can consider the cinema name and distance as two Text composables that are chained in the centre of the available space between the calendar strip and the button. So, we again create a ConstraintLayout composable that occupies all the available space, and chain both the Text composables using a VerticalChain, keeping the chain style as Packed.

3. The “Book Tickets” button

This is just a simple Button composable with a Text composable inside it. It is constrained at the bottom of the parent and made to occupy the complete width.

And that’s it 😎

We have achieved the following:

Here’s the complete code of MovieBookingScreen.kt for your reference:

Thank You for reading. I would love to discuss and solve any of your queries. If you liked the article, please give some claps and share it 🙃