There are many advantages of using constraintLayout. It bears some similarity to RelativeLayout in terms of laying out all views in accordance with the relationships between parent layout and sibling views, yet it\u2019s a lot more flexible and works better with Android Studio\u2019s Layout Editor. And the one advantage that most people overlook is that you can even perform animations on your ConstraintLayout views with very little code.<\/span><\/p>\n ConstraintLayout is available as a separate support library, which is great because this way, any update in the future would be compatible with all versions of Android. As of right now, the latest version supported is 1.1.0-beta4. Key changes this version includes are <\/span><\/p>\n To get started with your project, first make sure that ConstraintLayout for Android and Solver for ConstraintLayout support repositories are installed. Now add the ConstraintLayout library as a dependency in your <\/span>build.gradle<\/span> \u00a0file:<\/span><\/p>\n There are two ways to get started with using ConstraintLayout in your layouts. Either you can create a new layout with the Root Tag Value of android.support.constraint.ConstraintLayout or simply right-click on the ViewGroup you\u2019d like to convert in your existing layout.<\/p>\n Enabling auto-connect will automatically add a constraint to the view based on its position and views around it. <\/span><\/p>\n Just as there are two sides of a coin, auto-connect too has its advantages and disadvantages.It can make developing UI easier and faster but at the same time if the auto-connect constraints don\u2019t fulfill your requirements then you will have to make extra efforts edit them to meet your requirements.<\/span><\/p>\n Infer constraint comes into play when you want to create overall constraints to all the views in a layout. When you click the infer constraint icon it will add constraints according to the position of the view in the layout.<\/span><\/p>\n Constraint Layout provides inspector pane to provide more ease and efficient UI designing.<\/span><\/p>\n You will find inspector pane on the right hand side of the layout builder and it lists various properties of the selected widget. <\/span><\/p>\n Following are the important and commonly used features of constraint layout :-<\/span><\/p>\n 1. Bias<\/b> – bias allows us to move certain component towards a certain direction.<\/span>Horizontal Bias allows us to move components horizontally whereas the Vertical Bias allows vertical movement.<\/span><\/p>\n <\/p>\n 2. Circular Positioning<\/b> – You can constrain a component\u2019s center relative to another component\u2019s center, at a particular angle and distance, thereby allowing you to place the components in a circular path.<\/span><\/p>\n 3. Chains<\/b> – There are 4 types of chain styles – \u00a0Spread, Weighted, Spread Inside and Packed<\/span><\/p>\n 4. Virtual Helper Objects<\/b> – ConstraintLayout also provides us with some virtual helpers which are not seen on the layout but helps in making UI neat and organised. These are –<\/span><\/p>\n To sum up, ConstraintLayout is a faster, better and much more efficient alternative to designing large and aesthetic layouts in your Android UI. Now that you are acquainted with the basics of ConstraintLayout, you can begin experimenting with it and get a feel of how much easier it makes your job. Do share your experiences, questions and ideas with us, and have fun designing. <\/span>Using ConstraintLayout In Your Project<\/b><\/h2>\n
\n
dependencies {\r\n compile 'com.android.support.constraint:constraint-layout:1.1.0-beta4'\r\n}\r\n<\/pre>\nUsing Auto-Connect and Infer Constraint<\/b><\/h2>\n
Inspector Pane<\/b><\/h2>\n
![\"\"](\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/02\/ezgif.com-video-to-gif.gif\")
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a>
\n<\/a><\/p>\n\n
Conclusion<\/b><\/h2>\n
\n
![\n<\/a><\/p>\n4. Virtual Helper Objects<\/b> – ConstraintLayout also provides us with some virtual helpers which are not seen on the layout but helps in making UI neat and organised. These are –<\/span><\/p>\n\nGuidelines <\/strong>– These allow the constraint to attach to them and align them in the required manner.A guideline may be vertical or horizontal depending upon the requirement.<\/span><\/li>\nBarriers <\/strong>– These are used to align elements which dynamically vary their size.<\/span><\/li>\nGroup <\/strong>– Grouping in constraintLayout refers to reference of view ids and not nesting of views. Grouping of views can be used to set the visibility of group components.<\/span><\/li>\n<\/ul>\nConclusion<\/b><\/h2>\nTo sum up, ConstraintLayout is a faster, better and much more efficient alternative to designing large and aesthetic layouts in your Android UI. Now that you are acquainted with the basics of ConstraintLayout, you can begin experimenting with it and get a feel of how much easier it makes your job. Do share your experiences, questions and ideas with us, and have fun designing. <\/span>\n](\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/02\/ConstraintLayout-Circular-constraints.png\"){kind=link}