How to use new features in constraint layout 1.1?

Question

Does anyone know how to use new features in constraint layout 1.1, namely barriers and percent-based dimensions? There is absolutely no documentation available online, and the recent Google I/O talk on designer tools covered in detail only placeholders. BTW, I found out how to use groups, which are also a new feature. You need to simply add

<android.support.constraint.Group
    app:constraint_referenced_ids="button1, button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

to your constraint layout, where app:constraint_referenced_ids is a string, where you should enumerate comma separated ids of views, that you want to be associated with this group. Now, toggling the visibility of a group changes the visibility of all the views referenced by it, which I think is the main purpose of this feature right now.

Answer 1

Update: An official release of Constraint Layout 1.1.0 is finally here, complete with official documentation!

---

Documentation of the new features was very scarce when this question was first asked. The best that I could find was in this Reddit post! But the information there gave me enough hints to create a constraint layout with a horizontal barrier in it. It actually worked, and the new (beta) constraint layout also fixed some bad problems with wrap_content. My very positive first impression of the Constraint Layout Beta has held up under lots of additional testing.

Before using the new stuff, add ConstraintLayout 1.1.0 to the project.

In app/build.gradle, change the constraint layout dependency to this:

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

You might also need to add the maven repository to your project's build.gradle (which is a different file, in your project's root directory). Look for the allprojects repositories section and add this: maven { url 'https://maven.google.com' } So the whole section should look something like this:

allprojects {
     repositories {
         jcenter()
         maven { url 'https://maven.google.com' }
     }
}

Now for the fun stuff! The following snippet creates a horizontal barrier, so that bottom_textview is below both included_layout and multiline_textview.

<android.support.constraint.Barrier
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/barrier1"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="included_layout, multiline_textview" />

<TextView
    android:id="@+id/bottom_textview"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/barrier1"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />

First impression: Barriers are great! My new layout is flatter and simpler, and still seems to do exactly what I want. It's definitely worth trying.

More detailed documentation is gradually becoming available:

• summary of the new features in 1.1.0

• an excellent article about circular positioning, complete with animation

• a nice detailed article about barriers at constraintlayout.com (!)

• an article about the new 1.1.x widgets (including lots of details and sample code) at medium.com

• an article from androidtkt.com with examples of barriers, groups, placeholders, and percent dimensions

@Vyacheslav A's answer also has a great summary of what the new features can do.

Answer 2

1. Percent Dimensions

The default behavior of widgets of width 0dp (or 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 some percentage of the available space.

    <!-- the widget will take 40% of the available space -->
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.4"

2. Barriers

From this new widget, we have some example from ConstraintLayout.com. Barriers will avoid one or more widgets to bypass the Barrier. When this occurs, the Barrier will move itself, and avoiding the widget(s) to be placed above it. In the example below, the end property of both text1 and text2 cannot bypass the Barrier. When this occurs, the Barrier will move itself to the right (or to the left, if in a RTL layout). This is particulary handful when dealing with different widget sizes, depending of some configuration or internationalization.

<android.support.constraint.ConstraintLayout...>
  <TextView
    android:id="@+id/text1" ... />
  <TextView
    android:id="@+id/text2" ... />
  <android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end" <!-- start, top, bottom, right... -->
    app:constraint_referenced_ids="text1,text2" />
  <TextView
    android:id="@+id/text3"
    ...
    app:layout_constraintStart_toEndOf="@+id/barrier" />
</android.support.constraint.ConstraintLayout>

3. Group

Groups, like the Guidelines, are widgets with size 0. But Group helps to apply some action to a set of widgets. The most common case, is to control a visibility of a collection of widgets. When dealing with this scenario, the most common solution was to maintain yourself a list or set of views inside the Activity or Fragment, or even adding a ViewGroup 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 group will propagate the actions to all plugged views.

<android.support.constraint.ConstraintLayout ...>
  <TextView
    android:id="@+id/text1" ... />
  <TextView
    android:id="@+id/text2" ... />
  <android.support.constraint.Group
    android:id="@+id/group"
    ...
    app:constraint_referenced_ids="text1,text2" />
</android.support.constraint.ConstraintLayout>

In this case, if we call

group.setVisibility(View.GONE);

then text1 and text2 will receive the visibility GONE.

Original text here.

Official docs with description here.

Answer 3

There is some information on Barrier here.