All about Constraint Layout helpers I.
Mobile
5
 min read
February 10, 2022

All about Constraint Layout helpers I.

Peter Šuly
Peter Šuly
Android developer
LinkedIn Logo

Constraint layout is type of ViewGroup, which allows you to create complex layouts with flat view hierarchy. Full power of CL comes from his helpers.

Group

The simplest of Constraint Layout helpers. Just controls visibility of multiple (or one) referenced views. Tends to be useful if you want to set multiple views to VISIBLE or GONE state, but don't want to wrap them in some ViewGroup wrapper so your XML structure can stay flat.

For referencing views inside Group constraint_referenced_ids attribute can be used.

app:constraint_referenced_ids="text,button"

In the following example, text's and button's visibility can be controlled by setting visibility to Group helper. E.g.

In case where one view is referenced from multiple groups, the declaration order in XML will define the final visibility (last group in XML has last word).

Layer

Practically the same as Group helper, but changes of translation, scale and rotation are supported.

E.g. rotating multiple views can look like this

Guideline

Invisible helper object for Constraint Layout (it's never displayed on device). Main purpose of guideline is to place the child of Constraint Layout at some specific location (e.g. 100dp from screen start or 25% from screen bottom...)

Guideline can be either Vertical (zero width, height of parent Constraint Layout) or Horizontal(width of parent Constraint Layout, zero height). You can use orientation attribute for defining orientation of Guideline.

The most important property of Guideline is it's position. Guideline can be positioned in 3 different ways using layout_constraintGuide_begin, layout_constraintGuide_end and layout_constraintGuide_percent attributes. These are affected by orientation also.

Any direct child of Constraint Layout can be constrained to Guideline, but Guideline on it's own cannot have any constraints. Position of guidelines is only determined by mentioned attributes. Here is the example of Button positioned to 25% from top of the screen.

user interface preview of constraintlayout guidline

Barrier

Barrier helper is similar to Guideline. Main difference between them is that the Barrier is flexible. It takes multiple views in constraint_referenced_ids attribute and creates virtual guideline based on the most extreme view from referenced views (most extreme view is the widest or the highest view). If width (or height) of most extreme view changes during runtime, barrier will automatically move according to it. Every Barrier needs to have barrierDirection attribute.

user interface preview of constraintlayout barrier end & bottom

Barrier tends to be useful when you want to constraint view below (or above, at the end, at the start) of another views. E.g. usecase, when button needs to be under textViews, no matter how long they are.You should notice that, you can constraint views to Barrier (unlike to Guideline).

user interface showing difference between barrier and guidline
Did you like this article? Read more in the second part! Follow me on LinkedIn and stay in track.
Potrebujete pomôct s vaším digitálnym produktom? Kontaktujte nás!
hello@goodrequest.com
Do you need help with your digital product? Contact us!
hello@goodrequest.com

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.