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!
To use the new features in your project add Constraint Layout 1.1 as a dependency.
New Features in 1.1
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_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.
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.
app:layout_constraintVertical_chainStyle property is available on any view in the chain. You can set it to either
- 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
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
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.
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_image to be referenced by the id
This is useful when you have several elements that are shown or displayed together.
Once you’ve defined the group
profile you can apply visibility to the group, and it’ll be applied to both
profile.visibility = GONEprofile.visibility = VISIBLE
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:
Animations with ConstraintSet
You can use Constraint Layout along with
ConstraintSet to animate several elements at once.
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
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:
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
Build a Responsive UI with ConstraintLayout | Android Developers
ConstraintLayout is available in an API library that's compatible with Android 2.3 (API level 9) and higher. This page…
ConstraintLayout | Android Developers
Relative positioning is one of the basic building block of creating layouts in ConstraintLayout. Those constraints…
Use ConstraintLayout to design your Android views
In this codelab, you'll learn how to use the Android Studio Layout Editor with ConstraintLayout-a new type of layout…
To learn more about Constraint Layout 1.1 check out the documentation and code lab!