5 Reasons Why You Should Build the UI in ConstraintLayout

5 Reasons Why You Should Build the UI in ConstraintLayout
ConstraintLayout is a popular solution that Android developers use every day. And not without a good reason. If you’re at the beginning of your journey as a software engineer, get familiar with the most important features this layout can offer. It will help you understand the way it works, and Android app development will become easier.

You can find the basic info on ConstraintLayout in my previous article. Even though it’s been a while since I wrote it, information about the elementary issues is still up-to-date. Here, I present to you several important assets of ConstraintLayout.

How to use ConstraintLayout in Android?

Before we begin to discover what ConstraintLayout has to offer, remember that if you want to use it, you need to add a dependency to build.gradle in your project:

'implementation ‘androidx.constraintlayout:constraintlayout:2.0.4'

Done! Now you can use this layout along with all its valuable components.

Let’s move on to the features that you should draw special attention to. Below, I also explain the other factors that determine why ConstraintLayout is better than the rest available options.

The structure that increases performance

The main benefit of ConstraintLayout is its flat structure. What does this mean? No nested layouts. Before its release, you had to nest a layout into another one if you wanted to build a complex UI with lots of elements. This solution has a few important shortcomings, though.

Above all, the view weighs more, and this decreases the performance of an app. Secondly, with nesting, you don’t have access to all the elements from anywhere you want. As a result, it’s not always possible to build every dependency. ConstraintLayout makes these problems disappear.

Functional graphic editor in Android Studio

Moreover, Android Studio offers developers a good graphic editor, well-integrated with ConstaraintLayout. You can easily set up UI components’ dependencies in it. In one of my previous articles (about the unstable Android Studio 2.2 Preview version), I pointed out that not everything was working as it should be. Luckily, after a while both the editor and layout were improved, so you can use the new components efficiently.

Groups – easy views management

With groups, you can create links between the elements inside the XML documents. A group doesn’t have any particular location: it’s a binder for several elements of the view. Each group has its own ID. This comes in handy; for example, when you want to hide selected views, depending on the status of the app.

Before ConstraintLayout, if you wanted to hide a group of views away you had to wrap it up in an extra layout. Now, you only need to create a group component inside the view:

<androidx.constraintlayout.widget.Group
   android:id="@+id/emptyPickupPointsPlaceholderGroup"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="gone"
   app:constraint_referenced_ids="emptyPickupPointsResultPlaceholderTv, changeRadiusBtn" />

This way, you can manage several groups of views at the same time, directly from the code. You refer to the ID of a group as to one view:

emptyPickupPointsPlaceholderGroup.visibility = View.GONE

Chain in ConstraintLayout – edition made simple

ChainStyle is a very useful attribute that helps to arrange the views. Software engineers often want to manage the layout that consists of several components placed in line. With chainStyle they can set up a horizontal or vertical dependency.

For example, thanks to this attribute you can present `app:layout_constraintVertical_chainStyle` in the following modes:

1. Packed: Elements will be grouped next to each other.

Packed dependency

2. Spread: Elements will be scattered in equal distances according to the boundaries of the view.

3. Spread_inside: Elements will be maximally scattered.

Bias for setting up a position of the views

ChainStyle attribute plays a key role in view management. But sometimes it takes more than that. In combination with this solution, you can adjust the position of the views in line. You just need a setting attribute: bias. It can be described as horizontal or vertical; for example `app:layout_constraintVertical_bias`.

In this case, you determine the values from 0.0 to 1.0. Remember that 0.0 places the view at the beginning of the workspace, and 1.0. defines where it ends.

   

The features described above are the most useful ones, in my opinion. I use them every day because they significantly facilitate UI development.

Is there any other reason why you should use ConstraintLayout?

For example, because there are such options as Autoconnect. They rely on the algorithm of the environment and adjust basic constraints. You need to remember though, that using them does not always give the expected results. So, keep in mind that sometimes manual changes are a must.

New improvements and fixed issues

ConstraintLayout is still developed. In each version, you can find new improvements, and reported issues disappear.

For example, the following changes were recently released:

  • settings for android:layout_width and android:layout_height parameters can be omitted (they are optional), and`wrap_content` became a default value,
  • support for negative values of the margins,
  • expansion of baseline alignment options (top/bottom).

These are just one of the key changes but in total, there are much more. A big part of the improvements concerns MotionLayout – a tool that can be very helpful with the animations. But it’s such a broad topic, I could write a whole new article about it.

 

Implementation of ConstraintLayout has optimized the work of software engineers. Not only it puts less strain on the system but also offers many possibilities. Since this layout was released, it has been modified many times. Now, we can say that it is 100% reliable, so no one should be surprised that it is a default solution in Android Studio.

 

Learn more

ConstraintLayout, or not so fast, after all…

Recently, while browsing through news from Android world I came across a concept of ConstraintLayout. It is a new layout delivered by Android and Google, supporting Android versions from API 9 on. Digging into possibilities it is to give, I decided to check how new Layout Builder behaves and what is ConstraintLayout like in use.
Read more

How to Implement Feature Flags and Gain More Control over Your App?

Every person with software development experience can share a few stories about incorrectly working features. We build our apps out of small pieces, introduce advanced architecture patterns, and yet sometimes one of the elements fails, causing bugs or even system failures. In such cases, feature toggling can save the day! Find out how to implement feature flags, and make your app more stable.
Read more

Android Small Talks: CoordinatorLayout, or one of the strengths of Android Design Support Library

When Android Lollipop entered the market, there was a breakthrough. Google provided us with an extensive library of Android Design Support Library which facilitates creating applications that are compliant with the principles of Material Design. Creating a user interface in accordance with these guidelines introduces our software to the next level of design and user-application interaction.
Read more

Project estimation

Check out how we use our knowledge in practice, and make your project with us.

Why choose us?

Logo Mobile Trends Awards

Mobile Trends Awards 2017

Nomination in
M-COMMERCE category

17

client reviews

Clutch logo
Logo Legalni bukmacherzy

Legal Bookmakers Award 2019

Best Mobile App

60+

projects in portfolio