Lesson Wednesday

Earlier in the course we discussed the constraint layouts that Android Studio 2.2+ creates by default for new activities. We also addressed how to turn them back into Relative layouts, so we could practice standard layouts too. But now that we're growing more and more comfortable with layouts and XML in general, let's explore the newer constraint layout options too.

Introduction to Constraint Layouts

First, a little context: The constraint layout library was released with Android Studio 2.2 in February 2017. ConstraintLayout gets its name from the constraints it uses to position items. In terms of Android layouts, a constraint is a rule for a view within a layout. It declares how the element should be positioned on the screen; including its relative alignment to other layout elements.

By declaring constraints for view elements, developers can more readily create large, complex layouts with a flat view hierarchy (this means layout elements are not nested within one another, as they are in a RelativeLayout).

Reducing the number of elements nested within one another reduces load time, as explained in this in-depth article on Performance and View Hierarchies.

Android Studio versions 2.2 and above also include a special layout editor to assist in the creation of these constraint layouts (we'll see what this editor looks like in the videos below).

Constraint Versus Relative Layouts

But what's the difference between the new ConstraintLayout and the RelativeLayout we've discussed in previous lessons?

Flat Versus Deep View Hierarchies

As we just touched on, a constraint layout is a flat view hierarchy, meaning elements are not nested deeply within one another. Whereas relative layouts are often referred to as deep view hierarchies, because elements can be nested deeply within one another.

Flat view hierarchies, like constraint layouts, load slightly faster than deep view hierarchies, like relative layouts. Their XML code is also a little easier to manage.

Bias Values

Unlike relative layouts, constraint layouts include a bias value. This is a percentage between 1% and 100% used to position a view's horizontal and vertical offset in relation to other elements. This allows easy, seamless positioning no matter what the user's screen size may be.

Layout Editor

It's also a little easier to use Android Studio's new layout editor (a feature available in versions 2.2.2 and above) with constraint layouts. The editor allows developers to drag and drop elements, and Android Studio generates the corresponding XML automatically. (We'll learn more about this process in the videos below.)

Working with Constraint Layouts

You may want to experiment with integrating constraint layouts into your own projects. Again, this is completely optional. But, for those that would like to try them out, the videos below will walk through creating this new type of layout, including how to use the new layout editor tool.

Building a Constraint Layout with the Android Studio Layout Editor

The Android Studio 2.2 Constraint Layouts for Beginners (29 mins) video is an excellent introduction to both constraint layouts, and Android Studio's new Layout Editor. It walks through the process of constructing a new layouts from scratch:

Its sequel, Android Studio 2.2 Constraints Layout Part 2 (13 mins), continues where the first video left off, exploring more complex features and capabilities:

More Recommended Resources

Interested in learning even more about constraint layouts? Or practicing creating and designing them? We recommend the following resources: