Introducing Constraint Layout 1.1

Sean McQuillan
Apr 23, 2018 · 5 min read

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

Image for post
Image for post
Specify the width of button using percents so it fits in the available space while maintaining your design.

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

Image for post
Image for post
Chains let you configure how to layout multiple related views with spread, spread_inside, and packed.

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

Barriers are really useful when you’re laying out internationalized strings or displaying user generated content whose size you cannot predict.

Image for post
Image for post
Barriers allow you to create a constraint from several views.

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

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

Image for post
Image for post
You can create radial menus by specifying a radius and angle to offset.

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

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

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!

Android Developers

The official Android Developers publication on Medium

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store