Introducing Constraint Layout 1.1
Constraint Layout simplifies creating complex layouts in Android by making it possible to build most of your UI using the visual editor in Android Studio. It’s often described as a more powerful RelativeLayout. With Constraint Layout you can define complex layouts without building complicated view hierarchies.
Constraint Layout 1.1 was recently released as stable and there’s a lot to love. A complete overhaul of optimization makes most layouts run even faster than before and new features like barriers and groups make real-world designs simple!
Android Gradle
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.1.0'
}To use the new features in your project add Constraint Layout 1.1 as a dependency.
New Features in 1.1
Percents
In Constraint Layout 1.0 making a view take up a percentage of the screen required making two guidelines. In Constraint Layout 1.1 we’ve made it simpler by allowing you to easily constrain any view to a percentage width or height.
All views support layout_constraintWidth_percent and layout_constraintHeight_percent attributes. These will cause the constraint to be fixed at a percentage of the available space. So making a Button or a TextView expand to fill a percent of the screen can be done with a few lines of XML.
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_percent="0.7" />Chains
Positioning multiple elements with a chain lets you configure how they fill the available space. In 1.1 we’ve fixed several bugs with chains and made them work on more views. You make a chain by adding constraints in both directions. For example in this animation, there’s a constraint between every view.
The app:layout_constraintVertical_chainStyle property is available on any view in the chain. You can set it to either spread, spread_inside, or packed.
- spread evenly distributes all the views in the chain
- spread_inside positions the first and last element on the edge, and evenly distribute the rest of the elements
- packed pack the elements together at the center of the chain
Barriers
When you have several views that may change size at runtime, you can use a barrier to constrain elements . A barrier is positioned at the start, top, end, or bottom of several elements. You can think of it as a way of making a virtual group — virtual because it doesn’t add this group to view hierarchy.
Barriers are really useful when you’re laying out internationalized strings or displaying user generated content whose size you cannot predict.
The barrier will always position itself just outside the virtual group, and you can use it to constrain other views. In this example, the right view is constrained to always be to the end of the largest text view.
Groups
Sometimes you need to show or hide several elements at once. To support this, Constraint Layout added groups.
A group doesn’t add a level to the view hierarchy — it’s really just a way to tag views. In the example below, we’re tagging profile_name and profile_image to be referenced by the id profile.
This is useful when you have several elements that are shown or displayed together.
<android.support.constraint.Group
android:id="@+id/profile"
app:constraint_referenced_ids="profile_name,profile_image" />Once you’ve defined the group profile you can apply visibility to the group, and it’ll be applied to both profile_name and profile_image.
profile.visibility = GONEprofile.visibility = VISIBLE
Circular Constraints
In Constraint Layout most constraints are specified by the screen dimensions — horizontal and vertical. In Constraint Layout 1.1 there’s a new type of constraint ,constraintCircle, that lets you specify constraints along a circle. Instead of providing horizontal and vertical margins, you specify the angle and radius of a circle. This is useful for views that are offset at an angle like a radial menu!
When creating circular constraints, note that angles start at the top and progress clockwise. Here’s how you would specify the middle fab in this example:
<android.support.design.widget.FloatingActionButton
android:id="@+id/middle_expanded_fab"
app:layout_constraintCircle="@+id/fab"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="315" />Animations with ConstraintSet
You can use Constraint Layout along with ConstraintSet to animate several elements at once.
A ConstraintSet holds just the constraints of a ConstraintLayout. You can create a ConstraintSet in code, or by loading it from a layout file. You can then apply a ConstraintSet to a ConstraintLayout, updating all the constraints to match what’s in the ConstraintSet.
To make it animate, use TransitionManager.beginDelayedTransition() from the support library. This function will cause all the layout changes from your ConstraintSet to be animated.
Here’s a video covering the topic in more depth:
New Optimizations
Constraint Layout 1.1 adds several new optimizations that speed up your layouts. The optimizations run as a separate pass, and attempt to reduce the number of constraints needed to layout your views.
In general they work by finding constants in your layout and simplifying them.
There’s a new tag, called layout_optimizationLevel, which configures the optimization level. It can be set to the following:
- barriers figures out where barriers are and replaces them with simpler constraints
- direct optimizes elements directly connected to fixed element, for example the side of the screen or guidelines, and continues to optimize any elements directly connected to them
- standard is the default optimization level which includes barriers and direct
- dimensions is currently experimental and can cause issues on some layouts — it optimizes the layout pass by calculating dimensions
- chains is currently experimental and figures out how to lay out chains of elements with fixed sizes
If you want to try out the experimental optimizations dimensions and chains you can enable them on a ConstraintLayout with
<android.support.constraint.ConstraintLayout
app:layout_optimizationLevel="standard|dimensions|chains"Learn More
To learn more about Constraint Layout 1.1 check out the documentation and code lab!
