Android About ConstraintLayout

DID YOU KNOW about ConstraintLayout?

Constraints

 

Definition

ConstraintLayout is a new type of layout introduced by Android, similar to RelativeLayout but more flexible, and it is used to position UI elements relative to other UI elements by using constraints.

A constraint represent the rules we have to apply in order to position our UI elements relative to each other.

Overview

  • ConstraintLayout has backwards compatibility (it is available in Support Library compatible with Android 2.3 and higher)
  • When you create a new project, ConstraintLayout is used now in the template instead of RelativeLayout
  • ConstraintLayout can be used directly from xml, but it is recommended to use the new Layout Editor
  • Layout editor is available from Android Studio 2.2 Preview and was build especially for this new type of layout
  • constraints can be created:
    • manually
    • by using Autoconnect (before, the layout editor started with Autoconnect enabled, but from Android Studio 2.2 Preview 5, it is now disabled by default. Also, the icon will be visible only if you use ConstraintLayout).
    • by using  Inference
  • the difference between Autoconnect and Inference is that, Autoconnect creates constraints for the widget being currently moved (the current widget is constrained by other widgets, but other widgets won’t be constrained by the widget currently being moved) , whereas Inference creates constraints among all elements in a layout.
  • constraints can be defined for one or more sides of a view by connecting the view to:
    • an anchor point on another view
    • an edge of the layout
    • an invisible guideline

Rules for the Constraint System

  • anchors on different axis cannot be connected (such as top and left anchor)
  • baseline constraint can only be constrained to another baseline
  • constraints resulting in a cycle are not permitted

References

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

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

keyboard_arrow_up