Published in


Constraint layout the best layout ever!

The constraint layout was first figured out at Google I/O 2016 aiming to introduce auto layout for android, what it is actually and how it’s going to impact layout designing. Well the prime concern for the developer is layout selection whether to go with Relative, Linear, Frame or Percentage Relative layout and in case of any change in the UI thereafter will add up an extra overhead and sometime in worst case scenario it may leads to recreating the entire layout. To avoid such problem android is having a perfect layout named constraint layout.

How do I add constraint layout?
Constraint layout dependency have to be added to gradle file and that’s it you are ready to go!

dependencies {
compile ‘’

Now as you are ready to go the first and foremost thing that you have to do is replace the parent layout with ConstraintLayout. The view inside constraint layout have to be defined through the constraints like to the left/right/top/bottom of the view by default all view take the position of top left corner if constraints are not defined.

The available attributes are:

Understand the dimensions
Screen is considered as parent for the view so if you write constraintLeft_toLeftOf = “parent” this means that start the view from the left side of the screen. In technical terms if I say than whatever viewgroup under which you have your constraint layout that will define the boundary for your constraint layout hence having top viewgroup with width match parent makes left or side side equivalent to screen left or right side whereas having some confined width will alert left or right side equivalent to viewgroup left or right side same is applicable for the top,bottom and right side also.
If you define both constraintLeft_toLeftOf and constraintRight_toRightOf than you can set width=0dp that means match constraint and same way if you define both constraintTop_toTopOf and constraintBottom_toBottomOf than you can set height=0dp.

How to position view?
There are a set of attributes to position a view. The constraintLeft_toLeftOf attribute will put the view at the left side of the corresponding view similarly constraintRight_toRightOf will put the view on the right side.Whereas constraintTop_toTopOf will align the view right on the top on the view as if they are overlapping same case with constraintBottom_toBottomOf. So if you want your view on the top of another view then you have to use constraintBottom_toTopOf. What this does is that it will align your view bottom side with the corresponding view top side hence your view will come on the top of that view.
Well if you do all this through editor then no need to worry all you have to do is just to connect the respective circle which appears on all 4 sides of the view to the corresponding view.

Too many attributes looks so weird!
No, not exactly the major part of the attributes that you see when you drag and drop view starts with tools not with app. All those attributes which starts with tools is just for positioning view on preview screen so when you run your project all those attributes starting with tools gets deleted. Now the major part of concern is those attributes which starts with app.

Do there are any previously known attribute?
Yes, the margin attributes in relative layout is same and work exactly as they do in a relative layout. Few extra attributes with respect to margin are

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

So now it’s possible to define the margin for the view whose visibility is set to gone. What this does is that if view is visible it will consider it’s normal margin and as soon as it’s set to gone then it will consider another margin.

Note: If you do not specify the gone margin and the view is set to gone then the margin considered for that will be zero.

Take an advantage of percentage system
The new concept is bias system what this does is that you will define the percentage of the screen the view should move forward or downward ranging for 0 to 100%. The most important part is that width has to wrap content if horizontal bias is used and height to be wrap content if vertical bias is used. Attributes used for this are

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias

This will position the textview to the 50% of the screen. In case you want to position based some view than use constraintLeft_toRightOf and use id of that view after this it will calculate percentage based on that view not from the screen.

Ratio you view!
Now it’s possible to define the ratio to width and height for the view using layout_constraintDimensionRatio attribute. The ratio is defined in terms of width:height so layout_constraintDimensionRatio=2:1 means width is twice the height of view. The order to define ratio can also be changed by using H or W before defining ratio that means layout_constraintDimensionRatio=W,2:1 width is twice the height
layout_constraintDimensionRatio=H,2:1 height is twice the width

Note: If you want to use ratio than either width or height of the view has to be 0dp.

Tie with chain!
It’s one the finest feature of the constraint layout which allows to create a chain like structure for the views. All the view are attached to each other like a chain and visibility of any view if set to gone will alter the chain appropriately. Chain are very beneficial if you have a view which are connected to each other with same alignment like think of number pad in keyboard. There are 5 types of chain they are as follows

Spread Chain: It calculate same space between view from the starting to the end of the screen.

Spread Inside Chain: It calculate same spaces for in-between views whereas the first and last view of the chain starts from the parent.

Weighted Chain: Just like weights in linear layout weight can be given to the views in the chain also.

Packed Chain: This removes all the spaces between the view and centered all the views with respect to parent.

Packed Chain with Bias: This also remove all the spaces between the view but instead of centering the views now this can be set based on the percentage of the screen from where chain has to start.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store