Constraint Layout Android Example – Part 2

Filed Under: Android

This is the second tutorial in the series of posts on Constraint Layout android example. If you haven’t read the first one, refer here before proceeding.

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).


compile 'com.android.support.constraint:constraint-layout:1.0.2'

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="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://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.

    android constraint layout match constraints

  3. Auto-set margin constraints: Moving the widget along the edges of the design screen would auto set the margin constraints as shown below.
    constraint layout android auto margin

    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.
    android constraint layout baseline toggle button

    android constraint layout baseline demo

  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.
      android constraint layout quick constraints example
      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.
      android constraint layout quick constraints example 2
    3. An example for aligning two views, centre horizontally or centre vertically is given below.
      android constraint layout quick constraints example 3
    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.
      android constraint layout alignment example
      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.
      android constraint layout chain style

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.
android constraint layout chaining

A demo of spread with weights is given below:
android constraint layout chaining weights

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages