Getting started with ConstraintLayout in Kotlin- Part 2: understanding constraints, bias, and chains
In the first part of this series, we took baby steps into ConstraintLayout and how it compares to other layouts. In this part, we will go deeper into ConstraintLayouts. Specifically looking into constraints, bias, and chains.
Prerequisites
For you to follow along in the entire series, you need to have the following requirements:
Android Studio(v3.0 or higher) installed on your machine. Download here.
Ability to navigate the Android Studio IDE.
A basic understanding of Android development, especially layouts.
If you have these prerequisites, let’s start.
Constraints
As the name suggests, the ConstraintLayout works based on a set of constraints. A constraint is simply a relationship between two components within the layout that controls how the view will be positioned.
When creating constraints, there are a few rules to follow:
Every view must have at least two constraints: one horizontal and one vertical. If a constraint for any axis is not added, your view jumps to the zero point of that axis.
You can create constraints only between a constraint handle and an anchor point that share the same plane. So a vertical plane(the left and right sides) of a view can be constrained only to another vertical plane, and baselines can constrain only to other baselines.
Each constraint handle can be used for just one constraint, but you can create multiple constraints(from different views) to the same anchor point.
Adding constraints
By default, when you add an element to your layout, for instance a Button:
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
It takes the(0,0) position, which is essentially point zero on the horizontal and vertical axis. On the layout design view, you can easily drag this button to any part of the screen you want like the center of the screen. If you do this, your button tag in the XML will have additional attributes similar to this:
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="231dp"
The tools attributes are introduced in order to position elements. Tools attributes are ignored at runtime, so, the button will eventually revert to position(0,0). To properly place this button, and keep it in place, we need to add constraints to it.
#### Adding constraints automatically
Android Studio has a capability to automatically add constraints as you add your elements through the layout design screen. The following GIF illustrates this in action:
By default, the Autoconnect icon(the U like icon) is disabled. To enable autoconstraint, we clicked the icon, which will remove the strikethrough on the icon. We then dragged the textview to the left part of the layout. This then gave us these constraints automatically:
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
When you build more complex layouts however, autoconstraints might not give you what you want. In such cases, you are better off creating and manipulating the constraints manually.
Prerequisites
Constraints
<Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />tools:layout_editor_absoluteX="148dp"tools:layout_editor_absoluteY="231dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"