The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Advanced ConstraintLayout

The original chapter on ConstraintLayout covered some basic uses of this container class, particularly how it can be used in the place of classic containers like LinearLayout and RelativeLayout. In this chapter, we will explore other features that ConstraintLayout offers and other use cases for this container.

This chapter examines some more layouts from the Containers/Sampler sample project.

Prerequisites

Understanding this chapter requires that you have read the core chapters of this book, particularly the original chapter on ConstraintLayout.

Guidelines

Guidelines in graphics editors help in drawing operations. For example, in an SVG editor like Inkscape, you can “snap” shapes to align along a guideline. The guideline itself does not appear in the output; it is merely something used at drawing time to aid in drawing.

A Guideline serves a similar role with ConstraintLayout. A Guideline is not rendered as part of our UI. It does, however, allow us to anchor widgets inside the ConstraintLayout to the Guideline, just as we can anchor those widgets to other widgets or to the ConstraintLayout itself. And, as the name suggests, a Guideline is part of our GUI builder as well, to allow you to visually place the Guideline and connect widgets to that Guideline.

A Guideline has an orientation, such as horizontal, set via android:orientation. horizontal means that they span the width of the ConstraintLayout, and something else has to indicate where they reside vertically within the ConstraintLayout.

That “something else” is the app:layout_constraintGuide_percent attribute. For a horizontal Guideline, this indicates how far down from the start of the ConstraintLayout the Guideline widget belongs, in terms of a fraction of the overall height of the ConstraintLayout.

In the original chapter on ConstraintLayout, we saw how to allocate space on a percentage basis directly using specific constraints (e.g., app:layout_constraintWidth_percent). Here is another edition of the stacked-percentage layout, this time implemented using Guideline widgets:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.constraint.Guideline
    android:id="@+id/guideline_50"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".50" />

  <android.support.constraint.Guideline
    android:id="@+id/guideline_80"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent=".80" />

  <Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="@string/fifty_percent"

    app:layout_constraintBottom_toTopOf="@id/guideline_50"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="@string/thirty_percent"

    app:layout_constraintBottom_toTopOf="@id/guideline_80"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/guideline_50" />

  <Button
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="@string/twenty_percent"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/guideline_80" />

</android.support.constraint.ConstraintLayout>

Here, we have two such Guideline widgets, each set to horizontal, and set to appear 50% (.50) and 80% (.80) from the start.

Our three Button widgets do not specify their own heights — they use 0dp for android:layout_height. They just anchor themselves between the ConstraintLayout bounds and the two Guideline widgets.

So, our top Button has its top edge aligned with the top edge of the ConstraintLayout (app:layout_constraintTop_toTopOf="parent"). But it also has its bottom anchored to the top of the .50 Guideline (app:layout_constraintBottom_toTopOf="@id/guideline_50"). Combined with the 0dp height, this stretches the Button between the top and the middle of the ConstraintLayout.

The middle Button anchors itself between the two Guideline widgets, using app:layout_constraintBottom_toTopOf="@id/guideline_80" and app:layout_constraintTop_toTopOf="@id/guideline_50". It too stretches to fill that gap, and so it will take up 30% of the space (between the .50 and the .80 Guideline widgets).

Similarly, the bottom Button ties itself to the bottom of the ConstraintLayout (app:layout_constraintBottom_toBottomOf="parent") as well as to the .80 Guideline (app:layout_constraintTop_toTopOf="@id/guideline_80").

The result is the 50%/30%/20% look that we achieved using LinearLayout and that we achieved using app:layout_constraintHeight_percent with a ConstraintLayout:

Stacked-Percent Layout, Using ConstraintLayout
Figure 431: Stacked-Percent Layout, Using ConstraintLayout

To add a guideline through the graphical layout editor, use the toolbar button that looks like a vertical dotted line between two small solid horizontal lines. Clicking that opens up a drop-down to choose a vertical or a horizontal guideline, among other options:

Guideline Toolbar Button, With Drop-Down
Figure 432: Guideline Toolbar Button, With Drop-Down

Choosing one of the guideline options drops a guideline in the desired orientation into the blueprint view, which you can then drag to the desired location.

Barriers to Entry

The preview of this section was traded for a bag of magic beans.

Disclosing Your Bias

The preview of this section is being chased by zombies.

Centering Yourself

The preview of this section was lost in the sofa cushions.

Keeping Things Proportional

The preview of this section was accidentally identified as an Android 'tasty treat' by the Cookie Monster.

Constraining Sizes

The preview of this section left for Hollywood to appear in a reality TV show.

Chains, Without the Whips

The preview of this section is [REDACTED].

What If We’re GONE?

The preview of this section was fed to a gremlin, after midnight.

Going in a Circle

The preview of this section is in the process of being translated from its native Klingon.

Groups of Views… But Not ViewGroups

The preview of this section is presently indisposed.