locations (deprecated) • LinearLayout - orders children vertically or horizontally • RelativeLayout - orders children relative to each other • FrameLayout - orders children based on their z-depth (or order of definition). • TableLayout - orders children into rows/columns
anchor points on other views or the parent layout so that constraints are satisfied. • API 9+ • Current version 1.1.0-beta3 • Android Studio 3.0 - visual layout editor • Maintains a flat hierarchy which allows constraints to be easily modified - animations! • Used by iOS as its AutoLayout layout manager
to other views based on a target anchor. e.g. the Start of “this” view is anchored to the End of another view. The top of “this” view is anchored to the top of the parent. • Circle - this view is anchored to another view, but is place a given radius away from the centre, at a given angle. • Chains • Multiple views grouped in a chain, whitespace can be divided equally between views. Chains can have a bias so that the elements are offset from their default position.
positioned horizontally or vertically and can be used as a constraint anchor. E.g. 16dp/72dp material design key lines • Barriers • A virtual object which can be anchored to the edge of multiple views. e.g. it’ll represent an anchor that is as wide as the widest view linked to the constrained reference ids. • Groups • A virtual group that lets you apply property changes to multiple views at once. Currently only supports visibility.
Bottom, Start or End of a view. These anchors can be connected to other views, or the parent. • Connecting a view to the Start and End of the parent will centre it horizontally on the screen. • Applying a bias to this constraint lets you offset the view from the centre.
constraint between views. • The head of the chain is the element that chooses what style of chain being defined. • There are several ways you can configure the spacing and bias between the chained views
in the view itself, but is only there to help constrain other views. • Guidelines can be horizontal or vertical. • Guidelines can be a fixed distance from another view e.g. 72dp from parent start. • Or they can be a percentage e.g. 50% from parent start.
in the final layout, but can be used to constrain one view against many views. • e.g. The body text here is constrained to be to the right of the 2 labels Warehouse and Hospital. • If those labels were to change size (e.g. language=DE), the words would be different lengths, so constraining against only one would cause layout problems.
can create, the great things about groups is that there defined not by wrapping the children that make up the group. They form a group based on id attributes. • This means you still maintain a flat hierarchy. It also means a view can be inside multiple groups. • As mentioned earlier only visibility can be changed via a group currently.
RelativeLayout that performs some aspect ratio measurements so that child views are constrained to 16:9 or 4:3. • Later Google released a PercentageLayout - deprecated in API 26. • Now you can specify a ratio on any view that is a child of a ConstraintLayout. <ImageView android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintDimensionRatio="H,16:9" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent"/>
of constraints to a given layout. • The TransitionManager framework will then animate these changes. • Constraint changes can be defined in XML or in code.
move views around very easily. • ConstraintSets allow you to define the start and end positions of an animation (a bit like keyframes), and the TransitionManager framework will animate between the 2 states.
constraints when the transition starts. • Here we’re animating the movement of planets using circular positioning. When we click on the sun icon we animate to a set of static details.
to layout views, but once you grasp the concepts, XML is probably easier. • One gotcha, is that the visual editor will add “editor” constraints to your XML, so the layout looks fine in the IDE but awful on a device. • I prefer to use the XML view in Android Studio to define the constraints, but use the preview window side-by-side to check the visual output. • Don’t use match_parent for ANY view, instead use 0dp, which is now know as “match constraints”.
library to bring a Google Now inspired card style to your app. • CardView extends FrameLayout • This means you need to include a child Layout in most cases to layout multiple child views. • Copy the class, maintain the same package name but change FrameLayout to ConstraintLayout • All the power of ConstraintLayout, but wrapped in a nice CardView look and feel.