Constraint Layout: New Features with Release

Elif Boncuk
4 min readApr 1, 2017

--

A couple of weeks later, I’ll talk about the new constraint layout at App Builders Switzerland, Lausanne. So excited to be part of this wonderful organisation and will be sharing my constraint layout experiences with other great Android developers.

So Constraint Layout is with us since Google I/O’16, we’re talking about it, think about to use on our Android projects and it has been finally released, what have been changed at this process. After Google I/O’16, I’ve written my first impressions on Constraint Layout and if you want, you can review it first from the link :) I gave up counting the beta versions’ numbers after 9. But the constraint layout team published lots of versions and also very frequent in that process.

So for a quick start, constraint layout is very similar to relative layout but more flexible and easy to build. I think, it’s just like a combination of relative, frame and linear layouts but collecting the most useful features. It could have been used the beta versions at Android Studio 2.2 but for released version, you need Android Studio 2.3. The biggest advantage of ConstraintLayout is designing with a Layout Editor — drag-drop.

There are three main options with designing Constraint Layout. We can draw all the constraints on by own, use autoconnect or infer constraints. Autoconnect and infer constraints options are very similar to each other. Basically, they add the constraints automatically but with a minor difference. while autoconnect adds the constraints only if we’re on the guide lines and to the parent view not other views, infer constraints adds the close constraints. In addition, infer constraints is triggerred after design completed but autoconnect adds the constraints automatically. On the other hand, if we prefer to add constraints manually, there is one thing that we should take care of which is each component at list has one vertical and one horizontal constraint. Probably, we’ll need more. I’m saying this as a warning, because Android Studio will let you build your project without mandatory constraints. But if we do not add, the component’ll lie on the 0–0 point.

Another nice thing is using our own guidelines. We can add vertical or horizontal guidelines and create constraint to these lines. This guidelines will be visible only during the development.

https://developer.android.com/training/constraint-layout/index.html

Again one more new feature with released version. Of course, it could be changed the size of the view as using corner handles. The new feature is size ratio. If we click the corner of the view at layout inspector perspective, we can set a size ratio at here.

https://developer.android.com/training/constraint-layout/images/constraint-chain-styles_2x.png

Another one: chains. It’s like an upgraded version of Linear Layout’s weight feature. At the first one(spread), components on the chain distributed at equally. The important thing is distribution done after margins. This distribution is not done for margins, after the margins. At the second one(spread inside), the first and last components are fixed to the sides and the middle ones distributed equally. The third one(weighted), is the exact same version of LinearLayout’s weight. If we use first or second one and say the height or width parameter according to orientation 0, then the views will spread equally. On the other hand, if we set layout_constraintHorizontal_weight or layout_constraintVertical_weight, then it will work like LinearLayout’s weight. The last one is packed. At packed, the bias could control all together for all views at the same chain.

And we’ll discuss more tips and tricks at the conference. See you all!

References:

--

--

Elif Boncuk

Engineering Manager, Digital Banking @GarantiBBVA | #Android #GDE | formerly volunteer @MobilerDev @gdgIstanbul @wtmist | #CE @Hacettepe1967 #MBA @Bahcesehir