Jetpack Compose is Android’s recommended modern toolkit for building native user interfaces. It streamlines and speeds up UI development on Android. Effortlessly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

ConstraintLayout allows you to create large, complex layouts without using nested view groups, keeping the view hierarchy flat. Like RelativeLayout, it positions views based on their relationships to other views and the parent layout. However, ConstraintLayout is more flexible and easier to use, especially with Android Studio’s Layout Editor.

Constraint layout allows us to create responsive UI’s across resolutions.

We are familiar with building UI using ConstraintLayout in XML let’s see how to do it in JetpackCompose.

Let’s start with a basic example.

First you need to add the following gradle dependency in the build.gradle file.

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

Vertical positioning:

Let’s write our first UI code

Output of the above function:

In the above example we have used:

• @Preview to see preview of our UI.
• I used remember as I want this UI to remember the count value.
• I have added a Button and a TextView to the layout. I have given them the id’s button and text by this line val (button, text) = createRefs().
• I have placed the button in the centre of the screen and given height and width to the button.
• I have placed a TextView below this Button and on click of this button we will change the text.

To understand it in a much better way here is the XML layout for the above Composable function.

Horizontal positioning:

Now let’s try using another example. Let’s say we want to achieve something like below.

We want to have two TextViews next to each other.

In the above example:

• I have added two text views with id’s textTitle and textMore.
• I have added textViewMore at the top end with respect to the parent.
• I have added textViewTitle at the top of the parent and the end is relative to textMore at the start of it.
• I have given width width = Dimension.fillToConstraints to textTitle which is equivalent to 0dp in XML layout.

Here is the XML layout equivalent for the above example to understand better:

Percentage ratio:

Consider we want to add an ImageView with width match parent and height equivalent to 40% percent of the total screen height.

Here is the code

Output:

In the above example

• height = Dimension.percent(0.4f) sets height in ratio with the Screen height
• width = Dimension.matchParent sets width match parent

The XML equivalent of the above example would be:

Guideline and Barrier:

Consider we have two TextViews both of them can have text of variable length and below these two TextViews I want to place a Button. We can not not place a button relative to any TextView as their lengths may vary.

Following is the code to Achieve UI like above:

In above example

• I have created text1, text2 and button.
• I have created a horizontal guideline at 50 percent of the width val guideline = createGuidelineFromStart(0.5f) and a barrier below text1 and text2 val barrier = createBottomBarrier(text1, text2).
• I have placed text1 and text2 relative to parent and guideline.
• I have placed a button below the barrier where text1 and text2 ends.

The XML equivalent of the above example would be:

Conclusion:

ConstraintLayout in Jetpack Compose simplifies Android UI creation with precise layout control and flexibility. Its declarative approach empowers developers to compose complex UIs effortlessly. Seamlessly integrating Material Design principles ensures consistent and appealing interfaces. By leveraging ConstraintLayout, developers streamline UI development for faster iteration and improved user experiences. Its ongoing evolution promises continued innovation, shaping the future of Android app design uniquely.

This article is previously published on proandroiddev.com