ConstraintLayout 101 & the new Layout Builder in Android Studio

Datetime:2016-08-22 23:21:35          Topic: Android Studio           Share

I was lucky enough toattend Google I/O and I went to the talk about the new Layout – ConstraintLayout . I was really excited about this feature that I couldn’t wait till I got home to try it out.

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:

You need to download Android Studio 2.2 Preview 1 to try it out. With this new layout comes a new layout editor (which I am told was designed from the ground up, *huge sigh of relief* as the old one was really unusable).

To get started using ConstraintLayout , add the following to your build . gradle dependencies

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'

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

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:

  • Any Size  – Similar to match_parent   except it obeys constraints – effectively 0dp.
  • Wrap Content – The widget will only be as big as it needs to be for all the content inside.
  • Fixed Size     – 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.

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.

Manual Constraints

To create your own constraints, you would need to turn off the “Autoconnect” feature (the magnet icon). Once this is off, you will be able 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 double clicking on it.

Inference

Inference creates constraints between all different widgets in your layout, it acts like Autoconnect, but instead if works for the entire layout and not just the widget being edited. It uses crazy 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 lightbulb icon to see it work.

Other things to note:

  • The new layout editor does not depend on you using a ConstraintLayout  , it works for older layouts too – some of the features like automatic inference won’t work.
  • Using this layout editor generates XML for you, so if you want to be hardcore and write the XML yourself, you are welcome to.
  • You can use an array of other layout properties, such as:
    • Setting default margin
    • Align a group of widgets right, centre, equal distribution just like a design program would offer you.

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 . It is still in early alpha.

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”.

I am not sure if I was doing something wrong but for all three times I tried, the ConstraintLayout was added to the view but results were not as expected. I suspect this feature is still going to take a while before it works for every use case –  it is still in alpha after all .

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.

What are your thoughts? Have you tried out ConstraintLayout ?

Links :

https://codelabs.developers.google.com/codelabs/constraint-layout/index.html

http://tools.android.com/tech-docs/layout-editor

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





About List