18. A Guide to the Android ConstraintLayout

As discussed in the chapter entitled “Understanding Android Views, View Groups and Layouts”, Android provides a number of layout managers for the purpose of designing user interfaces. With Android 7, Google introduced a new layout that is intended to address many of the shortcomings of the older layout managers. This new layout, called ConstraintLayout, combines a simple, expressive and flexible layout system with powerful features built into the Android Studio Layout Editor tool to ease the creation of responsive user interface layouts that adapt automatically to different screen sizes and changes in device orientation.

This chapter will outline the basic concepts of ConstraintLayout while the next chapter will provide a detailed overview of how constraint-based layouts can be created using ConstraintLayout within the Android Studio Layout Editor tool.

18.1 How ConstraintLayout Works

In common with all other layouts, ConstraintLayout is responsible for managing the positioning and sizing behavior of the visual components (also referred to as widgets) it contains. It does this based on the constraint connections that are set on each child widget.

In order to fully understand and use ConstraintLayout, it is important to gain an appreciation of the following key concepts:

•Constraints

•Margins

•Opposing Constraints

•Constraint Bias

•Chains

•Chain Styles

•Guidelines

•Groups

•Barriers

•Flow

18.1.1 Constraints

Constraints are essentially sets of rules that dictate the way in which a widget is aligned and distanced in relation to other widgets, the sides of the containing ConstraintLayout and special elements called guidelines. Constraints also dictate how the user interface layout of an activity will respond to changes in device...

18.2 Baseline Alignment

So far, this chapter has only referred to constraints that dictate alignment relative to the sides of a widget (typically referred to as side constraints). A common requirement, however, is for a widget to be aligned relative to the content that it displays rather than the boundaries of the widget itself. To address this need, ConstraintLayout provides baseline alignment support.

As an example, assume that the previous theoretical layout from Figure 18-1 requires a TextView widget to be positioned 40dp to the left of the Button. In this case, the TextView needs to be baseline aligned with the Button view. This means that the text within the Button needs to be vertically aligned with the text within the TextView. The additional constraints for this layout would need to be connected as illustrated in Figure 18-10:

Figure 18-10

The TextView is now aligned vertically along the baseline of the Button and positioned 40dp horizontally from the Button object...

18.3 Configuring Widget Dimensions

Controlling the dimensions of a widget is a key element of the user interface design process. The ConstraintLayout provides three options which can be set on individual widgets to manage sizing behavior. These settings are configured individually for height and width dimensions:

•Fixed – The widget is fixed to specified dimensions.

•Match Constraint –Allows the widget to be resized by the layout engine to satisfy the prevailing constraints. Also referred to as the AnySize or MATCH_CONSTRAINT option.

•Wrap Content – The size of the widget is dictated by the content it contains (i.e. text or graphics).

18.4 Guideline Helper

Guidelines are special elements available within the ConstraintLayout that provide an additional target to which constraints may be connected. Multiple guidelines may be added to a ConstraintLayout instance which may, in turn, be configured in horizontal or vertical orientations. Once added, constraint connections may be established from widgets in the layout to the guidelines. This is particularly useful when multiple widgets need to be aligned along an axis. In Figure 18-11, for example, three Button objects contained within a ConstraintLayout are constrained along a vertical guideline:

Figure 18-11

18.5 Group Helper

This feature of ConstraintLayout allows widgets to be placed into logical groups and the visibility of those widgets controlled as a single entity. A Group is essentially a list of references to other widgets in a layout. Once defined, changing the visibility attribute (visible, invisible or gone) of the group instance will apply the change to all group members. This makes it easy to hide and show multiple widgets with a single attribute change. A single layout may contain multiple groups and a widget can belong to more than one group. If a conflict occurs between groups the last group to be declared in the XML file takes priority.

18.6 Barrier Helper

Rather like guidelines, barriers are virtual views that can be used to constrain views within a layout. As with guidelines, a barrier can be vertical or horizontal and one or more views may be constrained to it (to avoid confusion, these will be referred to as constrained views). Unlike guidelines where the guideline remains at a fixed position within the layout, however, the position of a barrier is defined by a set of so called reference views. Barriers were introduced to address an issue that occurs with some frequency involving overlapping views. Consider, for example, the layout illustrated in Figure 18-12 below:

Figure 18-12

The key points to note about the above layout is that the width of View 3 is set to match constraint mode, and the left-hand edge of the view is connected to the right hand edge of View 1. As currently implemented, an increase in width of View 1 will have the desired effect of reducing the width of View 3:

Figure 18-13...

18.7 Flow Helper

The ConstraintLayout Flow helper allows groups of views to be displayed in a flowing grid style layout. As with the Group helper, Flow contains references to the views it is responsible for positioning and provides a variety of configuration options including vertical and horizontal orientations, wrapping behavior (including the maximum number of widgets before wrapping), spacing and alignment properties. Chain behavior may also be applied to a Flow layout including spread, spread inside and packed options.

Figure 18-16 represents the layout of five uniformly sized buttons positioned using a Flow helper instance in horizontal mode with no wrap settings:

Figure 18-16

Figure 18-17 shows the same buttons in a horizontal flow configuration with wrapping set to occur after every third widget:

Figure 18-17

Figure 18-18, on the other hand, shows the buttons with wrapping set to chain mode using spread inside (the effects of which are only visible on...

18.8 Ratios

The dimensions of a widget may be defined using ratio settings. A widget could, for example, be constrained using a ratio setting such that, regardless of any resizing behavior, the width is always twice the height dimension.

18.9 ConstraintLayout Advantages

ConstraintLayout provides a level of flexibility that allows many of the features of older layouts to be achieved with a single layout instance where it would previously have been necessary to nest multiple layouts. This has the benefit of avoiding the problems inherent in layout nesting by allowing so called “flat” or “shallow” layout hierarchies to be designed leading both to less complex layouts and improved user interface rendering performance at runtime.

ConstraintLayout was also implemented with a view to addressing the wide range of Android device screen sizes available on the market today. The flexibility of ConstraintLayout makes it easier for user interfaces to be designed that respond and adapt to the device on which the app is running.

Finally, as will be demonstrated in the chapter entitled “A Guide to using ConstraintLayout in Android Studio”, the Android Studio Layout Editor tool has been...

18.10 ConstraintLayout Availability

Although introduced with Android 7, ConstraintLayout is provided as a separate support library from the main Android SDK and is compatible with older Android versions as far back as API Level 9 (Gingerbread). This allows apps that make use of this new layout to run on devices running much older versions of Android.

18.11 Summary

ConstraintLayout is a layout manager introduced with Android 7. It is designed to ease the creation of flexible layouts that adapt to the size and orientation of the many Android devices now on the market. ConstraintLayout uses constraints to control the alignment and positioning of widgets in relation to the parent ConstraintLayout instance, guidelines, barriers and the other widgets in the layout. ConstraintLayout is the default layout for newly created Android Studio projects and is the recommended choice when designing user interface layouts. With this simple yet flexible approach to layout management, complex and responsive user interfaces can be implemented with surprising ease.