ConstraintLayout Tutorial for Android: Getting Started

Deleting Individual Constraints

Next, bring your mouse cursor over one of the constraint anchors where you have already set a constraint. The circle representing the arrow should now flash red, and the constraint is also highlighted in red.

Clicking the anchor would now delete the constraint. Don’t click, and leave the anchor where it is, but remember that option if you need to delete a constraint in the future.

Now you know how to constrain a UI element to the borders of its parent container. It’s time to learn how to constrain UI elements to each other, as well.

Constraining Objects to One Another

In this step of the tutorial, you’ll ensure that the Raze Galactic TextView is always aligned with the rocket image.

To do this, you’ll constrain the top anchor of the Raze Galactic TextView to the top anchor of the ImageView, and the bottom anchor of the TextView to the bottom anchor of the ImageView. This will align the two views vertically.

Now, if you click and drag the rocket up and down, you will see that the Raze Galactic TextView moves up and down with it.

Later, you’ll see how to create alignments like this using the align menu. However, that method doesn’t always work perfectly, so it’s a good to know how to do it manually as well.

Switch to the code view in Android Studio and examine the code of the views where you just added constraints:

  <ImageView
    android:id="@+id/imageView2"
    android:layout_width="46dp"
    android:layout_height="46dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/track_icon"/>

  <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:text="Raze Galactic"
    android:textAppearance="@style/TextAppearance.AppCompat.Headline"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView2"/>

Now that you’ve added some constraints, the attributes with the tools prefix have disappeared because Android Studio no longer needs separate designtime-only layout instructions for the TextView.

Attributes for each of the constraints you’ve added now appear, such as app:layout_constraintTop_toTopOf="parent".

You can now see any margin that Android Studio inferred on your behalf, whether you wanted it to or not. These margins may look like android:layout_marginStart="16dp".

Go ahead and delete any margin attributes from the Raze Galactic TextView and switch back to the design view. The Raze Galactic TextView should now appear aligned with the rocket image.

No errors appear for these two views anymore, because Android Studio now has the minimal amount of information needed to place those two UI elements.

You should now align the Login button with the Sign Up button, just as you aligned the Raze Galactic TextView with the rocket image. To do this, you’ll set three constraints:

• The top anchor of the Login button to the top of the Sign Up button.
• The bottom anchor of the Login button to the bottom of the Sign Up button.
• The left anchor of the Login button to the right of the Sign Up button, setting a start margin of 30dp to put some space between them.

Applying Alignment Constraints

Select the Raze Galactic TextView and click on the right anchor and left anchor to delete those constraints. Then, while the TextView is still selected, click on the Align tool in the toolbar and choose Horizontally in Parent.

This automatically centers the Raze Galactic TextView in the parent container. This is the same effect that you achieved earlier when you manually added the constraints.

In fact, if you switch to Code view and inspect Raze Galactic TextView closely, you’ll notice Android Studio has added the following constraint attributes:

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"

What’s this layout_constraintHorizontal_bias that Android Studio automatically added, you may ask?

Constraint Bias

When a view is constrained on both sides horizontally or vertically, either to parent or other views, by default it has 0.5 or 50% constraint bias. In other words, the view stays in the center between the two edges to which it’s constrained.

Constraint bias ranges from 0.0 (0%) to 1.0 (100%). Horizontal constraint bias grows from left to right, while vertical constraint bias grows from top to bottom. Constraint bias is useful for positioning a view dynamically for different screen sizes.

To easily see how constraint bias works, switch back to design view. While Raze Galactic TextView is selected, look at the view inspector in the Attributes inspector:

The vertical slider on the left side of view inspector controls vertical constraint bias, and the one on the bottom controls horizontal constraint bias. Drag each slider to see how constraint bias works:

Before you move on, reset the bias to 50% for both horizontal and vertical constraints.

Align the Left Edge and Distribute Vertically

Next, simultaneously select all the TextViews, the Google Sign-In button and the Sign-Up button. You can shift-click each UI element to select them all. Then, from the toolbar, click on Align and select Left Edges.

Here is the layout after you apply Left Edges:

Have you noticed a problem here? The horizontal constraints of Raze Galactic TextView have disappeared!

Left Edges aligns the views to the left-most view among those selected. What it actually does is to create left constraint dependency from one view to another in descending order. The bottommost view acts as an anchor.

Therefore, for the Left Edges command to work, it must remove the existing horizontal constraints of the rest of the selected views.

To reverse the constraint dependency order, apply the Left Edges command again. You can see that the constraint arrow is now pointing upward.

Now, with the same UI elements selected as in the previous step, click on the Pack menu and choose Distribute Vertically.

After distributing vertically, your screen will look like this:

Again, you may have noticed a similar issue as above: The constraint connecting the bottom of the rocket icon and Raze Galactic TextView has disappeared.

The constraint dependency is in descending order, just as it was after the first Left Edges command. Unfortunately, there is no easy way to fix this, so you have to create vertically-distributed constraints manually.

The tutorial will cover how to do this in the next section, so go ahead and undo the Distribute Vertically command.

Note: The Align and Pack commands might not work as you expect. They might remove existing constraints and some constrained views might not be moved. Be sure to check the constraints of the affected views before and after applying those commands.