Constraint Layout Android Example – Part 2 [Latest]

Constraint Layout

In the first tutorial, we’ve seen how Constraint Layout helps us get rid of nested layout by the relative positioning of views using constraints.

We’ve discussed the basic tools such as autoconnect, inference, anchor points, baselines etc. in the first part. In this tutorial, we’ll see what’s new in the latest update of ContraintLayout and discuss and implement some amazing features that Constraint Layout provides.

There are a few changes in the latest Constraint Layout version since the beta versions. Ensure that you have the following dependency version (or above) in your gradle build file (build.gradle).

What’s new in Constraint Layout?

1. match_parent doesn’t exist in this layout: We need to use match_constraint (0 dp) instead and attach constraints to the sides of the parent view or let the layout size the view.
2. Setting constraints through XML: To set a button to be in the centre of the layout using xml, we need to set a constraint for each side to the parent view as shown below.
   
   <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.journaldev.constraintlayoutplaying.MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:app="https://schemas.android.com/apk/res-auto"     xmlns:tools="https://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layout_behavior="@string/appbar_scrolling_view_behavior"     tools:context="com.journaldev.constraintlayoutplaying.MainActivity">     <Button         android:id="@+id/button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Button"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>

   
   Note: Constraint Layout provides the keyword parent for the root view (ConstraintLayout in this case).

   Let’s use 0dp for the button to match the width and height.

   

3. Auto-set margin constraints: Moving the widget along the edges of the design screen would auto set the margin constraints as shown below.
   Besides the project properties pane on the right lets you set the “dp” value from a list of standard dimensions.
4. Toggle between Baseline and Anchor Points: The following button acts as a toggle between anchor and baseline constraints.
   
5. Setting Quick Constraints Using Toolbar Options: The Layout Editor provides shortcuts for aligning two views.
   1. An example for aligning two views Left, Right and Both is given below.
      
      Note: There’s an error displayed in the second TextView since we need to define a constraint along the vertical axis.
   2. An example for aligning two views Top, Bottom, Center and Baseline is given below.
      
   3. An example for aligning two views, centre horizontally or centre vertically is given below.
      
   4. The first two options in the third row align the views, centre horizontally or centre vertically within the given available space as shown below.
      
      The above constraints are loosely based on the concept of Chaining that we’ll look into soon.
      Note: The following icon that you would have noticed in the above gif is used to toggle between the chaining styles.
      

Chaining with Constraint Layout

Chains are a feature that lets us position views along an axis similar to LinearLayout. Each view is linked by bi-directional constraints. The XML attribute for chaining is app:layout_constraintVertical_chainStyle or app:layout_constraintHorizontal_chainStyle.

It accepts the following values:

1. spread: The views are evenly distributed.
2. spread_inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed.
3. packed: The views are packed together. You can then adjust the whole chain’s bias (left/right or up/down) by changing the chain’s first view’s bias
4. Weighted: A weighted chain is one with the style set as spread or spread_inside with at least one widget set to 0 dp/match_constraint. We need to assign the weight attribute for each view as : layout_constraintHorizontal_weight or layout_constraintVertical_weight

A demo of spread, spread_inside and packed horizontally is given below.

A demo of spread with weights is given below:

This brings an end to constraint layout android example tutorial. ConstraintLayout is pretty amazing layout in terms of performance compared to LinearLayout and RelativeLayout. So start adopting it!