How to use new features in constraint layout 1.1?

Roman picture Roman · May 20, 2017 · Viewed 14.3k times · Source

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

Rapunzel Van Winkle picture Rapunzel Van Winkle · May 25, 2017

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:

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