ConstraintLayout 101 & the new Layout Builder in Android Studio

What is ConstraintLayout?

ConstraintLayout  is a new type of layout that you can use in your Android App, it is compatible down to API level 9 and is part of the support library. Its aim is to reduce layout hierarchies (and improve performance of layouts) and it also reduces the complexity of trying to work with RelativeLayouts.  It is compatible with other layouts, so they can live in harmony together without having to choose one or the other.

Getting Started with ConstraintLayout:

To get started using ConstraintLayout , add the following to your build.gradle  dependencies (or Android Studio will automatically add the ConstraintLayout dependency to your build.gradle when you create a new layout using it) :

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

To use the new ConstraintLayout, click on res/layout  folder. Select New > Layout Resource Folder. In the root element option, remove LinearLayout and start typing ConstraintLayout.  You will then create a new file with your ConstraintLayout . The default view includes the Blueprint mode  and Design Mode  which will look something like this:

How does this new layout builder work?

Constraints:

Constraints are rules that you define for a widget, much like RelativeLayouts  “toLeftOf , toRightOf”, constraints offer similar options. They can also specify how widgets are aligned.

Types of Constraints:

  • Resize Handle Resize Handle -Constraint Layout Resize the widget by dragging its corners with the square icon. Resize Handle - Constraint Layout
  • Size Constraint Handle Size Constraint Handle– To specify the location of the widget, they are round circles on the side of each widget.  Constraints
  • Baseline Constraint Handle – Allows you to align two baselines of text in your widgets. Baseline ConstraintLayout
  • Bias– Specifies which direction you want your widget to have bias towards. You can specify vertical or horizontal bias.Bias - ConstaintLayout

Widget Sizing

In the side properties view, you will see an image depicting the constraints of the view size itself. Here you will be able to specify margins and decide how you want the the widget to resize, such as:

  • Match Constraint ConstraintLayout - Any Size – Similar to match_parent  except it obeys constraints – effectively 0dp.
  • Wrap Content Wrap Content - ConstraintLayout– The widget will only be as big as it needs to be for all the content inside.
  • Fixed Size  Fixed Size - Constraint Layout – Specifying a size of the widget in dp 

To toggle between these, simply click on the current option in the properties window and it will toggle between all of them.View Properties - ConstraintLayout

You will also be able to specify the bias by dragging the slider on the horizontal axis or vertical, depending on the bias you want (as shown above in the bias section).

Autoconnect

Autoconnect is a feature that automatically as you place a new widget in the layout, will start to calculate the best constraints to give a widget from where you have placed it.

As soon as you drag a widget into the layout, you will see automatic lines starting to draw from the sides of the widget, that is Autoconnect doing its job. This feature is enabled by default, and it can be toggled on and off, by clicking the magnet icon. 

autoconnect - constraintlayout

Manual Constraints

To create your own constraints, click a circle on the side of the widget you wish to position. Drag the line towards the other widget you want to align it to, once the widget turns green, it will create the constraint. You can delete a constraint by clicking on it when it is highlighted red around it.

Manual constraints - ConstraintLayout

Inference

Inference creates constraints between all different widgets in your layout, it acts like Autoconnect, but instead it works for the entire layout and not just the widget being edited. It uses complex mathematics to determine what widgets it should constrain to others, based on where you have placed it on the screen.

To use inference on a whole layout, click the sparkly yellow icon to see it work.inference - ConstraintLayout

Other things to note:

  • Using this layout editor generates XML for you. If you still want to edit some XML you still can! But trust me, after using the Layout editor you will hardly be using the XML view.

But what about my old layouts? Should I migrate them all?

I wouldn’t jump on the train of changing everything at once if it’s not necessary. If you find your layouts are slow or you are battling to make changes then perhaps you should consider changing it to use ConstraintLayout .

An advertised feature of the new Android Studio is that you can automatically convert old layouts to new ones using the ConstraintLayout . When you navigate to your layout file and are in the design view, you can right click > “Convert …Layout to ConstraintLayout”.

My thoughts:

I am excited about this new layout editor and ConstraintLayout , I really think we needed something like this in Android. After playing around a bit it seems relatively simple to understand and quite powerful.

I hope that this could be turned into a standalone design tool that designers could ultimately use to create screens.

Links:

Layout Editor Code Lab

Android Studio Layout Editor Docs

Android Layouts – A new world – YouTube video from Google I/O

 


Comments

20 responses to “ConstraintLayout 101 & the new Layout Builder in Android Studio”

  1. You are really awesome 🙂 Appreciated 🙂 🙂 Thank you for sharing.

  2. Nice share …

  3. Thank you Rebecca

  4. Christian D avatar
    Christian D

    Nice introduction to constraint layouts! Thanks! Which tool did you use to create these animated gifs?

  5. Very helpfull introduction to constraint layouts. Thanks a lot.

  6. seblog avatar
    seblog

    Thanks Rebecca! Constraint layouts is something very interesting for me, I want to experiment with them and your article is really helpful giving a basic intro to them!

  7. sakis avatar
    sakis

    This may be interesting for performance, copied from Reddit:

    “I talked to the dude who made the layout at IO – the idea is that one constraint layout can replace multiple nestings of linear/relative layouts and doesn’t require the double pass that relative layout requires, so ideally it should be faster.”

  8. Wayne avatar
    Wayne

    Awesome!

  9. Karthik Kolanji avatar
    Karthik Kolanji

    Great introduction. I always prefer tutorials that is dead simple to understand unlike android developer site .I found yours 🙂

  10. Kumar avatar
    Kumar

    nice, thanks for sharing

  11. Shimi Uhlman avatar
    Shimi Uhlman

    How is this layout better performance wise then a RelativeLayouts. if it is just for the tool i don’t see the benefit

  12. Awesome! Thank you for sharing

  13. akshay shahane avatar
    akshay shahane

    looks like xcode feature stolen my android studio …. but this will make android layout designs hell lot easier … excited to use this new layout

  14. sujesh shetty avatar
    sujesh shetty

    Relative Layouts use deeper layouts and hence are complex to render and ultimately takes time, but with Constraint Layouts you don’t need to have deeper layouts , thus eliminating complex layouts . Ultimately its faster than Relative Layouts

  15. I use Quick Time Screen recorder, then used an online tool to convert it into a gif.

  16. I am glad you are excited. I am too! It does look very similar to Xcode.

  17. Thanks for the compliment!

  18. It is in its early stages and the team is still working on improving the performance of ConstraintLayout.
    With regards to measuring, it will do only one pass per widget, unless the widget is constrained to “match constraints” (0dp) – in that case it will do two measures for that widget.

    I find it can also do a lot more than RelativeLayout. The ability to set bias and guidelines would be quite difficult to achieve with RelativeLayout.

  19. Аркадий Березкин avatar
    Аркадий Березкин

    Great Introduction to ConstraintLayout, thank you.
    I’m still wondering what it means in terms of layout to connect for example left side of one layout with the bottom of another layout. Left-to-right, top-bottom etc. connections are understandable but right-top or left-bottom are kinda confusing me.

  20. WallaceJackson avatar
    WallaceJackson

    New > Layout Resource File? There is no New > Layout Resource Folder. There is New > Directory however. Walls.