How to use new features in constraint layout 1.1?

Viewed 15410

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.

4 Answers

Here is the official doc that perfectly explains all new features added in constraint layout 1.1

But one more thing to note for Groups is that if you give your view as a reference id in Group, its individual visibility will not work, for that to work you will need to create a separate Group for it. Do correct me if I am wrong. Here is the sample code which uses Group, as you can see here view1's visibility will not work as it is assigned to a group.

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="view1,view2" />

    <View
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/black"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1" />

    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <View
        android:id="@+id/view4"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view3" />

</android.support.constraint.ConstraintLayout>

Now to overcome this we can create a new group to handle view1's visibility, as given below.

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

This is the workaround I came across, if there is such scenario where we want to handle a group's visibility as well as individual view's visibility in different cases.

Related