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.
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.
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.
There is some information on Barrier here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With