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

https://medium.com/media/5874468d482acd522017445c8b79c934/href

Output of the above function:

Output

In the above example we have used:

@Preview to see preview of our UI.I used remember to as I want 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.

https://medium.com/media/aa5495e33eb0ecadbc95a6f06dff943f/href

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.

https://medium.com/media/bbfc0e15e661121a717e7762b4612a96/href

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:

https://medium.com/media/4e5dac0b5f0425f8c54fcdf37c5657f8/href

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

https://medium.com/media/a12f31073be04cb5f4fff57e3eb49eac/href

Output:

In the above example

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

The XML equivalent of the above example would be:

https://medium.com/media/afdf26f366babc379eee37f2505b3c36/href

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:

https://medium.com/media/5717b26b7c48951e39b36f76787d671b/href

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:

https://medium.com/media/7e07d7a874c6067bd1833ca3ff053513/href

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.

ConstraintLayout in Compose was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.