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

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.

<android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end" <!--start,end top, bottom, right,left-->
        app:constraint_referenced_ids="home,office" />

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:

 ....
app:constraint_referenced_ids="home,office" />

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.

<TextView
     android:id="@+id/description"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     ....
     app:layout_constraintTop_toTopOf="parent"
     app:layout_constraintStart_toEndOf="@+id/barrier"
     app:layout_constraintRight_toRightOf="parent"
     />

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.

 <TextView
      android:id="@+id/home"
      .....
      app:layout_constraintTop_toTopOf="parent" />
<TextView
     android:id="@+id/office"
     .....
     app:layout_constraintTop_toTopOf="parent" />
<
android.support.constraint.Group
    android:id=”@+id/group”
    ...
    app:constraint_referenced_ids=”home,office" />
</android.support.constraint.ConstraintLayout>
Java Code
group.setVisibility(View.GONE);

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. 

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:parentTag="android.support.constraint.ConstraintLayout">
    <android.support.constraint.Placeholder
        android:id="@+id/template_main_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        app:content="@+id/top_image"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <android.support.constraint.Placeholder
        android:id="@+id/template_action"
        android:layout_width="48dp"
        android:layout_height="48dp"
        app:content="@+id/save"
        app:layout_constraintBottom_toBottomOf="@id/template_main_image"
        app:layout_constraintHorizontal_bias="0.80"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/template_main_image" />
</merge>

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.

   <ImageView
        android:id="@+id/top_image"
        android:scaleType="fitXY"
        android:src="@drawable/place_holder_demo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <include layout="@layout/template" />
    <ImageButton
        android:id="@+id/save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:srcCompat="@drawable/ic_save_black_24dp"
        tools:layout_editor_absoluteX="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintEnd_toStartOf="@+id/edit" />

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.

Placeholder mainAction;
ImageButton save, delete, cancel, edit;
mainAction = (Placeholder) findViewById(R.id.template_action);
@Override
protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     ....
     mainAction = (Placeholder) findViewById(R.id.template_action);
     constraintLayout = (ConstraintLayout) findViewById(R.id.root);
     save = (ImageButton) findViewById(R.id.save);
     save.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
             TransitionManager.beginDelayedTransition(constraintLayout);
             mainAction.setContentId(view.getId());
         }
    });
   ...
}

Percent Dimensions

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.

    <TextView
        android:id="@+id/textView6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />

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