New features in ConstraintLayout 1.1.x

Google I/O 17   announce a new release of ConstraintLayout. But, we didn’t get so much info about what’s inside the package, only a very superficial blog post. No docs, no examples.

So, I searched around a bit, classes and did a dive into this release to check what’s new, and how they work.

Barriers

Sometimes layout can change depending on the localization. Here is a really simple example:

Constraint Layout barrier

Here we have three TextViews: Home and Office on the left and Description on the right.

A Barrier is a virtual view to which we can constrain objects. The position of a Barrier is determined by the dimensions of multiple views. In the case of our example, we don’t know whether Home or Office will be wider, so we can create a Barrier based upon the widths of these two Views. Then we can constrain Description to the Barrier.

Creating Barriers

First, we create a vertical barrier.

Next, we need to set the direction for the Barrier. In our case we want to position the Barrierrelative to the End of either Home or Office depending on whichever is the larger, so we need to specify a direction of end:

The final step in defining the Barrier is to tell it which Views we need to position it relative to. For a Barrier we need to define multiple Views as referenced IDs.

change the constraint of Descriptionto be relative to the Barrier rather than Home

Barrieris the Barrier element itself. The app:barrierDirectionattribute determines the direction of the Barrier – in this case it will be positioned at the end of the referenced Views.

The list of referenced Views is a comma separated list of the IDs of other Views within the layout (without the @+id/ qualifier).

Group

Groups, like the Barrier, are widgets with size 0. The group helps to apply some action to a set of widgets. For example, The control a visibility of a collection of widgets. When dealing with this scenario, the most common solution was to maintain yourself a  set of views inside the Activity and put all the views inside of it, controlling the visibility of the container. Now, you only need to add their ids to the Group, and the group will propagate the actions to all plugged views.

Placeholders

A place where you can move a widget.You can create a virtual view and set its content to another view within the Constraint Layout.


Constraint Layout Placeholder

Download this project from GitHub.

In this simple example, It’s grabbing whichever one you clicked on and wrapping the middle of the screen.The animation you’re seeing on the right is completely being generated by the code you see in the example.

Design a placeholder-base UI with a merge tag. You’ve defined in ConstraintLayout, make sure to use the parent tag If you want to see the UI while you’re doing it.It essentially gives you a fixed layout which you can then use in another file.So in this case, I’ve decided to have one placeholder that’s going to be my top image, a big image and then and second placeholder that’s going to be my action button.

In Main Layout I just declare the two UI elements and include the template.Essentially it produces a template that decides on how you do your layout.

Another great feature from Placeholder is to change its referenced id at runtime, allowing you to create dynamic layouts and even cool animations with considerably less effort than using other ways.

Percent Dimensions

The default behavior of widgets of width 0dp (match_constraint) is spread (configurable through the layout_constraintWidth_default property). In ConstraintLayout 1.0.x, we had a choice to change it to wrap, and in 1.1.x, we have a new value, percent, that allow us to set a widget to take the percentage of the available space.

 

So that’s it! At least what I found by myself. Like it and share if this was useful for you.

Related Post

ConstraintLayout 1.1.0: Circular Positioning