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.
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
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).
But what's the difference between the new
ConstraintLayout and the
RelativeLayout we've discussed in previous lessons?
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.
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.
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.)
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.
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:
Interested in learning even more about constraint layouts? Or practicing creating and designing them? We recommend the following resources:
Using ConstraintLayout to Design your Views - A tutorial from Google, complete with sample code to follow along with and practice.
Joe Birch's blog post Exploring the new Android ConstraintLayout
Android Studio Guide to Building a UI with the Layout Editor provides more detail and instruction for using the built-in Layout Editor seen in the videos above.
Android Documentation for the ConstraintLayout Class